table tr td 表組みコピペで使えるHTML+CSS

table tbody tr td要素の概要
属性
1. td要素の属性
CSSデザイン
1. 角丸の表を作成する

table tbody tr td要素の概要

表組み

<table><tbody><tr><td>～</td></tr></tbody></table>

目的

表（表組み）を表示。下に向かって1行、2行。右に向かって1列、2列でカウント。

1行目1列目	1行目2列目	1行目3列目
2行目1列目	2行目2列目	2行目3列目
3行目1列目	3行目2列目	3行目3列目

<table>で表組みを宣言、<tbody>が表の本体、<tr>で行、<td>で列となります。<tbody>がなくても表自体は問題なく表示することはできる。2000年の頃はテーブルを使ってレイアウトをすることが多かったですが、そういったレイアウトはしないよう注意してください。

<table>
  <tbody>
    <tr> /* 1行目 */
      <td>1行目1列目</td>
      <td>1行目2列目</td>
      <td>1行目3列目</td>
    </tr>
    <tr> /* 2行目 */
      <td>2行目1列目</td>
      <td>2行目2列目</td>
      <td>2行目3列目</td>
    </tr>
    <tr> /* 3行目 */
      <td>3行目1列目</td>
      <td>3行目2列目</td>
      <td>3行目3列目</td>
    </tr>
  </tbody>
</table>

属性

td要素の属性

colspan

列を統合する

<table>
  <tbody>
    <tr>
      <td>1行目1列目</td>
      <td>1行目2列目</td>
    </tr>
    <tr>
      <td colspan="2">2行目1列目と2行目2列目を結合</td>
    </tr>
  </tbody>
</table>

1行目1列目	1行目2列目
2行目1列目と2行目2列目を結合

rowspan

行を結合する

<table>
  <tbody>
    <tr>
      <td>1行目1列目</td>
      <td rowspan="2">1行目2列目と2行目2列目を結合</td>
    </tr>
    <tr>
      <td>2行目1列目</td>
    </tr>
  </tbody>
</table>

1行目1列目	1行目2列目と2行目2列目を結合
2行目1列目

headers: <th>要素と関連付けをする際に用いる。ただし表の作りによっては<colgroup> <col>を用いたほうが良い。

CSSデザイン

角丸の表を作成する

table 角丸の表を作成する内側の壁紙問題も対応コピペで使えるHTML+CSS

CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。