2021/02/12

CSSでのテーブルのデザイン【現役エンジニアが解説】

PROGRAM

今回は、CSSでのテーブルのデザインについて、3つの要点に分け、簡単に解説していきます。

枠線の調整

テーブルの枠線は重ねることができます。

border-collapseプロパティの値をcollapseにすると重なります。

table{
    border-collapse:collapse;
}

上記のコードでは、全てのtable要素の枠線が重なり合うようにしています。

列幅の均等化

テーブルの列幅を均等化することも可能です。

幅を指定したうえで、table-layoutプロパティの値にfixedを指定します。

table{
    width:500px;
    table-layout:fixed;
}

上記のコードでは、全てのtable要素に対し、それぞれの列幅を同じサイズにしています。

見出しの背景色

テーブルの見出しのセルのみに背景色を付けられます。

th要素のbackgroundプロパティの値に色を指定すると見出しに背景色が付きます。

th{
    background-color:green;
}

上記のコードでは、全てのテーブルのth要素の見出しセルに対して、緑色の背景色を付けています。

• facebook
• Tweet
• Read Later