横方向にセルを連結する

先ほどの節で、「い」「ろ」「は」「に」「ほ」「へ」「と」や「タイトル」「左メニュー」「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つ繋げます」という意味です。
ひとつの

で二つ分のセルを表しているので、その分

はひとつ減ります。

では、3つ繋げてみましょう。

<table border="1">
<tr>
<td colspan="3">いろは</td>
</tr>
<tr>
<td>に</td>
<td>ほ</td>
<td>へ</td>
</tr>
</table>


ひとつの

で3つ分のセルを表しているので、

はふたつ消すことになります。

では、本番。この表を作ってみてください。
できれば先にソースを見ないで。出来なければ見てでもいいので、やりましょう。



できましたか?


関連記事

  1. 「初めてWeb入門」講座一覧

  2. ブロックの余白を指定する

  3. 表の概念

  4. 画像を表示する

  5. テストアップロードをしよう

  6. 2カラムデザインを実装する

お手本ナビの無料HPデザイン

ランダムピックアップ