行と列の結合
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 50/60。
HTMLでは、rowspan属性とcolspan属性を使用して、テーブルのセルを複数の行または列にまたがらせることができます。これらの属性を使用すると、セルを結合することで、より複雑なテーブルレイアウトを作成できます。
colspan属性は、セルがまたがる列の数を指定するために使用されます。これは、拡張したいセルの<td>または<th>タグに追加されます。
colspan の使用例を以下に示します：
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>この例では、"Name"というテキストを持つヘッダーセルが2つの列にまたがっています。これは、複数の列をカバーするヘッダーを作成するのに便利です。見た目は次のようになります：
rowspan属性は、セルがまたがる行数を指定するために使用されます。これは、拡張したいセルの<td>または<th>タグに追加されます。
rowspan の使用例は以下の通りです：
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>ここでは、名前を繰り返さずにAlexが朝と夜の両方のシフトで働いていることを示すために、rowspanが使用されています。
同じテーブル内で colspan と rowspan の両方を使用して、複雑なレイアウトを作成できます。結合されたセルに合わせて、各行のセル数を適切に調整することを忘れないでください。
チャレンジ
簡単複数の行と列にまたがるセルを持つテーブルを含むHTMLドキュメントを作成してください。テーブルは以下の構造にする必要があります：
- テーブルを定義するための
<table>タグ。視認性のためにborder属性を "1" に設定します。 - 2つの列にまたがり、"Student Information" というテキストを含むヘッダーセル (
<th>) を持つテーブル行 (<tr>)。 - "Name" と表示されるヘッダーセル (
<th>) と、2つの行にまたがり "John Doe" というテキストを含むデータセル (<td>) を持つ別のテーブル行 (<tr>)。 - "Age" と表示されるヘッダーセル (
<th>) を持つ別のテーブル行 (<tr>)。 - "Jane Smith" と表示されるデータセル (
<td>) と、"25" と表示されるデータセル (<td>) を持つ最後のテーブル行 (<tr>)。
チートシート
セルを複数の列にまたがらせるには、colspan を使用します：
<th colspan="2">Name</th>セルを複数の行にまたがらせるには、rowspan を使用します：
<td rowspan="2">John</td>両方のスパン属性を使用したテーブルの例：
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Exams</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Kim</td>
<td>A</td>
<td>B+</td>
</tr>
</table>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- ここにコードを記述してください -->
</table>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
