コピペだけで使える！ブログに貼れるきれいなテーブルデザイン

ブログを書いていると、見やすいようにテーブルを使って一覧表にすることもあると思います。

私はこのブログで情報をまとめた一覧表をよく作っています。

最も基本的なテーブルは

1位

2位

3位

みたいなデザインですが、あまり見栄えがよくありません。

もし、きれいなデザインのテーブルを作ろうとするとCSSというデザインのルールをおぼえなければ作れません。
先日図書館で本をかりてきて勉強をしてみたのですが、結構難しいです。

そこでブログでも簡単に使えるCSSを使ったきれいなデザインでテーブルを使った表を作ってみました。

ソースをコピペするだけでブログでも使えますので、よろしければ貼ってみてください。表の中身は必要に応じて変えてください。

コピペすると次のようなシンプルで見やすい表が出来上がります。

完成する表

シェア1位	シェア2位	シェア3位	シェア4位
トヨタ	日産	ホンダ	ダイハツ
セブンイレブン	ローソン	ファミリーマート	サークルKサンクス
アップル	富士通	ソニー	シャープ

コピペするソース

<table style="border: 1px #ffffff solid;border-collapse: collapse;border-spacing: 0;">

<tr>
<th style="padding: 5px;border: 1px #dcdddd solid;background: #F5F5F5;font-weight: bold;text-align: center;">シェア1位</th>

<th style="padding: 5px;border: 1px #dcdddd solid;background: #F5F5F5;font-weight: bold;text-align: center;">シェア2位</th>

<th style="padding: 5px;border: 1px #dcdddd solid;background: #F5F5F5;font-weight: bold;text-align: center;">シェア3位</th>

<th style="padding: 5px;border: 1px #dcdddd solid;background: #F5F5F5;font-weight: bold;text-align: center;">シェア4位</th>
</tr>

<tr>
<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">トヨタ</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">日産</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">ホンダ</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">ダイハツ</td>
</tr>

<tr>
<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">セブンイレブン</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">ローソン</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">ファミリーマート</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">サークルKサンクス</td>
</tr>

<tr>
<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">アップル</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">富士通</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">ソニー</td>

<td style="padding: 5px;border: 1px #dcdddd solid;text-align: center;">シャープ</td>
</tr>

</table>