生徒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.

