No. | 名前 | 年齢 | タイトル |
---|---|---|---|
1 | 藤井 | 19 | 二冠 |
2 | 豊島 | 31 | 竜王 |
3 | 渡辺 | 37 | 名人 |
4 | 永瀬 | 28 | 王座 |
【CSS】テーブルを見やすくするデザイン(table design)
以下のようなテーブルデザインのコードを紹介します。
HTML
HTML <table class="content-table">
<thead>
<tr>
<th>No.</th>
<th>名前</th>
<th>年齢</th>
<th>タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>藤井</td>
<td>19</td>
<td>二冠</td>
</tr>
<!-- 以下省略 -->
</tbody>
</table>
CSS
tableタグのCSS

CSS
.content-table {
border-collapse: collapse; /* 枠線を取り除く */
margin: 25px auto;
font-size: 1.5em;
border-radius: 5px 5px 0 0; /* 左右の上の角だけに丸みを */
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* テーブルに影を作り立体的に見せる */
}
ヘッダー部分のCSS

CSS
.content-table thead tr {
background: #005498;
color: #ffffff;
text-align: center;
font-weight: bold;
}
tbodyのCSS

CSS
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
transition: 0.8s all ease;
}
/* 偶数行をグレーに */
.content-table tbody tr:nth-of-type(even) {
background: #f3f3f3;
}
/* テーブルの下の枠を装飾 */
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #005498;
}
/* マウスをのせた時のエフェクト */
.content-table tbody tr:hover {
font-weight: bold;
color: #005498;
}
全てのコード
<style>
.content-table {
border-collapse: collapse;
margin: 25px auto;
font-size: 1.5em;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background: #005498;
color: #ffffff;
text-align: center;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 12px 15px;
background: none;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
transition: 0.8s all ease;
}
.content-table tbody tr:nth-of-type(even) {
background: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #005498;
}
.content-table tbody tr:hover {
font-weight: bold;
color: #005498;
}
</style>
<!-- HTML -->
<table class="content-table">
<thead>
<tr>
<th>No.</th>
<th>名前</th>
<th>年齢</th>
<th>タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>藤井</td>
<td>19</td>
<td>二冠</td>
</tr>
<tr>
<td>2</td>
<td>豊島</td>
<td>31</td>
<td>竜王</td>
</tr>
<tr>
<td>3</td>
<td>渡辺</td>
<td>37</td>
<td>名人</td>
</tr>
<tr>
<td>4</td>
<td>永瀬</td>
<td>28</td>
<td>王座</td>
</tr>
</tbody>
</table>