<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td colspan="2">データ
</table>
<table border="1">
<tr><td>データ<td rowspan="2">データ
<tr><td>データ
</table>
データを入力しないと凹みのないセルが作成されます(-ie7のみ)。
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>
</table>
凹みのないセルを凹ませるには、セル内に<br>や や透過GIFイメージなどを配置します(-ie7のみ)。
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td><br>
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td><img src="img/space.gif" width="1" height="1"><!--
--></table>
テーブルは前後に改行が入り、左右に並べたくても並んでくれません。これを並べるには、もう1つテーブルを用意します。
<table border="1">
<tr><td>データ<td>データ
</table>
こういう形をしたテーブルです。このテーブルのデータの部分に、それぞれテーブルを配置します。線を消してコンテナとなるテーブルの隙間を調節すれば完成です。
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<td>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
</table>
前後に改行の入る
ブロック要素もテーブルを利用することで、左右に並べることができます。
スタイルシートを用いることで、もっときれいなソースで、テーブルなどの
ブロック要素を横に並べることができます。
<table border="1" style="float:left">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<div style="width:200px; float:left;">こんにちは 左</div>
<div style="width:200px; float:right;">こんにちは 右</div>
<div>こんにちは 中央</div>
div要素のサンプルでは見やすくするために、枠線(border:solid 1px #aaa;)を指定しています。
テーブルには、データとデータの間などに隙間があります。具体的には線の太さ(border)、セルとセルの隙間(cellspacing)、セル内部の隙間(cellpadding)の3つが存在します。これらをなくすためには以下のような指定を行います。
<table border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#cccccc">データ<td bgcolor="#aaaaaa">データ
<tr><td bgcolor="#aaaaaa">データ<td bgcolor="#cccccc">データ
</table>
サンプルでは、見やすくするために背景色をつけています。
テーブルの基本形
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
セルとセルの隙間(sellspacing)を0に設定
<table border="1" cellspacing="0" cellpadding="7">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
背景にもうひとつのテーブルを使用した手法
<table cellpadding="0" cellspacing="0" bgcolor="#c0c0c0">
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="1">
<tr bgcolor="#ffffff"><td>データ<td>データ
<tr bgcolor="#ffffff"><td>データ<td>データ
</table>
</table>
