CSSでテーブル(表)を分かりやすくしよう
テーブル(表組)を作っているときに、

なんかわかりくい表だな
と思うことありませんか? パソコンの広い領域あればいざ知らず、スマートフォンの小さな画面でこの表組どうやって理解するのだろうと頭を悩ませることもあります。そんなときは、ちょっとした工夫で見やすくしてみましょう。
テーブル(表組)を作っているときに、
と思うことありませんか? パソコンの広い領域あればいざ知らず、スマートフォンの小さな画面でこの表組どうやって理解するのだろうと頭を悩ませることもあります。そんなときは、ちょっとした工夫で見やすくしてみましょう。
この記事は「2021年01月04日」に書かれた記事です
基本的なテーブルの使い方は「4-9 レスポンシブでの表組(table)表示どうしてる?」をご覧ください。
よくサーバーの料金表などで見ますね。
スタンダード | スペシャル | ビジネス |
---|---|---|
¥500円 | ¥1,000 | ¥2,000 |
詳細 | 詳細 | 詳細 |
1カ月契約 | 半年契約 | 1年契約 |
<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>
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 |
<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>
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」である必要があります。
縦横びっしりセルが並んでいる場合など、表を閲覧しているうちに
ということを回避できるよう、テーブルのセルにマウスオンした際、背景色が変わるように設定してみましましょう。
a | b | c | |
---|---|---|---|
1 | 1a | 1b | 1c |
2 | 2a | 2b | 2c |
3 | 3a | 3b | 3c |
<table> <tr> <th> </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>
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 |
<table> <tr> <th> </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>
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; }
a | b | c | |
---|---|---|---|
1 | 1a | 1b | 1c |
2 | 2a | 2b | 2c |
3 | 3a | 3b | 3c |
<table> <tr> <th> </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>
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; }
上記の例は、3x3のため特にハイライトしなくてもどこを見ているかわかりますが、表組が大きくなればなるほど見ている側の負荷がかかるため、いろいろな工夫が必要になります。
※マウスで触ると見やすいです。など文章を加えておかないと気が付いてもらえない可能性もあります。工夫次第ではまだまだテーブル(表組)を見やすくすることはできますが、あまり複雑なものはできれば避けたいものです。
HOME > ホームページ制作 > CSSでホームページを1UP > CSSでテーブル(表)を分かりやすくしよう