はじめに
この実験では、HTML テーブル内のテーブルデータを定義するために使用される HTML <td> タグについて学びます。また、このタグとともに使用できるさまざまな属性についても学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
HTML テーブルの作成
最初のステップは、いくつかのデータを含む HTML テーブルを作成することです。index.html ファイルを開き、次のコードを追加します。
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
ここでは、2 行 3 列の HTML テーブルを作成しました。<td> タグは、テーブル内の各セルの内容を定義するために使用されます。
colspan 属性の使用
colspan 属性は、セルが跨ぐ列の数を指定するために使用されます。colspan 属性を使用するには、次のコードを追加します。
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td colspan="2">John Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
ここでは、最初の 2 列を跨ぐように colspan 属性を使用して、1 つのセルに人物の名前を表示しています。
rowspan 属性の使用
rowspan 属性は、セルが跨ぐ行の数を指定するために使用されます。rowspan 属性を使用するには、次のコードを追加します。
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td rowspan="2">John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Male</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">Female</td>
</tr>
</table>
</body>
</html>
ここでは、名前の列を跨ぐように rowspan 属性を使用して、2 行にわたって 1 つのセルに人物の名前を表示しています。
header 属性の使用
header 属性は、セルが 1 つ以上のヘッダーセルに関連付けられていることを指定するために使用されます。header 属性を使用するには、次のコードを追加します。
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<th id="name-header">Name</th>
<th>Age</th>
</tr>
<tr>
<td headers="name-header">John Doe</td>
<td>22</td>
</tr>
<tr>
<td headers="name-header">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
ここでは、最初の列が ID name-header のヘッダーセルに関連付けられていることを指定するために header 属性を使用しています。
まとめ
おめでとうございます！HTML テーブル内のテーブルデータを定義するために HTML <td> タグをどのように使用するかを学びました。また、このタグとともに使用できる colspan、rowspan、header などのさまざまな属性についても学びました。これらの属性を使って、より複雑なテーブルを作成することができます。
