WEBページに表を書きたいです
HTMLのtableタグで表を書く方法を説明します
WEBページの表はtable
タグで作成する
WEBページで表を書きたいときには作りたいときにはtable
タグを使用します。
この記事では、tableタグでの表の作成について説明します。
See the Pen table_1 by mik20621 (@mik20621) on CodePen.
table
タグの構成
table
タグの内側のタグ構成は以下のようになります。
- 表の内容全体を
table
タグで囲む - 表の各行の内容をそれぞれ
tr
タグで囲む - 行内の各列の内容をそれぞれ
th
(見出しの場合) またはtd
(見出し以外) で囲む
<!-- 表全体をtableタグで囲む -->
<table>
<!-- 1行の内容をtrタグで囲む -->
<tr>
<!-- 見出しのセルはthタグで書く -->
<th>国名</th>
<th>首都</th>
</tr>
<!-- 2行目 -->
<tr>
<td>日本</td>
<td>東京</td>
</tr>
<!-- 3行目 -->
<tr>
<td>アメリカ</td>
<td>ワシントンDC</td>
</tr>
</table>
tr
タグで行を定義する
tr
タグで囲んだ内容が、表の1行になります。
表の1行おきに背景色を変えるといった場合は、tr
タグのスタイルを定義します。
<table>
<!-- 1行目 -->
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<!-- 2行目 -->
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>
See the Pen CSS-table-td by mik20621 (@mik20621) on CodePen.
行ごとに背景色を変える
表の行の背景色を行ごとに変えるには、CSSでtr
タグに対して以下のようにスタイルを指定します。
/* 偶数の行を指定 */
tr:nth-of-type(2n) {
background: lightblue;
}
/* 奇数の行を指定 */
tr:nth-of-type(2n+1) {
background: lightyellow;
}
See the Pen table_1 by mik20621 (@mik20621) on CodePen.
th
タグで見出しセルを定義する
行や列の見出しのセルはth
タグで定義します。
See the Pen CSS-table-th2 by mik20621 (@mik20621) on CodePen.
th
タグにはブラウザで、以下のスタイルが適用されています。
- 文字が中央寄せ
- 文字が太字
列見出しも行見出しもth
タグで定義する
列の見出しも、行の見出しも両方ともth
タグで書きます。
See the Pen CSS-table-caption by mik20621 (@mik20621) on CodePen.
scope
属性で見出しセルを区別する
列の見出しと行の見出しを区別するにはscope
属性を使用します。
<!-- 列の見出しセルの場合 -->
<th scope="col">列の見出し</th>
<!-- 行の見出しセルの場合 -->
<th scope="row">行の見出し</th>
属性 | 値 | 説明 |
---|---|---|
scope | row | 行の見出しであることを表します。 |
col | 列の見出しであることを表します。 | |
rowgroup | 行グループの見出しであることを表します。 | |
colgroup | 列グループの見出しであることを表します。 |
td
タグでセルを定義する
見出し以外の通常のセルはtd
タグで書きます。
<table>
<tr>
<!-- 1行目の各セルを定義 -->
<td>セル1−1</td>
<td>セル1−2</td>
<td>セル1−3</td>
</tr>
<tr>
<!-- 1行目の各セルを定義 -->
<td>セル2−1</td>
<td>セル2−2</td>
<td>セル2−3</td>
</tr>
</table>
See the Pen CSS-table-th by mik20621 (@mik20621) on CodePen.
その他の定義
thead
タグでヘッダー行を定義する
thead
はヘッダにする行を囲むタグです。
表の見出し行にするtr
タグをthead
タグで囲みます。
<table>
<thead>
<tr>
<th colspan="2>国名</th>
<th>首都</th>
</tr>
<tr>
<th>国名</th>
<th>首都</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
</tr>
</table>
See the Pen ::before::after-thead by mik20621 (@mik20621) on CodePen.
tfoot
タグでフッター行を定義する
tfoot
は表の合計行などフッター部分の行を表すタグです。
フッター行のtr
タグをfootタグで囲みます。
<table>
<tr>
<th>売上</th>
<td>100円</td>
<td>50円</td>
<td>200円</td>
<td>150円</td>
</tr>
<!-- フッターにする行をtfootタグで囲む
<tfoot>
<tr>
<th>半期合計</th>
<td colspan="2">150円</td>
<td colspan="2">350円</td>
</tr>
<tr>
<th>通期合計</th>
<td colspan="4">500円</td>
</tr>
</tfoot>
</table>
See the Pen ::before::after-thead by mik20621 (@mik20621) on CodePen.
colgroup
タグで表の列をグループ化する
colgroup
タグで表の列のグループを定義することができます。
グループ化することで、グループ単位でスタイルを定義できるようになります。
<table>
<!-- 列のグループを定義する -->
<colgroup>
<!-- 2列をグループ化 -->
<col span="2" class="group1"/>
<!-- 2列をグループ化 -->
<col span="2" class="group2"/>
<!-- 1列をグループ化 -->
<col class="group3"/>
</colgroup>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>
See the Pen CSS-table-colgroup by mik20621 (@mik20621) on CodePen.
セルのプロパティを定義する
colspan
は水平方向に複数のセルを結合する
colspan
はセルが何列にまたがるかを指定します。
See the Pen CSS-table-td by mik20621 (@mik20621) on CodePen.
rowspan
は垂直方向に複数のセルを結合する
rowspan
はセルが何行にまたがるかを指定します。
See the Pen CSS-table-colapan by mik20621 (@mik20621) on CodePen.
tableには以下のルールがあります。
- 全ての行のセル数を同じにする(rowspan=”2″の場合、2個と数える)
- 全ての列のセル数を同じにする(colspan=”2″の場合、2個と数える)
このルールに従っていないと、表示がおかしくなりますので、colspan
やrowspan
を使うときは特に注意が必要です。
caption
タグで表の見出しを設定する
caption
タグで表の見出しを書くことができます。
CSSのcaption-side
プロパティで見出しを表の上下どちらに表示するか設定できます。
See the Pen CSS-border-spacing by mik20621 (@mik20621) on CodePen.
tableタグの見た目を変更する
table
タグの表は、初期値のままだと見た目が古い感じがします。
CSSでスタイルを変更することで、見た目を変えることができます。
See the Pen table_1 by mik20621 (@mik20621) on CodePen.
border-collapse
プロパティは枠線の形式を設定
table
の各セルの枠線の形式を以下の2つから設定します。
collapse
は隣り合う枠線を重ねるseparate
は隣り合う枠線を離す
collapse
は隣り合う枠線を重ねる
border-collapse: collapse;
は親要素や隣り合う要素の枠線を重ねて表示します。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
separate
は隣り合う枠線を離す
border-collapse: separate;
は親要素や隣り合う要素の枠線を離して表示します。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
枠線の間隔をborder-spacing
プロパティで定義する
border-collapse: separate;
の場合border-spacing
プロパティで枠線の間のサイズを設定できます。
See the Pen CSS-border-spacing by mik20621 (@mik20621) on CodePen.