table要素で作成したテーブルをCSSでデザインする

table要素をHTMLだけで表示するテーブルではなく、CSSでデザインしたテーブルにして見やすいテーブルや表の作成に挑戦しました。

あまりテーブルを自分のブログに使用することがないので、table要素で作成したテーブルをCSSでデザインする練習という感じの内容です。

テーブルのデザインはシンプルなテーブルを目標にデザインしたので参考になることがあればと思います。

table要素をCSSでデザインするテーブル構造

テーブルをCSSでデザインするための構造を先に作成します。

table要素内部のセルの枠の表現や余白、色などの基本的な部分のデザインなどを2パターンのtable要素を作成してCSSでテーブルのデザインをしてみようと思います。

デザインするtable要素の構造はテーブルの使用目的によって異なりますが、基本的な構造としては横並びと縦並びのテーブルを作成しておくと今後のCSSでデザインするテーブルデザインの土台になるかと思います。

縦並びのtable要素

table要素をCSSでデザインするときに使用するテーブル構造1つ目は以下のHTMLで記述した縦並びのtable要素です。

<table class="table_01">
    <tr class="tr_01">
        <th class="th_01">見出し</th>
        <th class="th_01">見出し</th>
        <th class="th_01">見出し</th>
    </tr>
    <tr class="tr_01">
        <td class="td_01">セル</td>
        <td class="td_01">セル</td>
        <td class="td_01">セル</td>
    </tr>
    <tr class="tr_01">
        <td class="td_01">セル</td>
        <td class="td_01">セル</td>
        <td class="td_01">セル</td>
    </tr>
</table>

tableタグをテーブルの親要素として記述したtable要素内部にtr要素を3個記述して一番上のtr要素にはth要素でテーブルの見出しを3つ記述しています。

そして一番上のtr要素下の2つのtr要素にはセルになるtd要素をtdタグで3個記述してます。

またtable要素のテーブルの構造には、CSSでデザインするときのためにtable、tr、th、td開始タグにクラス属性でクラス名を記述しておきます。

CSSでデザインするためにHTMLでマークアップしたtable要素をブラウザで表示確認すると、見出しを一番上にした下にセルが縦に並ぶ3列のテーブルに自動でレイアウトされます。

この縦並びのtable要素にCSSでデザインをする目標のデザインが以下のテーブル画像です。

シンプルで見やすいテーブルのデザインにするのが目標です。

横並びのtable要素

table要素をCSSでデザインするテーブルの構造2つ目は以下のHTMLで記述した横並びのtable要素です。

<table class="table_02">
    <caption>キャプション</caption>
    <tr class="tr_02">
        <th class="th_02">見出し</th>
        <td class="td_02">セル</td>
        <td class="td_02">セル</td>
    </tr>
    <tr class="tr_02">
        <th class="th_02">見出し</th>
        <td class="td_02">セル</td>
        <td class="td_02">セル</td>
    </tr>
</table>

横に並ぶテーブルにするときには、table要素内のtable開始タグすぐ下にテーブルのキャプションもCSSでデザインできるようにtable要素の構造に含めてます。

table要素内部に記述するtr要素は2つ記述しておくようにして、2つのtr要素の列内でth要素を1個、td要素を2個のセットにしたtable要素にして見出し付きの横並びテーブル構造にしておきます。

CSSでデザインするための横並びtable要素をマークアップしたHTMLファイルをブラウザで表示確認すると、見出しを左に配置した右側にセルが横並びになる2列のテーブルに自動でレイアウトされます。

この横並びのtable要素にCSSでデザインをする目標のデザインが以下のテーブル画像です。

テーブルに枠線とキャプションを使用した場合を目標とするテーブルデザインです。

作成したtable要素をCSSでデザインする

table要素で作成したテーブルの構造を使用してCSSでデザインすることにします。

table要素をデザインするときに使用するCSSのプロパティはpaddingやborder、background-colorやcolorなどCSSでよく使用するプロパティと、テーブルの枠やセルの幅に対してのデザインをするCSSプロパティを指定することでテーブルを完成させます。

CSSでtableの枠線を作る

テーブルの枠線がないと表の視覚的イメージが湧かないので最初にCSSで枠線を作りデザインします。

テーブルの枠線を作る場合はtable要素と見出しのth要素、セルのtd要素にCSSのborderプロパティを指定してテーブルの枠を表示させます。

.table_01 {
    border: 3px solid gray;
}
.th_01 {
    border: 3px solid gray;
}
.td_01 {
    border: 3px solid gray;
}

borderを記述するときには枠線の太さ、形状、色をショートハンドで一括指定して記述します。

CSSのborderを指定したtable枠線の表示結果は上記の画像のようになります。

画像左が縦並びテーブル、画像右が横並びテーブルです。

そしてCSSでtable要素にborderを指定しただけのテーブルの枠線はHTMLでtable要素の属性にborder=”1″を記述した場合の枠線と同じようなデザインになってしまうので、CSSでtable要素のセレクタにborder-collapseプロパティも指定します。

CSSのborder-collapseプロパティには、2つの値を選んでテーブルの枠線のデザインができます。

collapse

値にcollapseを指定すると隣接するセルのボーダーを重ねるデザインにできます。

.table_01 {
    border: 3px solid gray;
    border-collapse: collapse;
}
.th_01 {
    border: 3px solid gray;
}
.td_01 {
    border: 3px solid gray;
}

上記のCSSでは縦並びのtable要素にCSSで枠線を重ねたテーブルのデザインにする指定です。

縦並びのtable要素のセレクタでborderを指定した下にborder-collapse: collapse;と記述します。

そうするとtable要素内部の枠線が重なって表示できます。

separate

border-collapseの値にseparateを指定した場合は、枠線に間隔が空いたデザインで表示できます。

.table_02 {
    border: 3px solid gray;
    border-collapse: separate;
}
.th_02 {
    border: 3px solid gray;
}
.td_02 {
    border: 3px solid gray;
}

上記のCSSは横並びのtable要素にCSSで枠線に間隔を開けたテーブルのデザインにする指定です。

CSSでtable開始タグに付与したクラス名のクラスセレクタにborder-collapse: separate;を指定します。

table要素のセレクタにborder-collapse: separate;を指定した横並びのテーブルはブラウザで表示確認すると上の画像のような結果になります。

テーブルのセルの余白を作る

CSSでテーブルの枠線のデザインをした次はセルに余白がないためセルが狭くてコンテンツが見づらくなっています。セル内のコンテンツを見やすくするためにセルに余白を作ります。

table要素内の個々のセルは、セル外側の余白とセル内側の余白を作ることができます。

table要素を横並びのテーブルにして枠線の間隔を空けたテーブルにセル外側の余白と内側の余白を設けてデザインします。

.table_02 {
    border: 3px solid gray;
    border-collapse: separate;
    border-spacing: 10px;
}
.th_02 {
    border: 3px solid gray;
}
.td_02 {
    border: 3px solid gray;
}

セルの外側に余白を作る場合には、table要素のクラスに隣接するセルのボーダーとボーダーの間隔を指定することができるCSSのborder-spacingプロパティを記述します。

そしてborder-spacingの値にセルの外側をどのくらいの余白にしたいか数値と単位で指定します。上記のCSSではセルの外側に10pxの余白を指定したのでセル外側の余白は以下の画像のような表示結果になります。

border-spacing: 10px;の値を１つ指定した場合は、個々のセルの上下左右のセル外側の余白が適用対象です。

もし値を2つ指定した場合は記述順で左右と上下に別れた余白指定の値になります。

そしてセルの内側の余白はCSSのpaddingプロパティを指定します。

.table_02 {
    border: 3px solid gray;
    border-collapse: separate;
    border-spacing: 10px;
}
.th_02 {
    border: 3px solid gray;
    padding: 20px;
}
.td_02 {
    border: 3px solid gray;
    padding: 20px;
}

paddingを指定するセレクタはthとtdのクラスセレクタで指定します。

一方で縦並びのtable要素のセルにCSSで余白を作る場合には内側の余白をpaddingで指定するだけです。

.table_01{
    border: 3px solid gray;
    border-collapse: collapse;
}
.th_01{
    border: 3px solid gray;
    padding: 15px;
}
.td_01{
    border: 3px solid gray;
    padding: 20px;
}

テーブルの見出しにしたthにpadding: 15px;そしてセルにはpadding: 20pxを指定しています。

そうすると縦並びのテーブルのデザインは以下の画像のように見出しとセルの内側にそれぞれの指定した余白サイズが適用されて表示できます。

横並びテーブルでは外側の余白を指定しましたが縦並びテーブルではborder-collapseの値をcollapseにして枠線を重ねるデザインにしたのでセルの外側に余白を設けるスペースがありません。

そのため値が効かないようでborder-spacingで外側の余白は指定しませんでした。

table-layoutで列幅を均等にデザイン

table要素内のthとtdで文章が長くなるセルがある場合、下の画像の縦並びテーブルのようにtable要素内の1番広い幅に合わせて全体の列幅が自動調整されます。

このような場合にはCSSでtable要素にwidthの値で幅の指定とtable-layout: fixed;を指定すると列幅が均等にできるため個々のセル幅も均等にデザインすることができます。

.table_01{
    border: 3px solid gray;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.th_01{
    border: 3px solid gray;
    padding: 15px;
}

.td_01{
    border: 3px solid gray;
    padding: 20px;
}

上のCSSはtable要素にtableとthとtdのクラスセレクタに枠線と余白の指定までした縦並びのデザインをしているテーブルです。

table要素のセレクタにテーブル幅をwidthで指定します。そして同じくtable要素のセレクタにtable-layout: fixed;も指定します。

指定したブラウザでの表示結果は以下の画像のとおりテーブルの列幅を均等にデザインすることができます。

widthで幅を指定するのを忘れるとテーブルをブラウザが読み込むときに参照する幅がないためなのか列幅が均等にならずに初期値のtable-layout:auto;の列幅になるので、widthとtable-layout: fixedをセットで指定するのが良いです。

セルと見出しとキャプションに色を指定

CSSでテーブルデザインの仕上げとして、セルと見出しとキャプションに色を指定して色彩面でのデザインをtable要素に適用します。

.table_01 {
    border: 3px solid gray;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.th_01 {
    border: 3px solid gray;
    padding: 15px;
    background-color: #f1457d;
    color: aliceblue;
}
.td_01 {
    border: 3px solid gray;
    padding: 20px;
    background-color: whitesmoke;
}
.td_01:hover{
    background-color: #fffeb2;
}

CSSのbackground-colorで背景色、指定した背景色で文字が見ずらくならないようにcolorで文字色の指定をセルと見出しに適用します。これで今回デザインした縦並びテーブルのデザインがシンプルに完成します。

横並びのテーブルの場合はキャプションがあります。そして枠線は間隔を空けたデザインにしました。

.table_02{
    width: 100%;
    border: 3px solid #2B4C69;
    border-collapse: separate;
    border-spacing: 5px;
    table-layout: fixed;
}

caption{
    color: ghostwhite;
    background-color: #2B4C69;
    padding: 20px;
}

.th_02{
    background-color: #78a4b8;
    border: 3px solid gray;
    padding: 20px;
    width: 100px;
}

.td_02{
background-color: #E6E4DC;
border: 3px solid gray;
padding: 20px;
}

table要素のクラスセレクタのボーダーとキャプションの背景色を統一させたカラーで指定して、見出しとセルはキャプションの背景色に馴染めるような色でテーブルをデザイン。

このとき何故か忘れていたセルのホバー背景色を指定。ついでにキャプションの位置に納得がいかなくてテーブル下にキャプションの位置を移動して背景色を使わず文字色だけにする。

さらにセルとセルの間の余白が気になるのでborder-collapse: collapse;に枠線のデザインを変更

きりがないのでtable要素で作成したテーブルをCSSでデザインするのは完成となります。

まとめ

table要素で作成したテーブルをCSSでデザインする場合は、どのようにテーブル内を並べるか、どのようなテーブルの枠線にするかでデザインがだいぶ見やすさが変わります。

そのため並べ方と枠線についてはデザインする前に決めてしまえば、見やすいテーブルや表の作成はやりやすくなるかと思えます。