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

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

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

使い方

  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」

tb1
デモページを見る

2. 罫線「table-bordered」

tb2
デモページを見る

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

tb3
デモページを見る

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

tb4
デモページを見る

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

tb5
デモページを見る

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

tb6
デモページを見る

7. 角丸「table-border-radius」

tb7
デモページを見る

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

tb8
デモページを見る

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

tb9
デモページを見る

10. 罫線なし「table-noborder」

tb10
デモページを見る

11. 右揃え(数値向け)「table-bordere」

tb11
デモページを見る