Table をキレイに表示させるタグとCSS

表を作るときに使うtableタグですが、普通に使うとキレイな表にならないんですよね。
私が良く使うテーブルタグの書き方をご紹介します。

Tableの完成イメージ

こんな感じの罫線と背景の設定についてをご紹介します。

個人的にセルすべてを罫線で囲うのが嫌いなので、セルの横線は基本的に付けません。
時と場合と使い道によるんですが、大抵の場合はこのテーブルデザインで使っています。

tableタグの書き方

<table>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
</table>

これはごく普通に書きます。

tableタグに設定するCSS(スタイルシート)

tableタグにCSSでboderをつけて使うわけなんですが、そのまま使うとへんなスキマができたりするので、それをCSSで調整します。

table そのものに設定するCSS

tableに設定するCSSは以下の通り。

table {
    border-spacing: 0;
    border-collapse: collapse;
	border-bottom: 1px solid #aaa;
    color: #555;
    width: 100%;   
}	

tableを使う時は共通デザインにしたいので、tableタグそのものにスタイルを設定していますが、お好みに合わせてクラス指定したりしてください。

border-spacing の調整

このCSSは隣接するセルのボーダーの間隔を設定するCSSです。
デフォルトだと隙間が空くので、CSSでスキマをなくします。

border-spacing: 0;

border-collapseの調整

同じく罫線の調整で、隣接するセルのボーダーを重ねて表示させる設定です。

border-collapse: collapse;

border-bottom でテーブルの下線をつける

tableタグそのものに下線をつけます。
なんでtableのbottomだけに線を引くのかはこの後の設定であきらかになります。

thに設定するCSS

表の見出しになる th タグのスタイルシートの設定です。

th {
	border-top: 1px solid #aaa;
    background-color: #f5f5f5;    
	padding: 10px 0 10px 6px;
    text-align: left;        
}

セルの上部に線を引いて、背景色を設定し、余白を調整して、文字を左寄せにしています。

border-top: 1px solid #aaa;

セルの上部にだけ線を引きます。
左右と下には何もしないで、上だけに線を引くのがポイントです。

text-align: left;

thのデフォルトはセンタリングなんですが、センタリングじゃない方が表として見やすいことが多いので、個人的には左寄せにしています。
センタリングでも特に問題はありません。

好みの問題です。

padding: 10px 0 10px 6px;

セルの余白設定です。
上10px 右0px 下10px 左6px

上下には10pxの余白を設定し、左右は左にだけ6pxで、右は0pxにしています。

なぜかというと、左寄せにしているので、左側に余白がないと窮屈になり、右側はテーブルの幅に応じてセルの大きさが変わるので、余白を設定しなくても余白が作られるためです。

右も6pxとってもいいんですけどね。

tdに設定するCSS

表の内容を表示させるtdに設定するスタイルシートです。

td {
    border-top: 1px solid #aaa;
    padding: 10px 0 10px 6px;
}

こちらもth同様、セルの上部にだけ線を引いています。

tdはデフォルトで左寄せなので、特にtext-alignの設定はしていません。

padding: 10px 0 10px 6px;

これはthと同様の設定です。

tableデザインのまとめ

ここに記載したCSSを設定することで、シンプルで見やすいtableが作れます。

こんな感じのテーブル。

thとtdの上部にだけ線を引くことで、borderが重複して太くなることを避けられます。

そのままだと、表の一番に線が引かれないので、tableタグ自体にborder-bottomを設定していた、というわけですね。

文字サイズ、余白、線・背景色で印象が変わります

最近歳をとったせいか、文字を割と大き目で設定するようになりました。。
文字サイズはお好みで良いと思いますが、文字サイズが小さい表だと読むのがつかれるので大き目にすると、年上の方などには優しいデザインになります。

table用CSSのコピペ用 まとめ

今回紹介したテーブルのスタイルシートのまとめです。
まとめてコピペすればそのまま使えます。

table {
    border-spacing: 0;
    border-collapse: collapse;
	border-bottom: 1px solid #aaa;
    color: #555;
    width: 100%;   
}	

th {
	border-top: 1px solid #aaa;
    background-color: #f5f5f5;    
	padding: 10px 0 10px 6px;
    text-align: left;        
}

td {
    border-top: 1px solid #aaa;
    padding: 10px 0 10px 6px;
}

テーブルタグのデザインまとめでした！

WEBデザイナー・プログラミング学習にオススメ

WEBデザインが学べるWEBデザインコース テックアカデミー

週2回のマンツーマンでのメンタリングや毎日15時～23時のチャット･レビューサポートなど短期間でオリジナルサイトをデザインできるようになる学習プログラムです。
1件目の副業紹介を100%紹介してくれるので、副業を始めたい方にオススメのコースになっています。