セルを並べる｜テーブルタグ講座

テーブルタグ｜セルを並べる｜たったこれだけタグ講座

スポンサードリンク

セルを横に増やす
セルを縦に増やす
まとめ

基本タグ見本

サンプル

セルA

セルB

<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
</tr>
</table>

上記のタグを見てもらえれば解ると思いますが<tr>～</tr>の中に<td>が1つ増えてます。セルを横方向に並べる時はこのように<tr>～</tr>の中に<td>を必要分増やせばよいのです。

セルを横に増やす

ではセルを横方向に5列増やします。

セルA

セルB

セルC

セルD

セルE

<table border="1">
<tr>
<td>セルA</td>
<td>セルB</td>
<td>セルC</td>
<td>セルD</td>
<td>セルE</td>
</tr>
</table>

セルの幅

では、各セル<td>の幅を指定してみましょう。・セルAの幅を200・セルBの幅を300にしてみます。

セルA

セルB

<table border="1">
<tr>
<td width="200">セルA</td>
<td width="300">セルB</td>
</tr>
</table>

テーブルの幅同様にwidth="数値"で指定します。もちろん【％】でも指定出来ます。

セルの高さ

次に、各セル<td>の高さを指定してみましょう。・セルの高さを200にしてみます。

セルA

セルB

<table border="1">
<tr>
<td width="200" height="200">セルA</td>
<td width="300" height="200">セルB</td>
</tr>
</table>

テーブルの幅同様にheight="数値"で指定します。もちろん％でも指定出来ます。

テーブル単体の時（１行の時）、セルの高さを指定する機会はあまりありません。（高さを指定する際はテーブルの方に指定する）なぜなら・セルAの高さを200・セルBの高さを300なんて出来ないからです。

横方向に並んだセルは大枠のテーブルの中にありますから、もし高さを指定するならテーブルの高さを指定しましょう。

参考までに1

幅を指定する際に気をつける事があります。例えばページ全体の横幅が700pxだったとします。にもかかわらず、・セルAの幅を450・セルBの幅を400にしてた,,,,なんて事が時にあります。こんな時は、700pxを超える事はありませんが本来指定したかった・セルA450・セルＢ400という幅指定は崩れる事になります。

また、下記サンプルを見てほしいのですが、すべて幅指定で500となるように指定しました。

サンプル1

テーブル　幅500

サンプル2

セルＡ　幅200

セルＢ　幅300

<!-- サンプル1 -->
<table border="1" width="500">
<tr>
<td>テーブル　幅500</td>
</tr>
</table>

<!-- サンプル2 -->
<table border="1">
<tr>
<td width="200">セルＡ　幅200</td>
<td width="300">セルＢ　幅300</td>
</tr>
</table>

不思議ですね。この違いについては後ほどセル間の幅で説明します。

参考までに2

実は、ココまでホームページの基本的な段組（レイアウト）が出来ます。

例えば、ホームページの全体の幅を700pxとしてレイアウトしてみると

サンプル表示

<table border="1" width="700" height="100">
<tr>
<td>ホームページのタイトル</td>
</tr>
</table>
<!-- ↑ココまでがタイトル用 -->

<table border="1" width="700" height="500">
<tr>
<td width="500">コンテンツ</td>
<td width="200">メニュー</td>
</tr>
</table>
<!-- ↑ココまでがコンテンツ・メニュー用 -->

<table border="1" width="700" height="100">
<tr>
<td>ホームページのタイトル</td>
</tr>
</table>
<!-- ↑ココまでが著作権表示用 -->

セルを縦に並べる

基本タグ見本

セルＡ

セルＢ

<table border="1">
<tr>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＢ</td>
</tr>
</table>

上記のようにセルを縦方向に並べるには<tr>～</tr>の部分を追加する事になります。<tr>は行です！

セルを縦に増やす

ではセルを縦方向に5行増やします。

セルＡ

セルＢ

セルＣ

セルＤ

セルＥ

<table border="1">
<tr>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＢ</td>
</tr>
<tr>
<td>セルＣ</td>
</tr>
<tr>
<td>セルＤ</td>
</tr>
<tr>
<td>セルＥ</td>
</tr>
</table>

セルの幅

では、各セル<td>の幅を指定してみましょう。・セル幅を200にしてみます

サンプル

セルＡ

セルＢ

<table border="1">
<tr>
<td width="200">セルＡ</td>
</tr>
<tr>
<td width="200">セルＢ</td>
</tr>
</table>

テーブルの幅同様にwidth="数値"で指定します。もちろん％でも指定出来ます。

テーブル単体の時（１列の時）、セルの幅さを指定する機会はあまりありません。（幅を指定する際はテーブルの方に指定する）なぜなら・セルAの幅を200・セルBの幅を300なんて出来ないからです。

縦方向に並んだセルは大枠のテーブルの中にありますから、もし幅を指定するならテーブルの幅を指定しましょう。

セルの高さ

次に、各セル<td>の高さを指定してみましょう。・セルAの高さを50・セルBの高さを100にしてみます。

セルＡ

セルＢ

<table border="1">
<tr>
<td width="200" height="50">セルＡ</td>
</tr>
<tr>
<td width="200" height="100">セルＢ</td>
</tr>
</table>

テーブルの幅同様に【height="数値"】で指定します。もちろん【％】でも指定出来ます。

今までのまとめ

今までのまとめです。2×2の表を作成します。

・列ＡＣの幅150・列ＢＤの幅300　・行ＡＢの高さ50・行ＣＤの高さ100　とします。

Ａ	Ｂ
Ｃ	Ｄ

<table border="1">
<tr>
<td width="150" height="50">Ａ</td>
<td width="300" height="50">Ｂ</td>
</tr>
<tr>
<td width="150" height="100">Ｃ</td>
<td width="300" height="100">Ｄ</td>
</tr>
</table>

お分かりになりましたか。

スポンサードリンク