テーブルタグのHTMLサンプルコード
以下は、HTMLでテーブルを作成するための基本的なサンプルコードです。
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
<td>セル1-3</td>
</tr>
<tr>
<td>セル2-1</td>
<td>セル2-2</td>
<td>セル2-3</td>
</tr>
</table>
このコードは、3つのヘッダーセルを持つ1行目の行と、2つのデータセルを持つ2行目と3行目の行を持つテーブルを作成します。
<table>はテーブルの開始タグで、</table>はテーブルの終了タグです。<tr>は行の開始タグで、</tr>は行の終了タグです。<th>はヘッダーセルの開始タグで、</th>はヘッダーセルの終了タグです。<td>はデータセルの開始タグで、</td>はデータセルの終了タグです。
thead、tbodyを使ったテーブルタグのHTMLサンプルコード
以下は、<thead>、<tbody>、および<th>タグを使用したHTMLのテーブルのサンプルコードです。
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
<td>セル1-3</td>
</tr>
<tr>
<td>セル2-1</td>
<td>セル2-2</td>
<td>セル2-3</td>
</tr>
</tbody>
</table>
このコードは、1行目の行を含む<thead>要素と、2つの行を含む<tbody>要素を持つテーブルを作成します。
<thead>要素は、表の列の見出しを含む部分を囲むために使用されます。<tbody>要素は、表の実際のデータを含む部分を囲むために使用されます。
この例では、<thead>要素内の<tr>要素に<th>要素を使用して列の見出しを定義し、<tbody>要素内の<tr>要素に<td>要素を使用して各列のデータを定義します。
figcaptionでキャプションを入れたテーブルタグのHTMLサンプルコード
以下は、<figcaption>タグを使用してテーブルにキャプションを追加するHTMLのサンプルコードです。
<figure>
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
<td>セル1-3</td>
</tr>
<tr>
<td>セル2-1</td>
<td>セル2-2</td>
<td>セル2-3</td>
</tr>
</table>
<figcaption>表のキャプションをここに入れます。</figcaption>
</figure>
このコードは、<table>要素を<figure>要素で囲み、テーブルの下にキャプションを追加するために<figcaption>タグを使用します。
<figure>要素は、文書内の写真、図、表、コードブロック、またはその他のコンテンツのグループを定義するために使用されます。<figcaption>タグは、<figure>要素内のコンテンツにキャプションを追加するために使用されます。
この例では、<figcaption>タグ内にキャプションのテキストを挿入し、テーブルの下にキャプションを表示します。