はじめに
表は、構造化された形式でデータを提示するために使用できます。任意の表の基本コンポーネントは、セルの行を定義する表の行 () 要素です。表の行は、表 () 要素の中に囲まなければなりません。この実験では、HTML の表の行を作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
HTML テーブル構造の作成
HTML テーブルを作成するには、まずテーブルの構造を定義する必要があります。index.html という名前の HTML ファイルを作成して始めましょう。次のコードをファイルに追加します。
<!doctype html>
<html>
<head>
<title>My Table</title>
</head>
<body>
<table>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
</table>
</body>
</html>
このコードでは、2 行 2 列の HTML テーブルを作成しました。最初の行には 2 つのヘッダーセル (
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
これで、テーブルには 3 行あり、各行には 2 つのセルが含まれます。
テーブル行のスタイリング
CSS を使って表の行にスタイルを追加することができます。偶数行に背景色を追加するには、次のスタイルを 要素に追加します。
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>
このコードは、表の 2 行目ごとに lightgray の背景色を追加します。
テーブル行のマージ
rowspan 属性を使って、2 つ以上の隣接する行を 1 つの行にマージすることができます。たとえば、最初の 2 行を 1 つの行にマージしたいとしましょう。最初の
<tr>
<th rowspan="2">Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
最初のヘッダーセルの rowspan="2" 属性により、最初の 2 行が 1 つの行にマージされます。
テーブルセルヘッダーの作成
表でヘッダーセルを作成するには、
| ) が含まれ、2 番目の行には 2 つのデータセル ( | ) が含まれています。
さらに多くの行を追加するテーブルにさらに行を追加するには、テーブルにさらに | |
|---|---|---|
| 要素を使用できます。ヘッダーセルは通常、列の内容を説明するために使用されます。最初の列にヘッダーセルを追加するには、2 行目の最初の | 要素を次のコードに置き換えます。
| 要素の `scope="row"` 属性は、これが最初の行のヘッダーセルであることを指定します。
まとめこの実験では、HTML の表の行を作成し、CSS を使って表をカスタマイズする方法を学びました。また、隣接する行をマージし、表内にヘッダーセルを作成する方法も学びました。これらのスキルを使えば、Web ページに美しく構造化された表を作成できるようになりました。 |
