Webページにテーブルを設置するとき「見た目を整えるCSSをどう書けばよいか」に時間がかかりがちです。このツールは5種のデザインプリセット（ストライプ・ボーダー・ミニマル・カード・ダーク）を選ぶだけで、すぐ使えるCSSコードを出力します。コピーしてHTMLのtable要素に class="custom-table" を付けるだけで、整ったテーブルデザインを導入できます。
5種プリセットの特徴と使いどころ
「ストライプ」は1行おきに薄い色を付ける最も定番のスタイルです。行数が多い表で視線の横移動を助けるため、データ量の多いリストやスプレッドシート風のUIに向いています。
「ボーダー」はすべてのセルに枠線を引くグリッドスタイルです。情報の区切りが明確になるため、比較表や仕様一覧など「どのセルの値か」を正確に伝えたい場合に適しています。
「ミニマル」はヘッダー下と行間の水平線だけを持つシンプルなデザインです。余計な装飾を排してコンテンツを前面に出したいブログ記事や文書ページと相性が良く、文章中に自然に溶け込みます。
「カード」は角丸と影でテーブル全体をカード状に見せるスタイルです。モダンなWebアプリやダッシュボードに多く見られ、テーブルを視覚的に独立したUI要素として際立たせます。
「ダーク」はダークモード・技術系サイト向けの配色です。黒背景に白い文字・細いボーダーで構成されており、コードブロックの近くに設置するドキュメントサイトやポートフォリオとよく合います。
border-collapse と border-collapse: separate の違い
CSSのテーブルには border-collapse というプロパティがあり、値によって動作が大きく変わります。collapse（既定に近い）は隣接するセルの境界線を共有し、1本の線として表示します。ボーダーグリッド表に向いており、線が重ならないため見た目がすっきりします。
一方 separate は各セルが独立した境界線を持ちます。border-spacing を 0 にすると visually は collapse と同じに見えますが、テーブル自体に border-radius を適用できるという重要な違いがあります。collapse のままでは角丸がテーブルに効きません。このツールのストライプ・カード・ダークプリセットが separate を使うのはこのためです。
| プロパティ | border-collapse: collapse | border-collapse: separate |
|---|---|---|
| 隣接セルの線 | 共有（1本） | 独立（2本、spacing=0で接触） |
| border-radius | テーブルに効かない | border-spacing:0 で効く |
| 向いているスタイル | ボーダーグリッド | ストライプ・カード・ダーク |
テーブルCSSでよく使うプロパティ一覧
テーブルのスタイリングでは、通常のCSSに加えてテーブル固有のプロパティを理解しておく必要があります。
| プロパティ | 説明 | 典型的な値 |
|---|---|---|
| border-collapse | 境界線の結合方法 | collapse / separate |
| border-spacing | セル間の隙間（separate時） | 0 / 4px |
| :nth-child(even/odd) | 偶数・奇数行の色分け | background: #f0f0f0 |
| :hover | ホバー時の色変化 | background: #e0eeff |
| thead th | ヘッダーセルのスタイル | background / color |
| overflow: hidden | テーブルの角丸を有効化（separate時） | hidden |
生成したCSSのカスタマイズ方法
出力されたCSSはそのまま使えますが、プロジェクトのカラースキームに合わせて色を変更するのが一般的です。ヘッダー背景色（thのbackground）を自社のブランドカラーに変えるだけで一気に統一感が出ます。
パディング（padding）の値を増やすと余白が広がって読みやすくなり、減らすとコンパクトになります。フォントサイズ（font-size）も調整ポイントです。モバイル表示を考慮する場合は、横スクロールを許可するためにテーブルを overflow-x: auto を持つdivで囲む対応も追加してください。
クラス名 .custom-table は他のCSSと衝突する場合があります。プロジェクトの命名規則に合わせて .data-table・.pricing-table・.spec-table などに変更して使ってください。複数のテーブルスタイルを同一ページに使う場合は、クラス名を変えて別々に管理するのが安全です。
- ヘッダー色：th の background と color を変更
- ストライプ色：tbody tr:nth-child(even) td の background を変更
- ホバー色：tbody tr:hover td の background を変更
- 角丸：border-radius の値を調整（0で角丸なし）
- フォント：font-size と font-weight で調整
- モバイル対応：テーブルをdivで囲み overflow-x: auto を追加
※ 出力されたCSSはHTMLの <style> タグまたは外部CSSファイルに記述し、対象のtable要素に class="custom-table" を付けてください。
※ ボーダープリセットは border-collapse: collapse を使用しているため、テーブル自体に border-radius を適用しても角丸になりません。角丸が必要な場合はストライプ・カード・ダークプリセットを使用してください。
よくある質問
Q CSSをコピーしてHTMLに貼り付けたのに反映されません。
CSSを <style> タグ内に記述し、対象の table 要素に class="custom-table" が付いているか確認してください。また、ページに既存のCSSがある場合、セレクタの詳細度（specificity）の競合で上書きされることがあります。その場合は .my-section .custom-table のように親要素のセレクタを追加して詳細度を上げてください。
Q ストライプとカードのように複数のスタイルを同じページで使い分けたい。
クラス名を .custom-table-striped と .custom-table-card のように分けてコピーし、それぞれのtable要素に異なるクラスを付けることで混在できます。クラス名内の .custom-table をすべて新しいクラス名に置換してください。
Q テーブルがスマートフォンで横にはみ出します。
テーブルを <div style="overflow-x: auto;"> で囲むと横スクロールが有効になり、小さい画面でもテーブル全体が見えるようになります。レスポンシブ対応の基本的な方法です。
Q ヘッダーとボディの色だけを変えたい。
th のbackground と color を変えるとヘッダー色が変わります。tbody tr:nth-child の background を変えるとストライプ色が変わります。ホバー色は tbody tr:hover td の background で調整します。CSSのコメント行を参考に、変更したい部分だけ編集してください。
Q このCSSはWordPressやWix、Shopifyでも使えますか？
HTMLとCSSが使える環境であればどのプラットフォームでも利用できます。WordPressではカスタマイザーの「追加CSS」または子テーマのstyle.cssに貼り付けてください。Wixは高度なCSSエディター、Shopifyはassets/theme.cssに追記する形で導入できます。