テーブルレイアウト 06

タイトル
テキスト テキスト
テキスト テキスト
タイトル
テキスト テキスト
テキスト テキスト
タイトル
テキスト テキスト
テキスト テキスト

テーブルを2段にするには、2段にしたい列の table に style="clear:both" を記述し、テーブルタグを挿入

--- HTML ---
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
     <!--lelft-->
     <table cellpadding="0" cellspacing="0" class="st1">
     <tr>
     <td class="title" colspan="2">タイトル</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     </table>
</td>
<td>
     <!--center-->
     <table cellpadding="0" cellspacing="0" class="st2">
     <tr>
     <td class="title" colspan="2">タイトル</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     </table>
</td>
<td>
     <!--right-->
     <table cellpadding="0" cellspacing="0" class="st3">
     <tr>
     <td class="title" colspan="2">タイトル</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     </tr>
     </table>
</td>
</tr>
</table>

--- CSS ---
table {
     width:595px;
}

table td {
     vertical-align:top;
}

table.st1 {
     width:186px;
     border:1px solid #ccc;
     line-height:1.32em;
}

table.st2 {
     width:186px;
     border:1px solid #ccc;
     line-height:1.32em;
     position:relative;
     left:7px;
}

table.st3 {
     width:186px;
     border:1px solid #ccc;
     line-height:1.32em;
     float:right;
}

table.st1 td,
table.st2 td,
table.st3 td {
     width:90px;
     padding:5px;
     font-size:80%;
}

table.st1 td.title,
table.st2 td.title,
table.st3 td.title {
     background:#eee;
}