これから紹介する【novオリジナル テーブルタグCSSデザインコード】の特徴は…
- 全てレスポンシブ（スマホ表示）対応！
- スマホで縦並び（カード化）するCSSデザインコードもアリ！
- 枠線デザインもCSSでおしゃれ＆シンプルに！
- スマホで横スクロールするデザインもアリ！
となっています！
novオリジナルCSSデザインコード一覧
novこれでnovが提供するCSSデザインコードが全て揃いました♪
目次
① 会社概要・スペック表向け（枠線＆ストライプ）
サンプルのテーブルは画像なので、サイズがバラバラですがご了承ください。
01. クリーン・インディゴグリッド
濃紺のヘッダーと繊細なグレー枠線で、清潔感と信頼性を両立させた汎用性の高い格子デザインです。
<table class="tbl-clean-grid">
<tbody>
<tr>
<th>会社名</th>
<td>株式会社サンプルデザイン</td>
</tr>
<tr>
<th>設立</th>
<td>2026年4月1日</td>
</tr>
<tr>
<th>所在地</th>
<td>東京都千代田区大手町1-1-1</td>
</tr>
</tbody>
</table>.tbl-clean-grid {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
border: 1px solid #cbd5e1;
}
.tbl-clean-grid th,
.tbl-clean-grid td {
padding: 1rem 1.25rem;
border: 1px solid #e2e8f0;
text-align: left;
}
.tbl-clean-grid th {
background-color: #f8fafc;
color: #1e293b;
font-weight: 700;
width: 28%;
border-right: 2px solid #6366f1;
}
.tbl-clean-grid td {
color: #475569;
background-color: #ffffff;
}
@media (max-width: 640px) {
.tbl-clean-grid th {
width: 35%;
padding: 0.8rem 1rem;
}
.tbl-clean-grid td {
padding: 0.8rem 1rem;
}
}
02. ゼブラストライプ・モダン
偶数行に淡い背景色を敷き、行数の多いスペック表や一覧でも視線が迷わないシマシマデザインです☆
<table class="tbl-zebra-stripe">
<tbody>
<tr>
<th>項目</th>
<th>仕様・スペック</th>
<th>備考</th>
</tr>
<tr>
<td>ディスプレイ</td>
<td>6.7インチ OLED</td>
<td>高輝度パネル</td>
</tr>
<tr>
<td>バッテリー</td>
<td>5,000mAh</td>
<td>急速充電対応</td>
</tr>
<tr>
<td>本体重量</td>
<td>約185g</td>
<td>軽量設計</td>
</tr>
</tbody>
</table>.tbl-zebra-stripe {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
border-top: 2px solid #0ea5e9;
border-bottom: 2px solid #0ea5e9;
}
.tbl-zebra-stripe th,
.tbl-zebra-stripe td {
padding: 1rem;
text-align: left;
border: none;
}
.tbl-zebra-stripe tr:first-child th,
.tbl-zebra-stripe tr:first-child td {
background-color: #0ea5e9;
color: #ffffff;
font-weight: 700;
}
.tbl-zebra-stripe tbody tr:nth-child(even) {
background-color: #f0f9ff;
}
.tbl-zebra-stripe tbody tr:nth-child(odd):not(:first-child) {
background-color: #ffffff;
}
.tbl-zebra-stripe tbody tr:hover:not(:first-child) {
background-color: #e0f2fe;
}
03. レフトバー・アクセント
余計な枠線を省き、見出し（th）の左側にカラーアクセントの帯を入れたスマートなデザインです。
<table class="tbl-left-bar">
<tbody>
<tr>
<th>サービス名称</th>
<td>クラウドマネージャー Pro</td>
</tr>
<tr>
<th>対応端末</th>
<td>PC / iOS / Android（全ブラウザ対応）</td>
</tr>
<tr>
<th>契約期間</th>
<td>最低1ヶ月から（年払い割引あり）</td>
</tr>
</tbody>
</table>.tbl-left-bar {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.tbl-left-bar tr {
border-bottom: 1px solid #e2e8f0;
}
.tbl-left-bar th,
.tbl-left-bar td {
padding: 1.1rem 1rem;
text-align: left;
}
.tbl-left-bar th {
width: 30%;
font-weight: 700;
color: #0f172a;
position: relative;
padding-left: 1.25rem;
}
.tbl-left-bar th::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 55%;
background-color: #3b82f6;
border-radius: 2px;
}
.tbl-left-bar td {
color: #475569;
}
04. クラシック・ダブルボーダー
上部と下部に品格ある「二重線（double border）」を配した、公的文書や格式高いサイトに最適なスタイルです。
<table class="tbl-double-accent">
<tbody>
<tr>
<th>事業内容</th>
<td>Web制作・UI/UXデザインコンサルティング</td>
</tr>
<tr>
<th>資本金</th>
<td>10,000,000円</td>
</tr>
<tr>
<th>取引銀行</th>
<td>三菱UFJ銀行 / みずほ銀行</td>
</tr>
</tbody>
</table>.tbl-double-accent {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border-top: 3px double #334155;
border-bottom: 3px double #334155;
}
.tbl-double-accent th,
.tbl-double-accent td {
padding: 0.9rem 1.2rem;
text-align: left;
border-bottom: 1px solid #f1f5f9;
}
.tbl-double-accent th {
width: 25%;
background-color: #f8fafc;
color: #1e293b;
font-weight: 700;
border-right: 1px solid #e2e8f0;
}
.tbl-double-accent td {
color: #334155;
}
05. ダッシュ・ミニマルライン
境界線に細い破線（dashed）を採用した、カフェメニューやナチュラルテイストのサイトに似合う優しい表です。
<table class="tbl-dashed-minimal">
<tbody>
<tr>
<th>ブレンド珈琲</th>
<td>深いコクと香ばしい苦味</td>
<td>¥ 500</td>
</tr>
<tr>
<th>カフェラテ</th>
<td>まろやかなスチームミルク</td>
<td>¥ 580</td>
</tr>
<tr>
<th>季節のタルト</th>
<td>旬のフルーツをたっぷり使用</td>
<td>¥ 650</td>
</tr>
</tbody>
</table>.tbl-dashed-minimal {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.tbl-dashed-minimal th,
.tbl-dashed-minimal td {
padding: 0.9rem 0.5rem;
border-bottom: 1px dashed #cbd5e1;
text-align: left;
color: #44403c;
}
.tbl-dashed-minimal tr:first-child th,
.tbl-dashed-minimal tr:first-child td {
border-bottom: 2px dashed #78716c;
font-weight: 700;
color: #292524;
}
.tbl-dashed-minimal td:last-child {
text-align: right;
font-weight: 700;
color: #b45309;
}
② スマホ表示で縦並び（カード化）するデザイン
※スマホ表示（レスポンシブ）を正常に動作させるには、HTMLの <head> 内に
<meta name="viewport" content="width=device-width, initial-scale=1.0">を記述してください！
06. スタック・カードブロック
スマホサイズになると各行が丸ごと1枚の独立した【カード型ブロック】に変形し、読みやすさを劇的に向上させます。
<table class="tbl-card-stack">
<tbody>
<tr>
<th>プラン名</th>
<td>スタンダード</td>
</tr>
<tr>
<th>月額費用</th>
<td>2,980円（税込）</td>
</tr>
<tr>
<th>利用可能人数</th>
<td>最大10名まで</td>
</tr>
</tbody>
</table>.tbl-card-stack {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border: 1px solid #e2e8f0;
}
.tbl-card-stack th,
.tbl-card-stack td {
padding: 1rem 1.25rem;
border: 1px solid #e2e8f0;
text-align: left;
}
.tbl-card-stack th {
background: #f8fafc;
color: #0f172a;
width: 30%;
}
/* スマホ表示（640px以下）でカード化 */
@media (max-width: 640px) {
.tbl-card-stack,
.tbl-card-stack tbody,
.tbl-card-stack tr,
.tbl-card-stack th,
.tbl-card-stack td {
display: block;
width: 100%;
}
.tbl-card-stack {
border: none;
}
.tbl-card-stack tr {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.tbl-card-stack th {
background: #f1f5f9;
border: none;
border-bottom: 1px solid #e2e8f0;
padding: 0.6rem 1rem;
font-size: 0.85rem;
color: #475569;
}
.tbl-card-stack td {
border: none;
padding: 0.85rem 1rem;
color: #1e293b;
font-weight: 500;
}
}パソコン
スマホ
07. ピルバッジ・スタックカード
スマホ表示時に見出し（th）が小さな角丸バッジになり、各項目が整理されて見える洗練カードデザインです。
<table class="tbl-badge-card">
<tbody>
<tr>
<th>担当部署</th>
<td>カスタマーサポート窓口</td>
</tr>
<tr>
<th>受付時間</th>
<td>平日 9:00 〜 18:00（土日祝除く）</td>
</tr>
<tr>
<th>返答目安</th>
<td>原則24時間以内にご回答いたします</td>
</tr>
</tbody>
</table>.tbl-badge-card {
width: 100%;
border-collapse: separate;
border-spacing: 0 0.5rem;
margin: 1.5rem 0;
}
.tbl-badge-card tr {
background: #f8fafc;
border-radius: 8px;
}
.tbl-badge-card th,
.tbl-badge-card td {
padding: 0.9rem 1.25rem;
text-align: left;
}
.tbl-badge-card th {
width: 25%;
font-weight: 700;
color: #1e293b;
}
.tbl-badge-card td {
color: #475569;
}
@media (max-width: 640px) {
.tbl-badge-card,
.tbl-badge-card tbody,
.tbl-badge-card tr,
.tbl-badge-card th,
.tbl-badge-card td {
display: block;
}
.tbl-badge-card tr {
padding: 1rem;
margin-bottom: 0.75rem;
border: 1px solid #e2e8f0;
}
.tbl-badge-card th {
display: inline-block;
padding: 0.2rem 0.6rem;
background: #6366f1;
color: #ffffff;
font-size: 0.75rem;
border-radius: 4px;
margin-bottom: 0.4rem;
width: auto;
}
.tbl-badge-card td {
padding: 0;
color: #1e293b;
}
}パソコン
スマホ
08. ツートン・フレームスタック
スマホ表示の際、カードの左側にカラーアクセントの太枠が付き、各ブロックが引き締まる立体感のあるデザインです。
<table class="tbl-twotone-stack">
<tbody>
<tr>
<th>ステップ 01</th>
<td>オンラインより無料会員登録を完了します。</td>
</tr>
<tr>
<th>ステップ 02</th>
<td>本人確認書類（免許証等）をアップロードします。</td>
</tr>
<tr>
<th>ステップ 03</th>
<td>最短当日中にアカウントが有効化されます。</td>
</tr>
</tbody>
</table>.tbl-twotone-stack {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border-top: 1px solid #e2e8f0;
}
.tbl-twotone-stack th,
.tbl-twotone-stack td {
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
text-align: left;
}
.tbl-twotone-stack th {
width: 25%;
background-color: #f1f5f9;
font-weight: 700;
color: #334155;
}
@media (max-width: 640px) {
.tbl-twotone-stack,
.tbl-twotone-stack tbody,
.tbl-twotone-stack tr,
.tbl-twotone-stack th,
.tbl-twotone-stack td {
display: block;
width: 100%;
}
.tbl-twotone-stack {
border: none;
}
.tbl-twotone-stack tr {
margin-bottom: 1rem;
border-left: 4px solid #0ea5e9;
background: #f8fafc;
border-radius: 0 8px 8px 0;
padding: 0.8rem 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.tbl-twotone-stack th {
background: transparent;
padding: 0 0 0.3rem 0;
font-size: 0.85rem;
color: #0ea5e9;
}
.tbl-twotone-stack td {
border: none;
padding: 0;
color: #334155;
line-height: 1.6;
}
}パソコン
スマホ
09. ネスト・アンダーラインスタック
スマホ時に枠線をなくし、下線とインデントだけでカード風にまとめるミニマルで読みやすいスタックスタイルです。
<table class="tbl-nest-stack">
<tbody>
<tr>
<th>推奨環境</th>
<td>Google Chrome / Safari / Edge（最新版）</td>
</tr>
<tr>
<th>暗号化通信</th>
<td>TLS 1.3 による常時SSL通信</td>
</tr>
<tr>
<th>バックアップ</th>
<td>毎日午前3時に自動バックアップを実施</td>
</tr>
</tbody>
</table>.tbl-nest-stack {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.tbl-nest-stack tr {
border-bottom: 1px solid #e2e8f0;
}
.tbl-nest-stack th,
.tbl-nest-stack td {
padding: 1rem;
text-align: left;
}
.tbl-nest-stack th {
width: 25%;
font-weight: 700;
color: #0f172a;
}
.tbl-nest-stack td {
color: #475569;
}
@media (max-width: 640px) {
.tbl-nest-stack,
.tbl-nest-stack tbody,
.tbl-nest-stack tr,
.tbl-nest-stack th,
.tbl-nest-stack td {
display: block;
}
.tbl-nest-stack tr {
padding: 0.8rem 0;
}
.tbl-nest-stack th {
width: 100%;
padding: 0 0 0.25rem 0;
font-size: 0.9rem;
color: #2563eb;
}
.tbl-nest-stack td {
padding: 0 0 0 0.5rem;
}
}パソコン
スマホ
③ スマホ表示で横スクロールするデザイン
10. スクロール・グラデーションヒント
スマホ時に横スクロール可能となり、画面右端に『スクロールできるよ』と分かるグラデーション影を配した設計です。
<table class="tbl-scroll-hint">
<tbody>
<tr>
<th>プラン</th>
<th>月額料金</th>
<th>ストレージ</th>
<th>ドメイン数</th>
<th>SSL証明書</th>
</tr>
<tr>
<td>ライト</td>
<td>¥ 980</td>
<td>100 GB</td>
<td>10個</td>
<td>無料</td>
</tr>
<tr>
<td>プロ</td>
<td>¥ 1,980</td>
<td>300 GB</td>
<td>無制限</td>
<td>無料</td>
</tr>
</tbody>
</table>.tbl-scroll-hint {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.9rem;
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background:
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 100% 50% / 10px 100% no-repeat,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 0% 50% / 10px 100% no-repeat;
background-attachment: scroll, scroll;
}
.tbl-scroll-hint th,
.tbl-scroll-hint td {
padding: 0.85rem 1.25rem;
border: 1px solid #e2e8f0;
text-align: center;
}
.tbl-scroll-hint th {
background-color: #f1f5f9;
font-weight: 700;
color: #1e293b;
}
.tbl-scroll-hint td {
background-color: #ffffff;
color: #475569;
}
11. スティッキー・固定列スクロール
スマホで横スクロールした際、左端の項目列（th）が画面左側にピタッと固定されて見やすい高機能テーブルです。
<table class="tbl-scroll-sticky">
<tbody>
<tr>
<th>機能名</th>
<td>プランA</td>
<td>プランB</td>
<td>プランC</td>
<td>エンタープライズ</td>
</tr>
<tr>
<th>初期費用</th>
<td>0円</td>
<td>0円</td>
<td>10,000円</td>
<td>お見積もり</td>
</tr>
<tr>
<th>API連携</th>
<td>✕</td>
<td>◯</td>
<td>◯</td>
<td>◯（専用枠）</td>
</tr>
</tbody>
</table>.tbl-scroll-sticky {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
display: block;
overflow-x: auto;
white-space: nowrap;
}
.tbl-scroll-sticky th,
.tbl-scroll-sticky td {
padding: 0.9rem 1.2rem;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: center;
}
/* 1列目を左端に固定 */
.tbl-scroll-sticky th:first-child,
.tbl-scroll-sticky td:first-child {
position: sticky;
left: 0;
background-color: #f8fafc;
font-weight: 700;
color: #0f172a;
z-index: 2;
border-left: 1px solid #e2e8f0;
border-right: 2px solid #cbd5e1;
text-align: left;
}
.tbl-scroll-sticky tr:first-child th,
.tbl-scroll-sticky tr:first-child td {
border-top: 1px solid #e2e8f0;
background-color: #f1f5f9;
}
12. バーティカル・マトリックススクロール
ヘッダー行を濃色で固定し、細いカスタムスクロールバーをあしらった横長データ対応の表です。
<table class="tbl-matrix-scroll">
<tbody>
<tr>
<th>地域</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
<th>7月</th>
<th>8月</th>
<th>9月</th>
</tr>
<tr>
<td>東京本社</td>
<td>120%</td>
<td>115%</td>
<td>130%</td>
<td>142%</td>
<td>138%</td>
<td>150%</td>
</tr>
<tr>
<td>大阪支社</td>
<td>98%</td>
<td>102%</td>
<td>105%</td>
<td>110%</td>
<td>108%</td>
<td>115%</td>
</tr>
</tbody>
</table>.tbl-matrix-scroll {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
display: block;
overflow-x: auto;
white-space: nowrap;
}
/* スクロールバーの装飾 */
.tbl-matrix-scroll::-webkit-scrollbar {
height: 6px;
}
.tbl-matrix-scroll::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.tbl-matrix-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.tbl-matrix-scroll th,
.tbl-matrix-scroll td {
padding: 0.85rem 1.4rem;
border: 1px solid #e2e8f0;
text-align: center;
font-size: 0.9rem;
}
.tbl-matrix-scroll tr:first-child th,
.tbl-matrix-scroll tr:first-child td {
background: #1e293b;
color: #ffffff;
font-weight: 600;
}
.tbl-matrix-scroll td:first-child {
font-weight: 700;
background: #f8fafc;
}
④ 枠線こだわり・クリエイティブ系
13. ソフト・ラウンドフレーム（tbl-round-soft）
テーブル全体を柔らかな角丸と薄いカードシャドウで包み込んだ、今どきのWebサービスにマッチするスタイルです。
<table class="tbl-round-soft">
<tbody>
<tr>
<th>プロジェクト</th>
<td>コーポレートサイト全面リニューアル</td>
</tr>
<tr>
<th>担当範囲</th>
<td>企画 / UI設計 / フロントエンド実装</td>
</tr>
<tr>
<th>制作期間</th>
<td>約2.5ヶ月</td>
</tr>
</tbody>
</table>.tbl-round-soft {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.tbl-round-soft th,
.tbl-round-soft td {
padding: 1rem 1.25rem;
border-bottom: 1px solid #f1f5f9;
text-align: left;
}
.tbl-round-soft tr:last-child th,
.tbl-round-soft tr:last-child td {
border-bottom: none;
}
.tbl-round-soft th {
width: 28%;
background-color: #f8fafc;
font-weight: 700;
color: #334155;
border-right: 1px solid #f1f5f9;
}
.tbl-round-soft td {
background-color: #ffffff;
color: #475569;
}
14. ドット・ナチュラルグリッド
すべての枠線を繊細な丸ドット（dotted）で統一した、ブログやオーガニック系サイトによく馴染む表です。
<table class="tbl-dot-grid">
<tbody>
<tr>
<th>原材料名</th>
<td>有機小麦粉、天然酵母、天日塩、発酵バター</td>
</tr>
<tr>
<th>アレルギー</th>
<td>小麦・乳成分（特定原材料8品目中）</td>
</tr>
<tr>
<th>賞味期限</th>
<td>製造日より常温で3日間（冷凍保存可）</td>
</tr>
</tbody>
</table>.tbl-dot-grid {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border: 2px dotted #d6d3d1;
}
.tbl-dot-grid th,
.tbl-dot-grid td {
padding: 0.9rem 1.1rem;
border: 1.5px dotted #e7e5e4;
text-align: left;
}
.tbl-dot-grid th {
background-color: #fafaf9;
color: #44403c;
font-weight: 700;
width: 25%;
}
.tbl-dot-grid td {
color: #57534e;
background-color: #ffffff;
}
15. グラデーション・トップバー
テーブルの最上部に鮮やかなグラデーションラインを配置し、アイキャッチ効果を高めたデザインです。
<table class="tbl-grad-top">
<tbody>
<tr>
<th>導入実績</th>
<td>国内上場企業を中心に累計1,200社突破</td>
</tr>
<tr>
<th>利用継続率</th>
<td>99.2%（直近1年間の平均解約率 0.8%）</td>
</tr>
<tr>
<th>サポート体制</th>
<td>専任のカスタマーサクセス担当が伴走支援</td>
</tr>
</tbody>
</table>.tbl-grad-top {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.tbl-grad-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
}
.tbl-grad-top th,
.tbl-grad-top td {
padding: 1.1rem 1.25rem;
border-bottom: 1px solid #f1f5f9;
text-align: left;
}
.tbl-grad-top th {
width: 26%;
font-weight: 700;
color: #0f172a;
}
.tbl-grad-top td {
color: #475569;
}
16. カプセル・ヘッダーピル
見出し（th）をカプセルバッジのように立体的に際立たせ、先進的なUIイメージを演出した表です。
<table class="tbl-pill-header">
<tbody>
<tr>
<th><span class="pill">POINT 01</span></th>
<td>完全レスポンシブ対応でスマホ表示崩れゼロ</td>
</tr>
<tr>
<th><span class="pill">POINT 02</span></th>
<td>軽量なピュアCSSのみで高速表示を実現</td>
</tr>
<tr>
<th><span class="pill">POINT 03</span></th>
<td>コピペですぐに使える豊富なクラスバリエーション</td>
</tr>
</tbody>
</table>.tbl-pill-header {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.tbl-pill-header tr {
border-bottom: 1px solid #e2e8f0;
}
.tbl-pill-header th,
.tbl-pill-header td {
padding: 1rem 0.5rem;
text-align: left;
}
.tbl-pill-header th {
width: 140px;
}
.tbl-pill-header .pill {
display: inline-block;
background: #f1f5f9;
color: #4f46e5;
border: 1px solid #e0e7ff;
font-size: 0.75rem;
font-weight: 800;
padding: 0.35rem 0.75rem;
border-radius: 999px;
letter-spacing: 0.05em;
}
.tbl-pill-header td {
color: #334155;
font-weight: 500;
}
17. ツートン・ブロックグリッド
見出し列とデータ列で背景色をハッキリ切り分け、太めのホワイトグリッドで区切ったモダンデザインです。
<table class="tbl-duotone-grid">
<tbody>
<tr>
<th>営業時間</th>
<td>10:00 〜 19:00（完全予約制）</td>
</tr>
<tr>
<th>定休日</th>
<td>毎週水曜日・第2第4火曜日</td>
</tr>
<tr>
<th>アクセス</th>
<td>表参道駅 A2出口より徒歩2分</td>
</tr>
</tbody>
</table>.tbl-duotone-grid {
width: 100%;
border-collapse: separate;
border-spacing: 2px;
margin: 1.5rem 0;
background: #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.tbl-duotone-grid th,
.tbl-duotone-grid td {
padding: 1rem 1.25rem;
text-align: left;
}
.tbl-duotone-grid th {
width: 25%;
background: #f1f5f9;
color: #1e293b;
font-weight: 700;
}
.tbl-duotone-grid td {
background: #ffffff;
color: #475569;
}
⑤ 料金比較・リッチカード・ダーク系
18. プライシング・ハイライト
特定の列やおすすめプランを目立たせ、CVR（成約率）を高めるランディングページ向けの料金比較表です。
<table class="tbl-pricing-plan">
<tbody>
<tr>
<th>項目</th>
<td>フリー</td>
<td class="recommended">おすすめ (Pro)</td>
<td>ビジネス</td>
</tr>
<tr>
<th>月額料金</th>
<td>0円</td>
<td class="recommended"><strong>1,980円</strong></td>
<td>4,980円</td>
</tr>
<tr>
<th>登録可能数</th>
<td>3件</td>
<td class="recommended">無制限</td>
<td>無制限</td>
</tr>
</tbody>
</table>.tbl-pricing-plan {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5rem 0;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
text-align: center;
}
.tbl-pricing-plan th,
.tbl-pricing-plan td {
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
}
.tbl-pricing-plan th {
background: #f8fafc;
color: #0f172a;
font-weight: 700;
text-align: left;
}
/* おすすめ列の強調枠 */
.tbl-pricing-plan .recommended {
background: #eef2ff !important;
color: #4338ca;
font-weight: 700;
border-left: 2px solid #6366f1;
border-right: 2px solid #6366f1 !important;
}
.tbl-pricing-plan tr:first-child .recommended {
background: #6366f1 !important;
color: #ffffff;
}
19. ニューモフィズム・ソフトエンボス
立体的な浮き彫り影を施した、柔らかく未来感のあるニューモフィズムスタイルのテーブルです。
<table class="tbl-neumorphism">
<tbody>
<tr>
<th>サーバー環境</th>
<td>NGINX + Node.js (High Performance)</td>
</tr>
<tr>
<th>データベース</th>
<td>PostgreSQL (Distributed Cluster)</td>
</tr>
<tr>
<th>稼働率保証</th>
<td>SLA 99.99% Guaranteed</td>
</tr>
</tbody>
</table>.tbl-neumorphism {
width: 100%;
border-collapse: separate;
border-spacing: 0 0.8rem;
margin: 1.5rem 0;
}
.tbl-neumorphism tr {
background: #f0f3f8;
box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #ffffff;
border-radius: 10px;
}
.tbl-neumorphism th,
.tbl-neumorphism td {
padding: 1.1rem 1.25rem;
border: none;
text-align: left;
}
.tbl-neumorphism th {
width: 28%;
color: #3b5998;
font-weight: 700;
}
.tbl-neumorphism td {
color: #4b5563;
}
20. サイバー・ネオングロー
ダークモードに映えるシアンの光彩ボーダーをまとった、テック系・開発者向けの近未来スタイルです。
<table class="tbl-dark-neon">
<tbody>
<tr>
<th>PROTOCOL</th>
<td>HTTPS / WSS (WebSocket Secure)</td>
</tr>
<tr>
<th>AUTH METHOD</th>
<td>OAuth 2.0 with PKCE Flow</td>
</tr>
<tr>
<th>RATE LIMIT</th>
<td>10,000 requests / minute</td>
</tr>
</tbody>
</table>.tbl-dark-neon {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: #090d16;
border: 1px solid rgba(56, 189, 248, 0.3);
border-radius: 8px;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
font-family: monospace, sans-serif;
}
.tbl-dark-neon th,
.tbl-dark-neon td {
padding: 1rem 1.25rem;
border: 1px solid rgba(56, 189, 248, 0.15);
text-align: left;
}
.tbl-dark-neon th {
color: #38bdf8;
font-weight: 700;
letter-spacing: 0.05em;
background: rgba(56, 189, 248, 0.05);
width: 25%;
}
.tbl-dark-neon td {
color: #e2e8f0;
}
