横方向にセルを連結する

先ほどの節で、「い」「ろ」「は」「に」「ほ」「へ」「と」や「タイトル」「左メニュー」「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. コンテンツ部分をデザインする

  2. さくらレンタルサーバーを借りよう

  3. 改行をする

  4. 文法に則ったHTML記述

  5. “page2.html”へリンクする

  6. リストに画像を指定する

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

ランダムピックアップ