その他Web制作

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

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

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

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

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

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

cssの概要

色と装飾

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

 

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

ボーダーを付ける箇所

  • border-collapse: collapse;で隣接するborderを重ねておく
  • tableは右と下にborder
  • thは右と下にborder(但し一番右のthはborderなし)
  • tdは上と左にborder

 

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

その他

theadtbodyタグは意味付けの他、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;
}