この記事は2019年以前他サイトに執筆したものを引越し掲載しています。
いつもtableのcssに意外と手がかかってしまうので自分用にcssの土台。
とりあえずこれをベースにしておいて都度カスタマイズして使いまわすことにしました。
おやぶん | こぶん | ||
---|---|---|---|
リラックマ | コリラックマ | キイロイトリ | チャイロイコグマ |
うさまる | うさこ | くまさん | ひよこ |
ミッフィー | メラニー | ダーン | ボリスとバーバラ |
※上記例cssはインラインで記述。
cssの概要
色と装飾
- 見出しの文字色(color)と線(border)は白で、背景(background)は色付き
- 各行の背景は薄めのグレーで一行おきに反転
見出しの白文字はコントラストが十分か確認すること。ちなみに上記例はあえてNG。
ボーダーを付ける箇所
- border-collapse: collapse;で隣接するborderを重ねておく
- tableは右と下にborder
- thは右と下にborder(但し一番右のthはborderなし)
- tdは上と左にborder
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; }