スタンダードなデザインでtableを作る時のcssテンプレ

この記事は2019年以前他サイトに執筆したものを引越し掲載しています。

いつもtableのcssに意外と手がかかってしまうので自分用にcssの土台。

いつもtableのcssに意外と手がかかってしまうので自分用にcssの土台。

とりあえずこれをベースにしておいて都度カスタマイズして使いまわすことにしました。

おやぶん	こぶん
リラックマ	コリラックマ	キイロイトリ	チャイロイコグマ
うさまる	うさこ	くまさん	ひよこ
ミッフィー	メラニー	ダーン	ボリスとバーバラ

※上記例cssはインラインで記述。

cssの概要

色と装飾

• 見出しの文字色(color)と線(border)は白で、背景(background)は色付き
• 各行の背景は薄めのグレーで一行おきに反転

見出しの白文字はコントラストが十分か確認すること。ちなみに上記例はあえてNG。

ボーダーを付ける箇所

0pxで書いている部分はカスタマイズ前提のベースのため。

その他

theadとtbodyタグは意味付けの他、css適用でも使えることがあるのでとりあえずつけておく（tfootは使わない時も多そうなのでなし）。

HTMLとcss

HTML

<table border="1" cellspacing="1" cellpadding="1">
<thead>//テーブル（表）のヘッダ行を定義(省略可)
<tr>
<th>おやぶん</th>
<th colspan="3">こぶん</th>//横につなげたいときはcolspanを入れる
</tr>
</thead>
<tbody>//テーブル（表）のボディ部分を定義(省略可)
<tr>
<td>リラックマ</td>
<td>コリラックマ</td>
<td>キイロイトリ</td>
<td>チャイロイコグマ</td>
</tr>
<tr>
<td>うさまる</td>
<td>うさこ</td>
<td>くまさん</td>
<td>ひよこ</td>
</tr>
<tr>
<td>ミッフィー</td>
<td>メラニー</td>
<td>ダーン</td>
<td>ボリスとバーバラ</td>
</tr>
</tbody>
</table>

css

//テーブル全体の設定
table{
width: 90%;
margin-right: auto;
margin-left: auto;
margin-bottom: 1.5em;
border-top: 0px solid #d6d6d6;//右と下にborder
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
border-left: 0px solid #d6d6d6;
border-collapse: collapse;//隣接するborderを重ねる
table-layout: auto;//auto テーブル（表）の列幅を自動レイアウトにする（初期値）　fixed…テーブル（表）の列幅を固定レイアウトにする（→幅が均等割りになる）
}

//行ごとの設定：一行置きにグレーと白に
table tr:nth-child(odd) {
border-collapse: collapse;
background-color: #f6f6f6;
}

//見出し(1行目)の設定
table th {
padding: 0.5em;//文字の周りのpaddingは基本0.5
border-top: 0px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 0px solid #fff;
text-align: center;//文字中央寄せ
background-color: #9bd5c1;//塗りたい色に
color: #fff;//文字色：白
font-size: medium;
}
table th:last-child{
border-right: none;
}

//中身(2行目以降)の設定
table td {
padding: 0.5em;
border-top: 1px solid #d6d6d6;
border-right: 0px solid #c6c6c6;
border-bottom: 0px solid #c6c6c6;
border-left: 1px solid #d6d6d6;
text-align: left;//文字左寄せ
color: #53817F;//文字色
font-size: medium;
}