はじめに
HTML テーブルは、Web ページ上に表形式のデータを表示するために一般的に使用されます。この実験では、<table>、<tr>、<td>、および <th> タグを使用して基本的な HTML テーブルを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
テーブルの作成
まず、index.html という新しい HTML ファイルを作成し、基本構造を設定しましょう。<body> タグの中に、<table> 要素を作成します。この要素には、テーブルのすべての行と列が含まれます。
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table></table>
</body>
</html>
行の定義
次に、<tr> タグを使用してテーブルの行を定義します。各行には 1 つ以上のセルが含まれます。単一のセルを作成するには、<td> タグを使用します。
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
表の見出しの追加
場合によっては、テーブルにヘッダー行を追加したい場合があります。このためには、<td> タグの代わりに <th> タグを使用します。
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
罫線とスタイルの追加
デフォルトでは、HTML テーブルは最小限のスタイル設定で、罫線がありません。テーブルに罫線を追加するには、CSS の border プロパティを使用します。
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
まとめ
このチュートリアルを追うことで、基本的な HTML テーブルを作成し、CSS を使ってスタイルを付ける方法を学びました。セルに colspan や rowspan などの属性を追加したり、<caption> や <thead> などの追加タグを使うことで、テーブルをさらにカスタマイズできます。これらのツールを使えば、ウェブページにデータを表示するための複雑で情報に富んだテーブルを作成できます。
