CSSでHTMLテーブルの枠線を付ける
HTMLテーブル枠線プレイグラウンド
HTMLテーブルの枠線：collapse、spacing、縞模様、角丸 | We.Inc
CSSでHTMLテーブルの枠線を整えます：border-collapse、border-spacing、セルごとの線、縞模様の行、角丸。CSSをコピーできるライブのプレイグラウンド付きです。
テーブルに線を表示するには、thとtdのセルに枠線を付け、テーブルにborder-collapse: collapseを追加して、隣り合うセルが2本ではなく1本の線を共有するようにします。セル間に隙間を空けたいなら、border-collapse: separateとborder-spacingを使います。collapseの枠線ではborder-radiusが無視されるため、角丸にはseparateモデルが必要です。
テーブルの枠線プロパティ早見表
- 共有される1本の格子線
- border-collapse: collapse
- すべてのセルを線で囲む
- border: 1px solid #ccc
- th, td
- セル間の隙間
- border-spacing: 4px
- table（separateモデルのみ）
- 縞模様の行
- tbody tr:nth-child(even) { background: #f5f5f5 }
- 外側の角を丸くする
- border-radius + border-collapse: separate
- tableと角のセル
- 行の間だけに線を引く
- border-bottom: 1px solid #ddd
- th, td
テーブルには通常のボックスとは別の枠線ルールがあるため、divではうまくいくCSSがテーブルでは崩れて見えることがよくあります。プレイグラウンドでcollapseとseparateのモデルを切り替え、線の太さ、間隔、角の丸みを変えてから、生成された正確なCSSをコピーしましょう。
- プレイグラウンドでcollapseかseparateのモデルを選び、二重線が結合したり分かれたりする様子を確認します。
- 描く線を選びます：全体の格子、行のみ、または外枠だけ。
- 縞模様の行や角丸をオンにします。角丸にすると、テーブルは自動でseparateモデルに切り替わります。
- 生成されたCSSをコピーするか、下にある編集可能な例から始めます。
- 枠線はtable要素だけでなくセルに付けましょう。table要素だけに枠線を付けると、外枠が描かれるだけで内側には何も描かれません。
- 角丸にしたいけれど隙間は見せたくない場合は、separateモデルでborder-spacing: 0を使います。
- 縞模様はtbodyの行だけに付け、見出し行は独自の背景を保つようにしましょう。
- 線の色は薄めにして、区切りの大部分は余白に任せましょう。太い格子は数字を読み取りにくくします。
- 幅の広いテーブルはoverflow-x: autoのコンテナで囲み、スマートフォンではページ全体ではなくテーブルだけがスクロールするようにしましょう。
よくある質問
テーブルの枠線が二重になるのはなぜですか？
border-collapseの初期値はseparateなので、各セルが自分の枠線を描き、隣同士の線が並んで表示されます。テーブルにborder-collapse: collapseを指定すると、隣接する枠線が1本の線にまとまります。
テーブルでborder-radiusが効かないのはなぜですか？
collapseの枠線モデルでは角丸が無視されます。テーブルをborder-collapse: separateに切り替えてborder-spacing: 0を指定し、外側の角のセルを丸くするか、border-radiusとoverflow: hiddenを付けたdivでテーブルを囲みます。
HTMLのborder属性はテーブルでまだ使えますか？
HTML標準ではtableのborder属性は廃止扱いで、代わりにCSSを使うよう求めています。古いページのためにブラウザーはまだ描画しますが、新しいコードでは1つのルールですべてのテーブルを制御できるよう、スタイルシートで枠線を指定しましょう。
border-spacingには何を指定しますか？
長さを1つ指定すると、横と縦の両方の隙間になります。2つ指定すると、1つ目が列間の横の隙間、2つ目が行間の縦の隙間になります。例えばborder-spacing: 8px 4pxです。テーブルがcollapseのときは効果がありません。
1つの列だけに枠線を付けるには？
td:nth-child(2), th:nth-child(2)のようなセレクターでその列のセルを指定し、左か右に枠線を付けます。セルに直接スタイルを付ける方法は、どちらの枠線モデルでも同じように動作します。
2つの枠線モデル
- separateモデルでは、各セルが独自の枠線を持つ独立したボックスになり、border-spacingでボックス間の隙間を決めます。これがデフォルトなので、セルに枠線を付けただけのテーブルは線が二重に見えます。
- collapseモデルでは、ブラウザーが共有される各辺を1本の線にまとめます。ほとんどのデータテーブルに求められるのはこちらですが、代わりにborder-spacingと角丸は使えなくなります。
読みやすいデータテーブル
- 行間の横線は、密な格子よりも数字の並びに沿って視線を導いてくれます。数値の列は右揃えにし、th要素ではっきりした見出し行を作り、スクリーンリーダーの利用者にもテーブルの名前が伝わるようキャプションを付けましょう。
- 列の多い長いテーブルでは、縞模様が役立ちます。縞の色の上でも文字のコントラストが十分に保たれているか確認しましょう。
テーブル枠線プロパティのリファレンス
テーブルの線の描き方を変えるプロパティ
- collapse, separate
- tableに指定します。collapseは共有される辺をまとめます。
- 長さを1つか2つ
- 横、縦の順の隙間です。collapseのときは無視されます。
編集できるテーブル枠線の例
見出し行付きのcollapse格子
定番のデータテーブルです。すべてのセルの間に1本の線があり、見出しに色が付いています。
行のみの線と縞模様
縦線はありません。各セルの下枠線と偶数行の色付けで、長い行も追いやすくなります。
角丸のテーブル
間隔0のseparateモデルで、各セルの右と下に枠線を付け、外側の角を丸くしています。
廃止されたborder属性とCSS版の比較
どちらのテーブルも見た目は同じです。2つ目はスタイルをCSSに置いており、これがHTML標準の求める方法です。
テーブル枠線プレイグラウンド
枠線モデル
描く線
全体の格子
行のみ
外枠のみ
線の太さ：{n}px
セルの間隔：{n}px
角の丸み：{n}px
縞模様の行
線の色
間隔と角丸はseparateモデルでのみ使えます。
プレビュー用テーブル
名前
役割
都市
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る