テーブル（表）を作成するには主に次のタグを用います。
<table border="1"> <tr><th>姓</th><th>名</th><th>年齢</th></tr> <tr><td>山田</td><td>太郎</td><td>36</td></tr> <tr><td>鈴木</td><td>花子</td><td>32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
<td colspan=n> を用いると、右方向に n 個のセルを連結することができます。
<table border="1"> <tr><th colspan="2">姓名</th><th>年齢</th></tr> <tr><td>山田</td><td>太郎</td><td>36</td></tr> <tr><td>鈴木</td><td>花子</td><td>32</td></tr> </table>
これをブラウザで表示すると次のようになります。
| 姓名 | 年齢 | |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
<td rowspan=n> を用いると、縦方向に n 個のセルを連結することができます。
<table border="1"> <tr><th>姓</th><th>名</th><th>年齢</th></tr> <tr><td rowspan="2">山田</td><td>太郎</td><td>36</td></tr> <tr><td>花子</td><td>32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 花子 | 32 |
border-collapse を用いることで、テーブルの枠線を細くすることができます。
<table border="1" style="border-collapse:collapse;"> <tr><th>姓</th><th>名</th><th>年齢</th></tr> <tr><td>山田</td><td>太郎</td><td>36</td></tr> <tr><td>鈴木</td><td>花子</td><td>32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
<tr> や <th> や <td> に background-color を指定してテーブルに色をつけることができます。
<table border="1"> <tr style="background-color:#ccf;"><th>姓</th><th>名</th><th>年齢</th></tr> <tr><td>山田</td><td>太郎</td><td>36</td></tr> <tr><td>鈴木</td><td>花子</td><td>32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
<th> や <td> に width を指定してセルの横幅を指定することができます。
<table border="1"> <tr><th style="width:5rem;">姓</th><th style="width:5rem;">名</th><th style="width:3rem;">年齢</th></tr> <tr><td>山田</td><td>太郎</td><td>36</td></tr> <tr><td>鈴木</td><td>花子</td><td>32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
<tr> や <th> や <td> に text-align を指定して右寄せすることができます。
<table border="1"> <tr><th style="width:5rem;">姓</th><th style="width:5rem;">名</th><th style="width:3rem;">年齢</th></tr> <tr><td>山田</td><td>太郎</td><td style="text-align:right;">36</td></tr> <tr><td>鈴木</td><td>花子</td><td style="text-align:right;">32</td></tr> </table>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |
上記では分かりやすさのために border="1" を用いた例を紹介していますが、実は、border 属性は現在では廃止されていて、代わりに スタイルシート(CSS) を用いた記述が求められています。下記に、スタイルシートを用いてテーブルのスタイルを指定する例を示します。一度スタイルを指定しておけば、class="my-table" を指定したすべてのテーブルに同じスタイルが適用されます。詳細は「とほほのCSS入門」を参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの練習</title>
<style>
.my-table { /* class="my-table" を指定した要素に対して */
border-collapse: collapse; /* 枠線を細くする */
th, td { /* th と td に対して */
border: 1px solid #999; /* 枠線を引く */
}
th { /* th に対しては */
background-color: #ccf; /* 背景を薄青にする */
}
td:nth-child(1) { /* td の1列目は */
width: 5rem; /* 幅を5文字分にする */
}
td:nth-child(2) { /* td の2列目は */
width: 5rem; /* 幅を5文字分にする */
}
td:nth-child(3) { /* td の3列目は */
width: 3rem; /* 幅を3文字分にして */
text-align: right; /* テキストを右寄せにする */
}
}
</style>
</head>
<body>
<table class="my-table">
<tr><th>姓</th><th>名</th><th>年齢</th></tr>
<tr><td>山田</td><td>太郎</td><td>36</td></tr>
<tr><td>鈴木</td><td>花子</td><td>32</td></tr>
</table>
</body>
</html>
| 姓 | 名 | 年齢 |
|---|---|---|
| 山田 | 太郎 | 36 |
| 鈴木 | 花子 | 32 |