HTML table要素

ホームページを作るときに絶対に会社概要あたりで使うハメになるtableタグ
DreamWeaverではCTRL+ALT+Tでtableの生成・挿入ができますが、挿入時にインデントがバラバラになったり使い勝手が悪いため、正直手で打ったほうが圧倒的に早いです。
それにツールが使えない環境でもtableをすらすら書けるというのはメリット以外の何でもありません。
というわけでtableの書き方をてきとーに解説しようと思います。

まずは目で見てある程度法則を捉えましょう。
よく使うかもしれないテンプレートをいくつか書いておきます。

3x3 左カラムに見出し

<table border="1" width="500">
  <tr>
    <th>見出し1</th>
    <td>カラム1</td>
    <td>カラム2</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>カラム1</td>
    <td>カラム2</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>カラム1</td>
    <td>カラム2</td>
  </tr>
</table>

表示結果

3x3 1行目に見出し

<table border="1" width="500">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>カラム1</td>
    <td>カラム2</td>
    <td>カラム3</td>
  </tr>
  <tr>
    <td>カラム1</td>
    <td>カラム2</td>
    <td>カラム3</td>
  </tr>
</table>

表示結果

2x4 左カラムに見出し

<table border="1" width="500">
  <tr>
    <th>見出し1</th>
    <td>カラム1</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>カラム2</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>カラム3</td>
  </tr>
  <tr>
    <th>見出し4</th>
    <td>カラム4</td>
  </tr>
</table>

表示結果

セルの結合

colspan要素を使うと横のセル、rowspan要素を使うと縦のセル(tr越し)と結合できます。

colspanで横3つのセルを結合

<table border="1" width="500">
  <tr>
    <th colspan="3">見出し</th>
  </tr>
  <tr>
    <td>カラム1</td>
    <td>カラム2</td>
    <td>カラム3</td>
  </tr>
  <tr>
    <td>カラム4</td>
    <td>カラム5</td>
    <td>カラム6</td>
  </tr>
  <tr>
    <td>カラム7</td>
    <td>カラム8</td>
    <td>カラム9</td>
  </tr>
</table>

表示結果

tr(行)中に3つのtd,th(セル)がある場合、colspan="3"とすると3つのセルが結合して行一つのセルになります。

rowspanで縦のセルを結合

<table border="1" width="500">
  <tr>
    <th rowspan="3">見出し</th>
    <td>カラム</td>
    <td>カラム</td>
  </tr>
  <tr>
    <td>カラム</td>
    <td>カラム</td>
  </tr>
  <tr>
    <td>カラム</td>
    <td>カラム</td>
  </tr>
</table>

表示結果

rowspan="3"により、trタグ3つ分の縦セルを結合しています。

tableの中にtable

<table border="1" width="500">
  <tr>
    <th>会社名</th>
    <td>○○株式会社</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>

      本社：
      <table border="1">
        <tr>
          <th>住所</th>
          <td>○○県○○市○○町○番○号</td>
        </tr>
        <tr>
          <th>TEL</th>
          <td>0000000000</td>
        </tr>
        <tr>
          <th>FAX</th>
          <td>0000000000</td>
        </tr>
      </table>

      営業所：
      <table border="1">
        <tr>
          <th>住所</th>
          <td>○○県○○市○○町○番○号</td>
        </tr>
        <tr>
          <th>TEL</th>
          <td>0000000000</td>
        </tr>
        <tr>
          <th>FAX</th>
          <td>0000000000</td>
        </tr>
      </table>

    </td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>代表取締役社長　○○ ○○</td>
  </tr>
  <tr>
    <th>設立</th>
    <td>1993年○月○日</td>
  </tr>
  <tr>
    <th>資本金</th>
    <td>1億円</td>
  </tr>
</table>

表示結果

このようなtable中のtable入れ子も可能です。

タグと主な属性の解説

タグ

table: tableを定義
tr: 行を定義　trに対するスタイルは効かないモノが多いため"行を定義するだけのタグ"と捉えると良いでしょう。
th: 見出しセルを定義　必須ではありませんがそのセルが明らかに見出しの場合はthを使ったほうがtdと区別が付くため自然です。
td: セルの内容を囲みます。

属性

border: ボーダーのサイズを指定　border="1"とするとデフォルトの場合2重ボーダーが表示されます。table要素にのみ使えます。
width: 横幅pxを指定 table,th,tdに対して使います。
colspan: 横のセルを結合 th,tdに対して使います。
rowspan: 縦のセルを結合 th,tdに対して使います。

tableのスタイル

二重線を1本線に

ボーダーはデフォルトでは二重線ですがborder-collapse: collapseとすると2つのボーダーが重なって1本線に表示されます。
下記はボーダーを1本線にして1pxのボーダーを指定するスタイルです。

table {
  border-collapse: collapse;
  border: 1px solid #666;
}

thだけ背景色を付けてみる

table tr th {
  background-color: #ccc;
}

paddingで自然な隙間を加えてみる

table tr th,
table tr td {
  padding: 0.5em;
}

tableの入れ子のtableにmarginをかけて隙間を入れる。

table tr td table {
  margin-bottom: 1em;
}

table tr td table ~ table {
  margin-bottom: 0;
}

table ~ tableの部分は兄弟要素に適用されるという意味です。つまり2番目のtableのmargin-bottom: 0でクリアされ1番目のtableのmargin-bottomだけが効くようになります。

表示結果はこんな感じになります。

ぽくなりましたね。

関連記事

3x3 左カラムに見出し

3x3 1行目に見出し

2x4 左カラムに見出し

セルの結合

tableの中にtable

タグと主な属性の解説

tableのスタイル

コメント