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

Loading
  1. セルを横に増やす
  2. セルを縦に増やす
  3. まとめ

基本タグ見本

サンプル

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

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

Back To Top

セルを横に増やす

ではセルを横方向に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>

Back To Top

セルの幅

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

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

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

Back To Top

セルの高さ

次に、各セル<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="数値"で指定します。もちろん%でも指定出来ます。

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

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

Back To Top

参考までに1

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

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

サンプル1

テーブル 幅500

サンプル2

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

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

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

Back To Top

参考までに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>
<!-- ↑ココまでが著作権表示用 -->

Back To Top

セルを縦に並べる

基本タグ見本

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

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

Back To Top

セルを縦に増やす

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

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

Back To Top

セルの幅

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

サンプル

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

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

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

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

Back To Top

セルの高さ

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

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

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

Back To Top

今までのまとめ

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

・列ACの幅150・列BDの幅300 ・行ABの高さ50・行CDの高さ100 とします。

<table border="1">
<tr>
<td width="150" height="50">A</td>
<td width="300" height="50">B</td>
</tr>
<tr>
<td width="150" height="100">C</td>
<td width="300" height="100">D</td>
</tr>
</table>

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

Back To Top

スポンサードリンク

CSS.Design sample Home