テーブルタグの表をCSSで見やすく色をつける！

WEBLOG12 ＞ SeeSaaカスタマイズ＞テーブルタグの表をCSSで見やすく色をつける！

Tuesday,September 13,2016

テーブルタグの表をCSSで見やすく色をつける！

HTML で表を作るには table タグを使いますが、見やすい表にするには、枠線や色を付けたりといろいろ加工が必要になってきます。
ブログ記事中に挿入する程度の簡単な表には、そこまで凝ったものは必要ありませんが、見やすい表にはしておきたいですね。

表を見やすく装飾する

マークダウン記法を使うと HTML で直接記述するより簡単に表が作れます。

tableタグはMarkdown記法を使うと簡単だった

マークダウン記法で書いたソースを HTML へ変換しただけだと、通常枠線や色付もない何の装飾もされていない状態の HTML が出力されます。

ブログ側に CSS の設定がされていれば、そのまま投稿できますので、CSS を設定して見やすい表が表示されるようにします。

CSSの設定

見やすい表というと、枠線と色付けでシンプルに表示させたものが良いと思います。
できれば１行おきに色が付いていると、より見やすいのではないでしょうか。

CSSの設定は、こちらのサイトを参考にさせていただきました。

CSS3セレクタで1行ごとにテーブルに背景色をつける｜Webpark

とても分かりやすくて、勉強になります。

実際に自分のサイトに登録した CSS がこちらになります。

/* テーブル */
.text table {
    width: auto;
    border: 1px solid #555555;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #333;
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
    background: #597869;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #555555;
    border-left: 1px solid #555555;
}
tr:nth-child(2n+1) {
    background: #C2EAE0;
}

.text table { }

表全体にかかる設定です。ここでは枠の大きさや枠線についての基本設定をしています。

最初の .text は、当ブログの記事部分のクラスタです。記事本文中の table タグにのみ適用するよう指定しています。

width: auto;　・・・　横幅を自動的にあわせる
border: 1px solid #555555;　・・・　枠線の指定。太さ1px 線の種類solid 線色#555555
border-collapse: cpllapse;　・・・　隣のセルの枠線を重ねて表示する
border-spacing: 0;　・・・　隣のセルとの枠線の間隔

th { }

表最上段の標題部分の設定です。

color: #333;　・・・　文字の色
padding: 5px;　・・・　枠線から文字までの間隔
border-bottom: 1px solid #555555;　・・・　セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
border-left: 1px solid #555555;　・・・　セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555
background: #597869;　・・・　セル背景色の指定
font-weight: bold;　・・・　文字を太字に
line-height: 120%;　・・・　セル内文字の行間。セル内に２行入力した時の行間
text-aline: center;　・・・　文字の中央揃え

td { }

表２段目からの本体部分の設定です。

padding: 5px;　・・・　枠線から文字までの間隔
border-bottom: 1px solid #555555;　・・・　セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
border-left: 1px solid #555555;　・・・　セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555

tr:nth-child(2n+1) { }

選択した行にのみ適用する設定です。

background: #C2EAE0;　・・・　セル（行）の背景色を指定

行の指定はいくつか方法があります。

CSSの記述	指定箇所
tr:nth-child(n)	n番目のtrに適用
tr:nth-child(odd)	奇数番目のtrに適用
tr:nth-child(2n+1)	奇数番目のtrに適用
tr:nth-child(even)	偶数番目のtrに適用
tr:nth-child(2n)	偶数番目のtrに適用
tr:nth-child(3n)	3,6,9,12…番目のtrに適用
tr:nth-child(3n+1)	1,4,7,10…番目のtrに適用