テキストブックP.119 STEP22 も参考にしましょう
<table>テーブルタグは「表を作成する」
基本の4つのタグ
<table>～</table> 表の範囲（1つのテーブル全体を囲う）
<tr>～</tr> 表内の行
<th>～</th> 見出しセル
<td>～</td> その他のセル
01 簡単な表を作ってみる
HTML
<table><tr>
<th>フルーツ</th> <th>色</th>
</tr>
<tr>
<td>いちご</td> <td>赤</td>
</tr>
<tr>
<td>レモン</td> <td>黄色</td>
</tr>
</table>
tableは枠線なしに初期設定されているので以下のように表示されます。
| フルーツ | 色 |
|---|---|
| いちご | 赤 |
| レモン | 黄色 |
02 スタイルシートで枠線を指定する
CSSで線を表示させます。
border-collapse: collapse;
はセルとセルの間にスペースが出来てしまうのを無くすためcollapse（コラプス）を指定します
CSS
table {
border-collapse: collapse;
}
td {
border: 1px solid #333;
}
th {
border: 1px solid #333;
}
| フルーツ | 色 |
|---|---|
| いちご | 赤 |
| レモン | 黄色 |
03 行を増やす
今度は行を増やし
CSSで ｔｈのbackground color、テキストをcenterにします paddingでスペースを作ります
HTML
<table>
<tr>
<th>フルーツ</th> <th>色</th>
</tr>
<tr>
<td>いちご</td> <td>赤</td>
</tr>
<tr>
<td>レモン</td> <td>黄色</td>
</tr>
<tr>
<td>メロン</td> <td>緑</td>
</tr>
</table>
CSS
table {border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
border: 1px solid #333;
}
th {
border: 1px solid #333;
padding: 10px;
background-color: #1e90ff;
color: white;
}
| フルーツ | 色 |
|---|---|
| いちご | 赤 |
| レモン | 黄色 |
| メロン | 緑 |
04 列を増やす
HTML
<table>
<tr>
<th>フルーツ</th> <th>色</th> <th>味</th>
</tr>
<tr>
<td>いちご</td> <td>赤</td> <td>甘酸っぱい</td>
</tr>
<tr>
<td>レモン</td> <td>黄色</td> <td>酸っぱい</td>
</tr>
<tr>
<td>メロン</td> <td>緑</td> <td>甘い</td>
</tr>
</table>
| フルーツ | 色 | 味 |
|---|---|---|
| いちご | 赤 | 甘酸っぱい |
| レモン | 黄色 | 酸っぱい |
| メロン | 緑 | 甘い |