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>