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

スポンサーリンク

table tbody tr td要素の概要

表組み
<table><tbody><tr><td>~</td></tr></tbody></table>
目的表(表組み)を表示。下に向かって1行、2行。右に向かって1列、2列でカウント。
関連<caption> <th> <thead> <tfoot> <colgroup> <col>
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を実装した汎用性の高い設計も解説します。