CSSでテーブル(表）を分かりやすくしよう

テーブル（表組）を作っているときに、

なんかわかりくい表だな

と思うことありませんか？　パソコンの広い領域あればいざ知らず、スマートフォンの小さな画面でこの表組どうやって理解するのだろうと頭を悩ませることもあります。そんなときは、ちょっとした工夫で見やすくしてみましょう。

この記事は「2021年01月04日」に書かれた記事です

  1. わかりやすいテーブルを作る
  2. CSSでテーブルのセル（行・列）をハイライトしよう

基本的なテーブルの使い方は「4-９ レスポンシブでの表組（table）表示どうしてる？」をご覧ください。

1．わかりやすいテーブルを作る

1つだけ目立つ枠組みを作る

よくサーバーの料金表などで見ますね。

表示
スタンダード スペシャル ビジネス
¥500円 ¥1,000 ¥2,000
詳細 詳細 詳細
1カ月契約 半年契約 1年契約
HTML
<table class="samp-table06">
<tbody>
<tr>
<th>スタンダード</th>
<th class="recommend"><span class="recommendtxt">スペシャル</span></th>
<th>ビジネス</th>
</tr>
<tr>
<td>¥500円</td>
<td class="recommend">¥1,000</td>
<td>¥2,000</td>
</tr>
<tr>
<td><a href="#">詳細</a></td>
<td class="recommend"><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
</tr>
<tr>
<td>1カ月契約</td>
<td class="recommend">半年契約</td>
<td>1年契約</td>
</tr>
</tbody>
</table>
CSS
table {
table-layout: fixed;
width: 100%;
}

table tr:last-child{
border-bottom:solid 1px #CCC;
}

table th {
text-align: center;
padding: 10px 0;
border-right:solid 1px #CCC;
border-left:solid 1px #CCC;
width: 33%;
}

table th:nth-child(1){
background-color:#CCC;
}

table th:nth-child(3){
background-color:#f5b932;
}

table tr:nth-child(2) td{
font-size: 30px;
}

table td{
text-align: center;
padding: 7px 0;
border-right:solid 1px #CCC;
border-left:solid 1px #CCC;
}

table td a {
background-color: #25b327;
color: #FFF;
padding:5px 20px;
border-radius: 6px;
text-decoration:none;
}

table td.recommend {
font-weight: 700;
}

table th.recommend {
position: relative;
}

table th.recommend span.recommendtxt{
display: block;
position: absolute;
width: 100%;
top:-12px;
left: 0;
bottom: 0;
font-size: 1.2rem;
padding: 12px 0 0 0;
color:#FFF;
background-color: #EE6557;
}

※スマホ版では文字の量などによって文字サイズを調整してください。

セルに余白を付けたいとき

セルとセルの外側に余白を付けたいときは　border-spacing　を設定します。

項目1 内容1-a 内容1-b 内容1-c
項目2 内容2-a 内容2-b 内容2-c
項目3 内容3-a 内容3-b 内容3-c
項目4 内容4-a 内容4-b 内容4-c
HTML
<table>
<tr>
<th>項目1</th>
<td>内容1-a</td>
<td>内容1-b</td>
<td>内容1-c</td>
</tr>
<tr>
<th>項目2</th>
<td>内容2-a</td>
<td>内容2-b</td>
<td>内容2-c</td>
</tr>
<tr>
<th>項目3</th>
<td>内容3-a</td>
<td>内容3-b</td>
<td>内容3-c</td>
</tr>
<tr>
<th>項目4</th>
<td>内容4-a</td>
<td>内容4-b</td>
<td>内容4-c</td>
</tr>
</table>
CSS
table {
border-collapse: separate;
border-spacing: 5px;
width: 100%;
}

th,td{
text-align: center;
padding: 10px 0;
}

th{
color: #FFF;
border:1px solid #CCC;
background-color: #EE6557;
}

td{
border:1px solid #CCC;
background-color: #FFF;
}

※border-spacingを利用する際は、border-collapseが「separate」である必要があります。

2．CSSでテーブルのセル（行・列）をハイライトしよう

縦横びっしりセルが並んでいる場合など、表を閲覧しているうちに

あれ。どこ見てたっけ？

ということを回避できるよう、テーブルのセルにマウスオンした際、背景色が変わるように設定してみましましょう。

横一列（1行）の色を変更したい場合

  a b c
1 1a 1b 1c
2 2a 2b 2c
3 3a 3b 3c
HTML
<table>
<tr>
<th>&nbsp;</th>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
<tr>
<th>3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
</tr>
</table>
CSS
table {
width: 300px;
border-top: 1px solid #CCC;
border-left:1px solid #CCC;
}

th {
text-align:center;
padding:0.2em 1em;
background-color: #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

td {
text-align:center;
background-color: #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

table.samp-table08a tr:hover {
background-color :#EEE;
}

縦一列を選択したい場合

  a b c
1 1a 1b 1c
2 2a 2b 2c
3 3a 3b 3c
HTML
<table>
<tr>
<th>&nbsp;</th>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
<tr>
<th>3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
</tr>
</table>
CSS
table  {
overflow: hidden;
width: 300px;
border-top: 1px solid #CCC;
border-left:1px solid #CCC;
}

th {
text-align:center;
padding:0.2em 1em;
background-color: #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

td {
position:relative;
text-align:center;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

td:hover::before {
content: "";
position: absolute;
top:0;
left:0;
width:100%;
height:1000px;
background-color: #EEE;
transform: translateY(-50%);
z-index:-1;
}

横一列・縦一列（1行・1列）の色を変更したい場合

  a b c
1 1a 1b 1c
2 2a 2b 2c
3 3a 3b 3c
HTML
<table>
<tr>
<th>&nbsp;</th>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
</tr>
<tr>
<th>3</th>
<td>3a</td>
<td>3b</td>
<td>3c</td>
</tr>
</table>
CSS
table {
overflow:hidden;
width: 300px;
border-top: 1px solid #CCC;
border-left:1px solid #CCC;
}

th {
text-align:center;
padding:0.2em 1em;
background-color: #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

table.samp-table08c td {
text-align:center;
position:relative;
background-color: #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

td:hover::before {
content: "";
position: absolute;
top:0;
left:0;
width:100%;
height:1000px;
background-color: #EEE;
transform: translateY(-50%);
z-index:-1;
}

td:hover {
background-color: #ddd;
}

tr:hover {
background-color :#EEE;
}

上記の例は、3ｘ3のため特にハイライトしなくてもどこを見ているかわかりますが、表組が大きくなればなるほど見ている側の負荷がかかるため、いろいろな工夫が必要になります。

※マウスで触ると見やすいです。など文章を加えておかないと気が付いてもらえない可能性もあります。工夫次第ではまだまだテーブル（表組）を見やすくすることはできますが、あまり複雑なものはできれば避けたいものです。

B! Hatena LINE Pocket Pinterest
悲

HOME > ホームページ制作 > CSSでホームページを1UP > CSSでテーブル(表）を分かりやすくしよう

ページトップへ