横方向にセルを連結する

先ほどの節で、「い」「ろ」「は」「に」「ほ」「へ」「と」や「タイトル」「左メニュー」「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. 2カラムを指定する

  3. 改行をする

  4. 表を装飾する

  5. ウェブサイトを公開する方法

  6. 最初のファイルを作る

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

ランダムピックアップ