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

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

 

とりあえずこのシンプルなcssを設置しておいて都度カスタマイズして使いまわすことにしました。

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

 

cssの概要

色と装飾

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

※見出しのbackground-colorが白文字(#fff)に対して十分なコントラスト比があることを確認する

ボーダーを付ける箇所

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

その他

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
border-top: 0px solid #d6d6d6;
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;
}

コメント