<table>～</table>テーブルを表示します。テーブルの行は <tr>、ヘッダセルは <th>、通常セルは <td> で表します。他にも下記の関連要素があります。
<caption> : テーブルの表題
<thead> : テーブルのヘッダ行
<tbody> : テーブルのボディ行
<tfoot> : テーブルのフッタ行
<colgroup> : テーブルの列グループ
<col> : テーブルの列
以前はレイアウトの目的でテーブルが多用された時期もありましたが、現在ではレイアウトは フレックスボックス や グリッド を用いることが推奨されています。
基本的なテーブルは次のように記述します。<table> はテーブル、<tr> は行、<th> はヘッダセル、<td> はデータセルを示します。デフォルトでは枠線は表示されません。
<table> <tr><th></th><th>列-A</th><th>列-B</th></tr> <tr><th>行-1</th><td>A-1</td><td>B-1</td></tr> <tr><th>行-2</th><td>A-2</td><td>B-2</td></tr> <tr><th>行-3</th><td>A-3</td><td>B-3</td></tr> </table>
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
枠線を表示するには スタイルシート の border を用います。下記は、class="my-table" を指定したテーブルの th と td に 1ピクセル、直線、色が #999 の枠線を描画することを意味します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テーブルテスト</title>
<style>
.my-table th,
.my-table td {
border: 1px solid #999;
}
</style>
</head>
<body>
<table class="my-table">
<tr><th></th><th>列-A</th><th>列-B</th></tr>
<tr><th>行-1</th><td>A-1</td><td>B-1</td></tr>
<tr><th>行-2</th><td>A-2</td><td>B-2</td></tr>
<tr><th>行-3</th><td>A-3</td><td>B-3</td></tr>
</table>
</body>
</html>
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
枠線の隙間を無くすには、border-collapse を指定します。
.my-table {
border-collapse: collapse;
}
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
セルに色をつけるには background-color を指定します。
.my-table th {
background-color: #ddf;
}
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
セルの幅を指定するには width、高さを指定するには height を指定します。
.my-table th,
.my-table td {
border: 1px solid #999;
width: 6rem;
}
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
セルを右寄せ・左寄せ・中央寄せするには text-align に left(左寄せ), center(中央寄せ), right(右寄せ) を指定します。ヘッダセル(th)はデフォルトで中央寄せされています。
.my-table td {
text-align: center;
}
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
3列目の td のみ制御したい場合は :nth-child(n) を指定します。
.my-table td:nth-child(3) {
text-align: center;
}
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
セルを連結するには <th> や <td> に rowspan=n, colspan=n を指定します。n は連結するセル数を指定します。
<table class="my-table"> <tr><th></th><th>列-A</th><th>列-B</th></tr> <tr><th>行-1</th><td colspan="2">A-1</td></tr> <tr><th>行-2</th><td>A-2</td><td rowspan="2">B-2</td></tr> <tr><th>行-3</th><td>A-3</td></tr> </table>
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | |
テーブルを横に並べるには flex を使用します。
.my-flex {
display: flex;
gap: 1rem;
}
<div class="my-flex">
<table class="my-table">
...
</table>
<table class="my-table">
...
</table>
</div>
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |
少々マニアックですが、下記の様にして角の丸いテーブルを記述することができます。
.my-round-table { border-spacing: 0; }
.my-round-table > * > tr > th { background-color: #ddf; }
.my-round-table > * > tr > td { text-align: center; }
.my-round-table > * > tr > * { width: 6rem; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.my-round-table > * > tr:first-child > *:first-child { border-top-left-radius: .5rem; }
.my-round-table > * > tr:first-child > *:last-child { border-top-right-radius: .5rem; }
.my-round-table > * > tr:last-child > *:first-child { border-bottom-left-radius: .5rem; }
.my-round-table > * > tr:last-child > *:last-child { border-bottom-right-radius: .5rem; }
.my-round-table > * > tr:first-child > * { border-top: 1px solid #999; }
.my-round-table > * > tr > *:first-child { border-left: 1px solid #999; }
<table class="my-round-table"> ... </table>
| 列-A | 列-B | |
|---|---|---|
| 行-1 | A-1 | B-1 |
| 行-2 | A-2 | B-2 |
| 行-3 | A-3 | B-3 |