|
thのタグや tdのタグに width や heightの属性を指定すると、
セルの幅や高さを指定することができます。
セルに入る内容は 必ずしも同じ文字数や行数になるとは限りませんね。
そこで あらかじめ width や heightの属性を指定することで、
セルの大きさを揃えておくと 見た目にもすっきりまとめることができるわけです。
| mamoho |
おとうさん |
| 大輔くん |
おにいちゃん |
| 奈美ちゃん |
いもうと |
上記のテーブルは 幅 300ピクセルです。
左側のセルは width="100" 右側のセルは200ピクセルで指定しています。
この場合 一番上の行のセルだけ width の属性を指定すると
２行目 ３行目のセルは 上のセルにあわせて表示されます。
<table width="300" border="1">
<tr>
<td width="100">mamoho</td>
<td width="200">おとうさん</td>
</tr>
<tr>
<td>大輔くん</td>
<td>おにいちゃん</td>
</tr>
<tr>
<td>奈美ちゃん</td>
<td>いもうと</td>
</tr>
</table> |
今度は このテーブルを別々に分けてみます。
上記のように 項目に分けてテーブルを設置したいとき
セルの幅をそろえておけば たとえテーブルが離れていても
きちんと揃っていますね。ページの見出しや 項目の見出し
なんかにも こういった使い方ができますね。
ホームページ作成ソフトでテーブルを作ったとき、
セルの枠線をドラッグして幅を整えたりすることも多いと思います。 確かに 見た目は揃っているようにも思えますが、
セル内に入っているテキストや 画像の大きさが違うと
うまく揃わないこともよくあります。
そんなときは ちょっと面倒くさいかもしれませんが
この width や heightの数値をそろえてみましょう。
きっちり整ってくれますよ！ |
