Webサイトで使える、見やすいテーブル・表デザインを9種類まとめました。
シンプルな表から、商品スペック表、料金プランの比較表、ヘッダーを固定した表まで、目的に合わせて選べます。
すべてHTMLとCSSをコピーして使用でき、文字や色も自由に変更できます。
シンプルで見やすい表（テーブル）デザイン
まずは、さまざまな内容に使いやすい基本の表デザインを紹介します。
枠線のある定番タイプや横線だけのすっきりしたタイプ、行ごとに背景色を変えたタイプから、サイトの雰囲気に合うものを選べます。
DESIGN 01
基本のシンプルな表
| 項目 | 内容 | 備考 |
|---|---|---|
| 項目1 | ここに内容が入ります | 備考を入力 |
| 項目2 | ここに内容が入ります | 備考を入力 |
| 項目3 | ここに内容が入ります | 備考を入力 |
見出しとすべてのセルを細い枠線で囲んだ、基本の表デザインです。
項目と内容を分かりやすく整理できるため、掲載する情報の種類を問わず、さまざまな用途に使えます。
<div class="table-design-01-wrap">
<table class="table-design-01">
<thead>
<tr>
<th>項目</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目1</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目2</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目3</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
</tbody>
</table>
</div>.table-design-01-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-01 {
width: 100%;
min-width: 560px;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-01 th,
.table-design-01 td {
padding: 13px 15px;
text-align: left;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-01 th {
font-weight: 600;
background: #edf5fa;
}
.table-design-01 th:nth-child(1),
.table-design-01 td:nth-child(1) {
width: 22%;
}
.table-design-01 th:nth-child(2),
.table-design-01 td:nth-child(2) {
width: 53%;
}
.table-design-01 th:nth-child(3),
.table-design-01 td:nth-child(3) {
width: 25%;
}
@media screen and (max-width: 600px) {
.table-design-01 {
font-size: 13px;
}
.table-design-01 th,
.table-design-01 td {
padding: 11px 13px;
}
}
色の変更：
CSS内の「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい項目や内容へ書き換えてください。
行の追加：
HTML内の「<tr>」から「</tr>」までを複製すると、表の行を追加できます。
DESIGN 02
横線だけの表
| 項目 | 内容 | 備考 |
|---|---|---|
| 項目1 | ここに内容が入ります | 備考を入力 |
| 項目2 | ここに内容が入ります | 備考を入力 |
| 項目3 | ここに内容が入ります | 備考を入力 |
縦線と外枠を使わず、行の区切りだけを横線で表した、すっきりとした表デザインです。
枠線の印象を抑えながら情報を整理できるため、文章の多いページにも自然になじみます。
<div class="table-design-02-wrap">
<table class="table-design-02">
<thead>
<tr>
<th>項目</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目1</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目2</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目3</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
</tbody>
</table>
</div>.table-design-02-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-02 {
width: 100%;
min-width: 560px;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
border: 0;
}
.table-design-02 th,
.table-design-02 td {
padding: 13px 15px;
text-align: left;
vertical-align: middle;
border: 0;
border-bottom: 1px solid #dfe2e8;
}
.table-design-02 th {
font-weight: 600;
background: #edf5fa !important;
}
.table-design-02 tbody td {
background: #fff !important;
}
.table-design-02 th:nth-child(1),
.table-design-02 td:nth-child(1) {
width: 22%;
}
.table-design-02 th:nth-child(2),
.table-design-02 td:nth-child(2) {
width: 53%;
}
.table-design-02 th:nth-child(3),
.table-design-02 td:nth-child(3) {
width: 25%;
}
@media screen and (max-width: 600px) {
.table-design-02 {
font-size: 13px;
}
.table-design-02 th,
.table-design-02 td {
padding: 11px 13px;
}
}
色の変更：
CSS内の「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい項目や内容へ書き換えてください。
行の追加：
HTML内の「<tr>」から「</tr>」までを複製すると、表の行を追加できます。
DESIGN 03
交互カラーの表
| 項目 | 内容 | 備考 |
|---|---|---|
| 項目1 | ここに内容が入ります | 備考を入力 |
| 項目2 | ここに内容が入ります | 備考を入力 |
| 項目3 | ここに内容が入ります | 備考を入力 |
| 項目4 | ここに内容が入ります | 備考を入力 |
行ごとに背景色を交互に切り替えた、内容を横方向に追いやすい表デザインです。
項目数が多い場合でも隣の行と区別しやすく、情報の読み間違いを防ぎたい場面に適しています。
<div class="table-design-03-wrap">
<table class="table-design-03">
<thead>
<tr>
<th>項目</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目1</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目2</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目3</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>項目4</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
</tbody>
</table>
</div>.table-design-03-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-03 {
width: 100%;
min-width: 560px;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-03 th,
.table-design-03 td {
padding: 13px 15px;
text-align: left;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-03 th {
font-weight: 600;
background: #dfeef7 !important;
}
.table-design-03 tbody tr:nth-child(odd) td {
background: #fff !important;
}
.table-design-03 tbody tr:nth-child(even) td {
background: #edf5fa !important;
}
.table-design-03 th:nth-child(1),
.table-design-03 td:nth-child(1) {
width: 22%;
}
.table-design-03 th:nth-child(2),
.table-design-03 td:nth-child(2) {
width: 53%;
}
.table-design-03 th:nth-child(3),
.table-design-03 td:nth-child(3) {
width: 25%;
}
@media screen and (max-width: 600px) {
.table-design-03 {
font-size: 13px;
}
.table-design-03 th,
.table-design-03 td {
padding: 11px 13px;
}
}
色の変更：
CSS内の「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい項目や内容へ書き換えてください。
行の追加：
HTML内の「<tr>」から「</tr>」までを複製すると、表の行を追加できます。
商品情報を整理する表（テーブル）デザイン
DESIGN 04
商品スペック表
| 商品名 | 商品名が入ります |
|---|---|
| 型番 | AB-123 |
| サイズ | 幅00 × 高さ00cm |
| 重量 | 約0.0kg |
| カラー | カラー名 |
| 素材 | 素材名 |
| 価格 | 0,000円（税込） |
商品名やサイズ、素材、価格などの情報を、項目ごとに整理した商品スペック表です。
項目名と内容が左右に並ぶため、商品の特徴や仕様をすばやく確認してもらえます。
<div class="table-design-04-wrap">
<table class="table-design-04">
<tbody>
<tr>
<th scope="row">商品名</th>
<td>商品名が入ります</td>
</tr>
<tr>
<th scope="row">型番</th>
<td>AB-123</td>
</tr>
<tr>
<th scope="row">サイズ</th>
<td>幅00 × 高さ00cm</td>
</tr>
<tr>
<th scope="row">重量</th>
<td>約0.0kg</td>
</tr>
<tr>
<th scope="row">カラー</th>
<td>カラー名</td>
</tr>
<tr>
<th scope="row">素材</th>
<td>素材名</td>
</tr>
<tr>
<th scope="row">価格</th>
<td>0,000円（税込）</td>
</tr>
</tbody>
</table>
</div>.table-design-04-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-04 {
width: 100%;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-04 th,
.table-design-04 td {
padding: 13px 15px;
text-align: left;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-04 th {
width: 30%;
font-weight: 600;
background: #edf5fa !important;
}
.table-design-04 td {
width: 70%;
background: #fff !important;
}
@media screen and (max-width: 600px) {
.table-design-04 {
font-size: 13px;
}
.table-design-04 th,
.table-design-04 td {
padding: 11px 12px;
}
.table-design-04 th {
width: 34%;
}
.table-design-04 td {
width: 66%;
}
}
色の変更：
CSS内の「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の商品名や各項目の内容を、掲載する商品情報へ書き換えてください。
項目の追加：
HTML内の「<tr>」から「</tr>」までを複製すると、商品の項目を追加できます。
料金・プランを比較する表（テーブル）デザイン
複数の料金プランやサービス内容を、横並びで比較できる表デザインを紹介します。
料金や利用回数、対応する機能などを同じ項目で並べることで、それぞれの違いをひと目で確認できます。
DESIGN 05
3プラン料金表
| 項目 | ライト | スタンダード | プレミアム |
|---|---|---|---|
| 料金 | 980円 | 1,980円 | 3,980円 |
| 利用回数 | 10回まで | 50回まで | 無制限 |
| 機能A | × | ○ | ○ |
| サポート | メールのみ | メール・チャット | 優先サポート |
| 機能B | × | × | ○ |
3つの料金プランを横並びにして、価格や利用できる機能を比較できる表デザインです。
同じ項目をプランごとに確認できるため、サービス内容の違いを分かりやすく伝えられます。
<div class="table-design-05-wrap">
<table class="table-design-05">
<thead>
<tr>
<th>項目</th>
<th>ライト</th>
<th>スタンダード</th>
<th>プレミアム</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">料金</th>
<td>980円</td>
<td>1,980円</td>
<td>3,980円</td>
</tr>
<tr>
<th scope="row">利用回数</th>
<td>10回まで</td>
<td>50回まで</td>
<td>無制限</td>
</tr>
<tr>
<th scope="row">機能A</th>
<td>×</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">サポート</th>
<td>メールのみ</td>
<td>メール・チャット</td>
<td>優先サポート</td>
</tr>
<tr>
<th scope="row">機能B</th>
<td>×</td>
<td>×</td>
<td>○</td>
</tr>
</tbody>
</table>
</div>.table-design-05-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-05 {
width: 100%;
min-width: 680px;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-05 th,
.table-design-05 td {
padding: 13px 12px;
text-align: center;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-05 thead th {
font-weight: 600;
background: #dfeef7 !important;
}
.table-design-05 tbody th {
width: 22%;
font-weight: 600;
text-align: left;
background: #edf5fa !important;
}
.table-design-05 tbody td {
width: 26%;
background: #fff !important;
}
@media screen and (max-width: 600px) {
.table-design-05 {
font-size: 13px;
}
.table-design-05 th,
.table-design-05 td {
padding: 11px 10px;
}
}
色の変更：
CSS内の「#dfeef7」と「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内のプラン名や料金、各項目の内容を、掲載するサービス情報へ書き換えてください。
項目の追加：
HTML内の「<tr>」から「</tr>」までを複製すると、比較する項目を追加できます。
DESIGN 06
おすすめプラン付き料金表
おすすめ
| プラン | ライト | スタンダード | プロ |
|---|---|---|---|
| 料金 | 月額980円 | 月額1,980円 | 月額3,980円 |
| 利用回数 | 月10回まで | 無制限 | 無制限 |
| 機能A | × | ○ | ○ |
| サポート | メール対応 | 優先サポート | 電話サポート |
おすすめのプランをラベルと色で強調した、料金比較用の表デザインです。
選んでほしいプランがひと目で分かるため、複数の料金プランから申し込みを促したい場合に適しています。
<div class="table-design-06-scroll">
<div class="table-design-06-wrap">
<span class="table-design-06__badge">
おすすめ
</span>
<table class="table-design-06">
<thead>
<tr>
<th>プラン</th>
<th>ライト</th>
<th class="table-design-06__recommended-head">
スタンダード
</th>
<th>プロ</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">料金</th>
<td>月額980円</td>
<td class="table-design-06__recommended table-design-06__price">
月額1,980円
</td>
<td>月額3,980円</td>
</tr>
<tr>
<th scope="row">利用回数</th>
<td>月10回まで</td>
<td class="table-design-06__recommended">
無制限
</td>
<td>無制限</td>
</tr>
<tr>
<th scope="row">機能A</th>
<td>×</td>
<td class="table-design-06__recommended">
○
</td>
<td>○</td>
</tr>
<tr>
<th scope="row">サポート</th>
<td>メール対応</td>
<td class="table-design-06__recommended">
優先サポート
</td>
<td>電話サポート</td>
</tr>
</tbody>
</table>
</div>
</div>.table-design-06-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-06-wrap {
position: relative;
width: 100%;
min-width: 680px;
padding-top: 34px;
}
.table-design-06-wrap::after {
content: "";
position: absolute;
z-index: 1;
top: 34px;
bottom: 0;
left: 48%;
width: 26%;
border: 1px solid #c98792;
pointer-events: none;
}
.table-design-06 {
width: 100%;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-06 th,
.table-design-06 td {
padding: 13px 12px;
text-align: center;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-06 thead th {
font-weight: 600;
background: #dfeef7 !important;
}
.table-design-06 thead th:first-child,
.table-design-06 tbody th {
width: 22%;
}
.table-design-06 thead th:not(:first-child),
.table-design-06 tbody td {
width: 26%;
}
.table-design-06 tbody th {
font-weight: 600;
text-align: left;
background: #edf5fa !important;
}
.table-design-06 tbody td {
background: #fff !important;
}
.table-design-06 thead th.table-design-06__recommended-head {
background: #f9e8ec !important;
}
.table-design-06 tbody td.table-design-06__recommended {
background: #fff7f8 !important;
}
.table-design-06 tbody td.table-design-06__price {
color: #c98792;
font-size: 16px;
font-weight: 700;
}
.table-design-06__badge {
position: absolute;
z-index: 2;
top: 0;
left: 61%;
display: inline-block;
padding: 5px 12px;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
background: #c98792;
border-radius: 5px;
transform: translateX(-50%);
}
.table-design-06__badge::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-top: 7px solid #c98792;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
transform: translateX(-50%);
}
@media screen and (max-width: 600px) {
.table-design-06 {
font-size: 13px;
}
.table-design-06 th,
.table-design-06 td {
padding: 11px 10px;
}
.table-design-06 tbody td.table-design-06__price {
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内のプラン名や料金、各項目の内容を、掲載するサービス情報へ書き換えてください。
おすすめプラン：
このコードでは、中央のスタンダードプランをおすすめとして強調しています。
DESIGN 07
○×比較表
| 機能 | プランA | プランB | プランC |
|---|---|---|---|
| 機能1 | ○ | ○ | ○ |
| 機能2 | × | ○ | ○ |
| 機能3 | × | ○ | ○ |
| 機能4 | ○ | ○ | ○ |
| 機能5 | × | × | ○ |
利用できる機能を○と×で示し、複数のプランを比較できる表デザインです。
文章を読み込まなくても対応状況を判断しやすいため、機能やサービス内容の違いを簡潔に伝えられます。
<div class="table-design-07-wrap">
<table class="table-design-07">
<thead>
<tr>
<th>機能</th>
<th>プランA</th>
<th>プランB</th>
<th>プランC</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">機能1</th>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">機能2</th>
<td>×</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">機能3</th>
<td>×</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">機能4</th>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">機能5</th>
<td>×</td>
<td>×</td>
<td>○</td>
</tr>
</tbody>
</table>
</div>.table-design-07-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-07 {
width: 100%;
min-width: 620px;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
.table-design-07 th,
.table-design-07 td {
padding: 13px 12px;
text-align: center;
vertical-align: middle;
border: 1px solid #dfe2e8;
}
.table-design-07 thead th {
font-weight: 600;
background: #dfeef7 !important;
}
.table-design-07 tbody th {
width: 28%;
font-weight: 600;
text-align: left;
background: #edf5fa !important;
}
.table-design-07 tbody td {
width: 24%;
font-size: 17px;
background: #fff !important;
}
@media screen and (max-width: 600px) {
.table-design-07 {
font-size: 13px;
}
.table-design-07 th,
.table-design-07 td {
padding: 11px 10px;
}
.table-design-07 tbody td {
font-size: 16px;
}
}
色の変更：
CSS内の「#dfeef7」と「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内のプラン名や機能名を、比較したい内容へ書き換えてください。
対応状況の変更：
HTML内の「○」と「×」を、各プランの対応状況に合わせて変更してください。
特徴を比較する表（テーブル）デザイン
DESIGN 08
メリット・デメリット表
| メリット | デメリット |
|---|---|
|
|
メリットとデメリットを左右に分けて、内容を見比べやすくした表デザインです。
良い点と注意点を同じ画面で確認できるため、商品やサービスの特徴を偏りなく伝えられます。
<div class="table-design-08-wrap">
<table class="table-design-08">
<thead>
<tr>
<th>メリット</th>
<th>デメリット</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>メリットの内容が入ります</li>
<li>メリットの内容が入ります</li>
<li>メリットの内容が入ります</li>
</ul>
</td>
<td>
<ul>
<li>デメリットの内容が入ります</li>
<li>デメリットの内容が入ります</li>
<li>デメリットの内容が入ります</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>.table-design-08-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-design-08 {
width: 100%;
min-width: 600px;
margin: 0;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
line-height: 1.8;
background: #fff;
border: 1px solid #dfe2e8;
}
.table-design-08 th,
.table-design-08 td {
width: 50%;
text-align: left;
vertical-align: top;
border: 0 !important;
}
.table-design-08 th {
padding: 13px 18px;
font-weight: 600;
text-align: center;
background: #dfeef7 !important;
border-bottom: 1px solid #dfe2e8 !important;
}
.table-design-08 td {
padding: 20px 22px;
background: #fff !important;
}
.table-design-08 th:first-child,
.table-design-08 td:first-child {
border-right: 1px solid #dfe2e8 !important;
}
.table-design-08 ul {
margin: 0;
padding: 0 0 0 1.2em;
}
.table-design-08 li {
margin: 0 0 10px;
}
.table-design-08 li:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 600px) {
.table-design-08 {
font-size: 13px;
}
.table-design-08 th {
padding: 11px 14px;
}
.table-design-08 td {
padding: 17px 16px;
}
}
色の変更：
CSS内の「#dfeef7」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したいメリットとデメリットへ書き換えてください。
項目の追加：
HTML内の「<li>」から「</li>」までを複製すると、項目を追加できます。
行数の多い表（テーブル）を見やすくするデザイン
DESIGN 09
ヘッダーを固定した表
| No. | 項目 | 内容 | 備考 |
|---|---|---|---|
| 1 | 項目1 | ここに内容が入ります | 備考を入力 |
| 2 | 項目2 | ここに内容が入ります | 備考を入力 |
| 3 | 項目3 | ここに内容が入ります | 備考を入力 |
| 4 | 項目4 | ここに内容が入ります | 備考を入力 |
| 5 | 項目5 | ここに内容が入ります | 備考を入力 |
| 6 | 項目6 | ここに内容が入ります | 備考を入力 |
| 7 | 項目7 | ここに内容が入ります | 備考を入力 |
表を縦にスクロールしても、項目名が書かれた一番上の行が表示されたままになるデザインです。
行数が多い表でも、どの列の情報を見ているのか分かりやすく、内容を確認しながら読み進められます。
<div class="table-design-09-wrap">
<table class="table-design-09">
<thead>
<tr>
<th>No.</th>
<th>項目</th>
<th>内容</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>項目1</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>2</td>
<td>項目2</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>3</td>
<td>項目3</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>4</td>
<td>項目4</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>5</td>
<td>項目5</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>6</td>
<td>項目6</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
<tr>
<td>7</td>
<td>項目7</td>
<td>ここに内容が入ります</td>
<td>備考を入力</td>
</tr>
</tbody>
</table>
</div>.table-design-09-wrap {
width: 100%;
max-height: 260px;
padding: 0 !important;
overflow: auto;
border: 1px solid #dfe2e8;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.table-design-09 {
display: table;
width: 100%;
min-width: 620px;
margin: 0 !important;
padding: 0 !important;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
line-height: 1.6;
background: #fff;
border: 0 !important;
}
.table-design-09 th,
.table-design-09 td {
padding: 13px 15px;
text-align: left;
vertical-align: middle;
border: 0 !important;
border-right: 1px solid #dfe2e8 !important;
border-bottom: 1px solid #dfe2e8 !important;
}
.table-design-09 th:last-child,
.table-design-09 td:last-child {
border-right: 0 !important;
}
.table-design-09 tbody tr:last-child td {
border-bottom: 0 !important;
}
.table-design-09 thead th {
position: sticky;
z-index: 2;
top: 0;
font-weight: 600;
background: #dfeef7 !important;
}
.table-design-09 th:nth-child(1),
.table-design-09 td:nth-child(1) {
width: 10%;
text-align: center;
}
.table-design-09 th:nth-child(2),
.table-design-09 td:nth-child(2) {
width: 22%;
}
.table-design-09 th:nth-child(3),
.table-design-09 td:nth-child(3) {
width: 45%;
}
.table-design-09 th:nth-child(4),
.table-design-09 td:nth-child(4) {
width: 23%;
}
.table-design-09 tbody td {
background: #fff !important;
}
@media screen and (max-width: 600px) {
.table-design-09-wrap {
max-height: 230px;
}
.table-design-09 {
font-size: 13px;
}
.table-design-09 th,
.table-design-09 td {
padding: 11px 12px;
}
}
色の変更：
CSS内の「#dfeef7」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい項目や内容へ書き換えてください。
表示する高さ：
CSS内の「max-height: 260px」を変更すると、スクロール枠の高さを調整できます。
まとめ
今回は、HTMLとCSSをコピーして使える、見やすい表（テーブル）デザインを9種類紹介しました。
基本の表から商品スペック表、料金比較表、ヘッダーを固定した表まで、掲載する情報や目的に合ったデザインを選んでみてください。
文字や項目、背景色を変更し、サイトの雰囲気に合わせて調整することもできます。
表以外の方法で情報を整理したい場合は、 囲み枠・ボックスデザインや 箇条書き・リストデザイン もあわせてご覧ください。
お気に入りのデザインを取り入れて、読みやすく伝わりやすいページ作りに役立ててみてください。
