9月 292010
きれいなTableの書き方のサンプルソース。
| パラメータ | 値 | 説明 |
| パラム1 | 99.9 | ほげほげほげほげ。 |
| パラム2 | 99.9 | ほげほげほげほげ。 |
サンプルソースは以下をコピペしてください。
【 直に書く方法 】
<table style="line-height: 1.33em; border-collapse: collapse;" cellspacing="1″ cellpadding="5″> <tbody> <tr align="center"> <td style="padding:5px; background-color:#edf5f9;border:1px solid #42B4ED;font-weight: bold;" width="25%">パラメータ</td> <td style="padding:5px; background-color:#edf5f9;border:1px solid #42B4ED;font-weight: bold;" width="18%">値</td> <td style="padding:5px; background-color:#edf5f9;border:1px solid #42B4ED;font-weight: bold;" width="57%">説明</td> </tr> <tr> <td style="border: 1px solid #42B4ED;" valign="top">パラム1</td> <td style="border: 1px solid #42B4ED;" valign="top">99.9</td> <td style="border: 1px solid #42B4ED;" valign="top">ほげほげほげほげ。</td> </tr> <tr> <td style="border: 1px solid #42B4ED;" valign="top">パラム2</td> <td style="border: 1px solid #42B4ED;" valign="top">99.9</td> <td style="border: 1px solid #42B4ED;" valign="top">ほげほげほげほげ。</td> </tr> </tbody> </table>
【 StyleSheetバージョン 】
<table class="list" cellpadding="5" cellspacing="1" width="100%">
<tbody>
<tr align="center">
<td class="ttl" width="25%">パラメータ</td>
<td class="ttl" width="18%">値</td>
<td class="ttl" width="57%">説明</td>
</tr>
<tr align="center">
<td width="18%">パラメータ</td>
<td width="25%">値</td>
<td width="57%">説明</td>
</tr>
<tr align="center">
<td width="18%">パラメータ</td>
<td width="25%">値</td>
<td width="57%">説明</td>
</tr>
</tbody>
</table>
<style>
table.list{
line-height:1.33em;
border-collapse:collapse;
}
table.list td{
margin:0px;
padding:5px;
background-color:#FFFFFF;
border:1px solid #42B4ED;
vertical-align:top;
}
.list td.ttl{
padding:5px;
background-color:#EDF5F9;
border:1px solid #42B4ED;
font-weight:bold;
}
</style>
