6.1 tableとtrの要素
HTMLのテーブルはデータを表形式に整理するために使われるよ。テーブルを作成するために使われる基本的なタグは、<table>、<tr>、そして<td>だね。それぞれを詳しく見ていこう。
<table>
<table>タグはテーブル全体のコンテナだよ。この中にテーブルの行が配置されていて、それぞれが<tr>タグで定義されるんだ。
使い方の例:
HTML
<table>
<!-- 行とセルがここに追加される -->
</table>
<tr>（table row）タグ
<tr>タグはテーブルの行を示すんだ。この<tr>タグの中にはテーブルセルが配置されて、それぞれが<td>または<th>タグで定義されるんだ。
使い方の例:
HTML
<table>
<tr>
<!-- 行のセルがここに追加される -->
</tr>
</table>
6.2 tdとthの要素
<td>（table data）タグ
<td>タグは、テーブルの行内のデータセルを定義するのに使われるよ。これらのセルにはテーブルデータが含まれていて、<tr>タグで示される行の中に配置されるんだ。
使い方の例:
HTML
<table>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
</table>
<th>（table head）タグ
<th>タグは、テーブルの見出しセルを示すために使われるよ。<th>内のテキストは通常、太字で中央に揃えられるんだ。
使い方の例:
HTML
<table>
<tr>
<th>ヘッダ1</th>
<th>ヘッダ2</th>
<th>ヘッダ3</th>
</tr>
</table>
テーブルの例:
HTML
<table>
<tr>
<th>名前</th> <th>年齢</th> <th>都市</th>
</tr>
<tr>
<td>イワン</td> <td>30</td> <td>トロント</td>
</tr>
<tr>
<td>マリヤ</td> <td>25</td> <td>フランクフルト</td>
</tr>
<tr>
<td>ニナ</td> <td>35</td> <td>パリ</td>
</tr>
</table>
6.3 テーブルのスタイリング
テーブルはCSSを使ってスタイリングする必要があるよ。そうすることでデータが見やすく、読みやすくなるからね。
例えば、各セルに枠を追加したいとするよね。それは良い考えだけど、各セルに枠があると、隣接するセルの間に二重枠ができてしまうんだ。 🤦♂️
枠を自分の思う通りにしたい場合は、CSSを使って隣接する枠を結合する必要があるよ。このために使うのがborder-collapseプロパティだよ。
以下は、私たちのテーブルの良いスタイリング例です：
CSS
table {
width: 50%; /* テーブルの幅を設定 */
border-collapse: collapse; /* セル間の二重線を解除 */
}
th, td {
border: 1px solid black; /* セルに境界を設定 */
padding: 8px; /* セル内の余白を追加 */
text-align: left; /* テキストを左揃え */
}
th {
background-color: #f2f2f2; /* 見出しの背景色を設定 */
}
ここで何が分かるかというと：
- 各セルには1ピクセルの黒い境界がある
- セル間の二重線が解除されている
- 各セルには内側の余白があり、テキストが境界にくっつかないようになっている
- 見出しセルには別の背景色が設定されている
美しさ！
GO TO FULL VERSION