横方向にセルを連結する

先ほどの節で、「い」「ろ」「は」「に」「ほ」「へ」「と」や「タイトル」「左メニュー」「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. はじめに – 初めてWeb入門とは

  4. 【練習】このページを作りなさい

  5. Crescent Eveをダウンロード

  6. CSS導入の最後の準備

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

ランダムピックアップ