9月 292010
 
このエントリーをはてなブックマークに追加
はてなブックマーク - きれいなTableの書き方  Htmlサンプルソース
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

きれいな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>



 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player