記事内に広告が含まれています。

CSSでtableをデザインする方法。border-collapse:collapse;でおしゃれな表を作る！

May 30, 2021

CSS,HTML,JS , コーディング

tableをちょっとおしゃれにデザインする方法です。
border-collapseと簡単なCSSで、上の画像のような表を簡単に作れます。

border-collapseプロパティは、隣接するセルを重ねて表示するか否かを指定する際に使用するCSSです。

この記事では、CSSで表をデザインする方法を具体的に説明していきます。

Sample01

See the Pen Sample01(table-design) by natsuki (@natsukimemo) on CodePen.

上の表を実際に作ってみましょう。
HTMLとCSSは下記になります。

HTML

HTMLは、普通にtableで表を作っています。

2行目のthは表の見出しになる要素に指定します。
thで指定した要素は太字で表示されます。

<table>
  <tr><th>ID</th><th>名前</th><th>性別</th><th>年齢</th><th>出身</th></tr><!--見出-->
  <tr><td>010</td><td>AAA</td><td>女</td><td>20</td><td>東京</td></tr>
  <tr><td>012</td><td>BBB</td><td>男</td><td>33</td><td>神奈川</td></tr>
  <tr><td>028</td><td>CCC</td><td>男</td><td>42</td><td>千葉</td></tr>
  <tr><td>105</td><td>DDD</td><td>女</td><td>50</td><td>埼玉</td></tr>
</table>

CSS

CSSです。

table{
  border-collapse: collapse;  
}
td,th{ /* 各セルの指定 */
  padding:10px 30px;
　text-align:center;
  border-bottom:1px solid #c86b5b;
  border-right:1px dotted #c86b5b;
}
th{ /* 表の見出しの指定 */
	color:#c86b5b;  
}
tr:first-child{  /* 最初の行の指定 */
	border-bottom: 2px solid #c86b5b;	
}
tr:last-child{ /* 最後の行の指定 */
	border-bottom: 2px solid #c86b5b;
}
td:last-child{ /* 一番左の列の指定 */
  border-right:0;
}
th:last-child{ /* 一番右の列の指定 */
  border-right:0;
}

CSSでポイントとなるのは、下記の3つです。

border-collapse: collapse;の指定
borderの指定
疑似クラス「:first-child」と「:last-child」の指定

ひとつずつ解説します。
この3つをマスターできれば、サンプルのような表デザインは簡単にできます。

Point1．border-collapse:collapse; の指定

CSS1～3行目でtableタグにborder-collapse:collapse;を指定しています。

table{
  border-collapse: collapse;  
}

border-collapseは、隣接するテーブルセルのボーダーを「重ねる」か「離す」かを指定するCSSです。

値は下記の2つです。

値	意味
collapse	隣接するセルのボーダーを重ねて表示します。
separate	隣接するセルのボーダーを間隔をあけて表示します。

何も指定しなければ、separateを指定した状態になります。

下は、border-collapseを指定していない状態です。
他は、Sample01と全く同じコードです。

よく見るとセルとセルの間に、隙間が出来ているのがわかると思います。

See the Pen no-css by natsuki (@natsukimemo) on CodePen.

Point2．borderの指定

Sample01ではtrやtd、thタグの随所にborderプロパティを指定しています。
borderプロパティは、セルの枠線のスタイル・太さ・色を指定できます。

四辺（上下左右）を分けて指定するには、borderプロパティを下記のように記述します。

border-top、border-bottom、border-right、border-left

Sample01の場合、各セルの下辺を実線で、右辺を点線で指定しています。
「solid」を指定すると「実線」で、「dotted」を指定すると「点線」で表示されます。

td,th{ /* 各セルの指定 */
  padding:10px 30px;
　text-align:center;
  border-bottom:1px solid #c86b5b; /* 下辺の指定（実線） */
  border-right:1px dotted #c86b5b; /* 右辺の指定（点線） */
}

Point3. 疑似クラス「:first-child」と「:last-child」の指定

疑似クラスは、セレクタのお尻に付けて、セレクタが指定する要素を特定することができます。
tr:first-childやtd:last-childのような感じです。

tr:first-child{  /* 最初の行の指定 */
    border-bottom: 2px solid #c86b5b;   
}
tr:last-child{ /* 最後の行の指定 */
    border-bottom: 2px solid #c86b5b;
}
td:last-child{ /* 一番左の列の指定 */
  border-right:0;
}
th:last-child{ /* 一番右の列の指定 */
  border-right:0;
}

セレクタ:first-child

セレクタ:first-childは、あるセレクタ内で最初に現れる子要素にスタイルを適用します。

Sample01の場合、「tr:first-child」で、表の最初の行にスタイルを適用しています。

セレクタ:last-child

セレクタ:last-childは、あるセレクタ内で最後に現れる子要素にスタイルを適用します。

Sample01の場合、

tr:last-childで、表の最後の行
td:last-childで、表の最後の列

にスタイルを適用しています。

td:last-childの最後の列、とは表で言う一番右の列のことです。

以上の3つのポイントを押さえて、冒頭のSample01のCSSを、もう一度見てみましょう。
下記はSample01のCSSです。

table{
  border-collapse: collapse;  
}
td,th{ /* 各セルの指定 */
  padding:10px 30px;
　text-align:center;
  border-bottom:1px solid #c86b5b;
  border-right:1px dotted #c86b5b;
}
th{ /* 表の見出しの指定 */
	color:#c86b5b;  
}
tr:first-child{  /* 最初の行の指定 */
	border-bottom: 2px solid #c86b5b;	
}
tr:last-child{ /* 最後の行の指定 */
	border-bottom: 2px solid #c86b5b;
}
td:last-child{ /* 一番左の列の指定 */
  border-right:0;
}
th:last-child{ /* 一番右の列の指定 */
  border-right:0;
}

これまでに説明した3つのポイントを押さえてCSSを見ると、なぜ、Sample01のように表示されているのか理解できると思います。