CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテーブルに境界線を追加する方法

CSSのborderプロパティは、要素の周囲に境界線を定義するために使用します。テーブルに境界線を設定すると、セル同士の区切りが明確になり、データが格段に読みやすくなります。境界線の太さ・スタイル・色をまとめて指定できるのが特徴です。

構文

セレクタ {
    border: /*値*/
}

borderプロパティでは、「太さ スタイル 色」の順で値を半角スペース区切りで指定します。例えば「3px double green」は、3pxの二重線を緑色で描くという意味になります。

例1：テーブル全体とセルに個別の境界線を設定する

次の例では、table要素とtd要素に対して、それぞれ異なる境界線スタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: 1em;
    border: 3px double green;
    border-right-style: dashed;
    border-left-width: 17px;
    border-bottom-color: orange;
}
td {
    font-size: 24px;
    border-right-style: dotted;
    border-width: 3px;
    border-right-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>demo</td>
<td>text</td>
</tr>
<tr>
<td>goes</td>
<td>here</td>
</tr>
</table>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでテーブルに境界線を追加する方法

このコードでは、以下のように各辺ごとに細かい指定を行っています。

  • border: 3px double green; … テーブル全体に3pxの緑色の二重線を引く
  • border-right-style: dashed; … 右側の境界線だけ破線に変更
  • border-left-width: 17px; … 左側の境界線の太さを17pxに変更
  • border-bottom-color: orange; … 下側の境界線の色をオレンジに変更
  • td の border-right-style: dotted; … 各セルの右側に赤い点線を表示

このように、borderプロパティで一括指定した後でも、border-right-style や border-left-width のように各辺・各項目を個別に上書きできます。

例2：キャプション付きのランキング表に境界線を設定する

次の例では、caption要素で表題を付けたランキング表に、破線と実線を使い分けた境界線を設定しています。さらに、colspan属性を持つセルには box-shadow で内側に影を付けて強調しています。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: auto;
    caption-side: bottom;
    border: 2px dashed black;
}
td {
    border: 2px solid midnightblue;
    text-align: center;
}
td[colspan] {
    box-shadow: inset 0 0 10px lightblue;
    text-align: center;
}
caption {
    font-size: 16px;
    font-weight: bold;
}
</style>
</head>
<body>
<h2>Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Babar Azam</td>
<td>3</td>
</tr>
<tr>
<td>Ross Taylor</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2019</td>
</tr>
</table>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでテーブルに境界線を追加する方法

この例のポイントは以下の通りです。

  • caption-side: bottom; … 表題（キャプション）をテーブルの下部に配置
  • table に破線（dashed）、td に実線（solid） … 外枠とセルでスタイルを使い分け
  • td[colspan] … 属性セレクタにより、colspanを持つセルだけ内側に水色の影を追加

まとめ

CSSのborderプロパティを使えば、テーブル全体にもセル単位でも柔軟に境界線を設定できます。一括指定だけでなく、各辺ごとの細かい制御も可能なので、破線・点線・二重線などのスタイルを組み合わせて、目的に合った見やすいテーブルデザインを作りましょう。

  1. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;

  2. CSSのposition: stickyを使ってスクロール時にヘッダーを固定するHTMLテーブルの作り方

    HTMLテーブルでは、CSSのposition: stickyとtop: 0を組み合わせることで、縦方向にスクロールしてもヘッダー行（th要素）が常に画面上部に固定表示されるテーブルを簡単に実装できます。JavaScriptを使わずCSSだけで完結するため、コードもシンプルで保守性が高いのが特徴です。仕組みのポイント固定ヘッダーを実現するには、以下の2点が重要です。テーブル全体を包むコンテナ（div要素など）にoverflow-y: scrollを指定し、スクロール可能な領域を作る。ヘッダーセル（th要素）にposition: stickyとtop: 0を指定し、スクロール位置に追従して上部に