HTMLのtable要素の基本

web design /

導入

HTMLのテーブル要素のデザインをする事が続いたので、ちょっとメモ代わりにtable要素のおさらいをしてみました。

Table

HTMLのtable要素使うとページ内で表を作る事が出来ます。

table要素

基本的な要素

以下の要素があればシンプルなテーブルを作る事が可能です。

table テーブルを定義
tr テーブルの行を定義
th ヘッダセルを作成
td データセルを作成 
<table>
  <tr>
    <th>名</th>
    <th>姓</th>
  </tr>
  <tr>
    <td>織田</td>
    <td>信長</td>
  </tr>
  <tr>
    <td>武田</td>
    <td>信玄</td>
  </tr>
</table>
姓 名
織田 信長
武田 信玄

thead, tbody, tfoot

thead, tbody, tfoot要素はそれぞれテーブルのヘッダ、ボディ、フッタを定義します。

tbody テーブルのボディ部を定義
thead テーブルのヘッダ部を定義
tfoot テーブルのフッタ部を定義

caption

caption タグを使うとテーブルにキャプションをつける事が出来ます。

colspan

結合するセルの数を指定します。

テーブルの例

<table>
  <caption>戦国武将のデータ</caption>
  <thead>
    <tr>
      <th colspan="2">戦国武将</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>姓</th>
      <th>名</th>
    </tr>
    <tr>
      <td>織田</td>
      <td>信長</td>
    </tr>
    <tr>
      <td>武田</td>
      <td>信玄</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">*この表は独自の調査に基づきます。</td>
    </tr>
  </tfoot>
</table>
戦国武将のデータ
戦国武将
姓 名
織田 信長
武田 信玄
*この表は独自の調査に基づきます。

Style sheet

テーブルにスタイルシートを適用します。

border-collapse

border-collapseはテーブルのセルの境界線のレイアウトを指定します。

collapse

セルの境界線のボーダーを重ねて表示。

border-collapse: collapse;
姓 名
織田 信長
武田 信玄

separate

セルの境界線のボーダーを間隔をあけて表示。

border-collapse: separate;
姓 名
織田 信長
武田 信玄
border-spacing

border-collapse で separate を指定した場合にはborder-spacing で間隔のサイズを指定する事が出来ます。

//border-spacing: horizontal vertical;
border-spacing: 10px 20px;
姓 名
織田 信長
武田 信玄

StyleSheetの例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <caption>戦国武将のデータ</caption>
      <thead>
        <tr>
          <th colspan="2">戦国武将</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>姓</th>
          <th>名</th>
        </tr>
        <tr>
          <td>織田</td>
          <td>信長</td>
        </tr>
        <tr>
          <td>武田</td>
          <td>信玄</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">*この表は独自の調査に基づきます。</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

table {
  width: 300px;
}
table thead tr {
  background: #f69542;
}
table tbody tr {
  background: #dfdfdf;
}
table tbody tr td {
  text-align: left;
}
table tfoot tr {
  background: #c9ecf6;
  font-size: 0.7em;
  text-align: right;
}
table tfoot tr td {
  text-align: right;
}
戦国武将のデータ
戦国武将
姓 名
織田 信長
武田 信玄
*この表は独自の調査に基づきます。

あとがき

非常に大雑把なまとめになってしまいましたがtfoot要素などは普段あまり使う機会も無く、その存在を忘れがちなのであとで見返せるようにメモとして残しておきます。

参照

開発者向けのWeb技術/MDN
HTMLクイックリファレンス

Html5 logo by © https://www.w3.org/html/logo