作業効率がアップする！シンプルで見映えの良いテーブルCSS11種類
この記事は2014年6月に公開したものです（12年以上前）。当時の情報にもとづいており、現在の仕様とは異なる場合があります。
テーブルのデザインを簡単に指定できる、テーブルのCSSテンプレートを作りました。
無料配布するので、ご自由にご利用ください。
全11種類のスタイルが入っています。
色を変えるなど、お好みでカスタマイズしてお使いください。
ダウンロードとデモページ
使い方
- まずは、ファイルをダウンロード。
- 適用させたいHTMLのhead部分で、ダウンロードした「tablestyle.css」を読み込みます。
<link rel="stylesheet" href="css/tablestyle.css" type="text/css"/>
- テーブルにクラス名を付けることで、スタイルが適用されます。
横罫線のみ「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」
ウェブサイトの制作・改善や、社内の困りごとのご相談を承っています。
相談してみる