作業効率がアップする！シンプルで見映えの良いテーブルCSS11種類

テーブルのデザインを簡単に指定できる、テーブルのCSSテンプレートを作りました。
無料配布するので、ご自由にご利用ください。
全11種類のスタイルが入っています。
色を変えるなど、お好みでカスタマイズしてお使いください。

ダウンロードとデモページ

• ダウンロード（zip）
• デモページ

使い方

1. まずは、ファイルをダウンロード。
2. 適用させたいHTMLのhead部分で、ダウンロードした「tablestyle.css」を読み込みます。

   <link rel="stylesheet" href="css/tablestyle.css" type="text/css"/>

3. テーブルにクラス名を付けることで、スタイルが適用されます。
   

   横罫線のみ「table」（デフォルト）のスタイルを適用させたい場合

   <table class="table-default">〜</table>

   ストライプ「table-striped」のスタイルを適用させたい場合

   <table class="table-default table-striped">〜</table>
   

   ※デフォルトのクラス「table-default」は常に付けます。

スタイル11種類一覧

1. 横罫線のみ（デフォルト）「table-default」

デモページを見る

2. 罫線「table-bordered」

デモページを見る

3. 見出し行 背景色あり「table-title-bg」

デモページを見る

4. ストライプ「table-striped」

デモページを見る

5. コンパクト「table-condensed」

デモページを見る

6. マウスオーバーで背景色「table-hover」

デモページを見る

7. 角丸「table-border-radius」

デモページを見る

8. 見出しセル 行頭罫線「table-title-lborder」

デモページを見る

9. 見出しセル 上罫線「table-title-tborder」

デモページを見る

10. 罫線なし「table-noborder」

デモページを見る

11. 右揃え（数値向け）「table-bordere」

デモページを見る