横方向にセルを連結する
先ほどの節で、「い」「ろ」「は」「に」「ほ」「へ」「と」や「タイトル」「左メニュー」「lコンテンツ」などの文字が入っていた四角い空間(<td>で表していた部分)のことを、「セル」といいます。
今回は、その「セル」をつなげてみましょう。
サンプルコードです。
<table border="1">
<tr>
<td colspan="2">いろ</td>
<td>は</td>
</tr>
<tr>
<td>に</td>
<td>ほ</td>
<td>へ</td>
</tr>
</table>
「colspan="2"」は、「(自分のセルを含めて)そのセルを2つ繋げます」という意味です。
ひとつの<td>で二つ分のセルを表しているので、その分<td>はひとつ減ります。
では、3つ繋げてみましょう。
<table border="1">
<tr>
<td colspan="3">いろは</td>
</tr>
<tr>
<td>に</td>
<td>ほ</td>
<td>へ</td>
</tr>
</table>
ひとつの<td>で3つ分のセルを表しているので、<td>はふたつ消すことになります。
では、本番。この表を作ってみてください。
できれば先にソースを見ないで。出来なければ見てでもいいので、やりましょう。
できましたか?
あなたも、サポートメールに参加しませんか?
『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。 |
※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。 |