テーブルを横に並べるには？ float:(left|right);
<table border="1" style="float:left;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
float:right;
<table border="1" style="float:right;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
floatプロパティを用いたカラム(ブロック要素の配置)
head
left
right
main
foot
<div style="background:#def;">head</div>
<div style="float:left; width:10em; height:3em; background:#ff9;">left</div>
<div style="float:right; width:10em; height:3em; background:#fbb;">right</div>
<div style="width:auto; height:3em; background:#cf9;">main</div>
<div style="clear:both; background:#def">foot</div>
テーブルを横に並べるには？ display:(inline|inline-table);
*1 table要素に「display:inline;」あるいは「display:inline-table;」を用いると、ie以外のブラウザではテーブルレイアウトが大きく崩れてしまいます。今しばらくは「float:left;」を使用するしかなさそうです。
display:inline;
<table border="1" style="display:inline;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1" style="display:inline;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
display:inline-table;
<table border="1" style="display:inline-table;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<table border="1" style="display:inline-table;">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
<style type="text/css"><!--
.eg1 {border-collapse:collapse;} /* 隣り合うボーダーを重ねて表示 */
.eg1 th {
border:1px solid #666;
padding:6px;
}
.eg1 td {
border:1px solid #666;
padding:6px;
}
--></style>
...
<table border="0" class="eg1">
<tr><th>ヘッダ<th>ヘッダ<th>ヘッダ
<tr><td>データ<td>データ<td>データ
<tr><td>データ<td>データ<td>データ
</table><br>
<style type="text/css"><!--
.eg2 {border-collapse:collapse;} /* 隣り合うボーダーを重ねて表示 */
.eg2 th {
border:1px solid #666;
background:#ddd url("img/cell.gif");
background-repeat:no-repeat;
padding:6px;
}
.eg2 td {
border:1px solid #666;
background:#fff;
padding:6px;
}
--></style>
...
<table border="0" class="eg2">
<tr><th>ヘッダ<th>ヘッダ<th>ヘッダ
<tr><td>データ<td>データ<td>データ
<tr><td>データ<td>データ<td>データ
</table>
ヘッダの上辺、左辺に白いラインを入れるためには以下のようなセルが十分収まる大きさの透過GIFなどの画像を用意します。
見やすくなるように背景に色を着けています。
