WEBのテーブルをCSSで指定

  • 2011.07.28 15:30
  • Cat:web
WEBのテーブルをCSSで指定する。

ホームページやブログで表などを表示するときに table(テーブル)を使います。

CSSで指定すると良い感じにできるんですよ。

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。











WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


もう少し スマートな感じに

<table style="border-style: solid; border-width: 1px 0 0 0;
border-color: #666 #fff #666 #fff; border-spacing: 0;">
<tbody>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。












WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


外部のスタイルシートを使う場合は

CSSは、
.table01 { border-style: solid; border-width: 1px 0 0 0; border-color: #666 #fff #666 #fff; border-spacing: 0;}
.table01 th { padding: 8px; border: #666 solid; border-width: 0 0 1px 0; background: #ccc; color: #000; font-weight: bold;}
.table01 td { padding: 8px; border-style: solid; border-width: 0 0 1px 0; border-color: #666 #fff #666 #fff; color: #000;}

htmlは、

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>


色々と面白そうな表が出来そうな感じがしませんか?
試してみてくださいね。
関連記事
スポンサーサイト

Comment

Comment Form
公開設定

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。