1. Home
  2. スタイルシート CSS
  3. テーブル
  4. 表の境界線を指定する

表の境界線を指定する


border: ***;

ブラウザ
IE
Fx
Sf
Cr
O
特性
border

border は、境界線の太さ、色、スタイルを一括で指定するプロパティです。

このプロパティをtable要素td要素th要素に対して設定すると、表に境界線を付けることができます。



table, td, th {
border: 2px #ff0000 solid;
}


プロパティ名 説明
border 太さ、色、スタイル 境界線(太さ、色、スタイル)を指定

境界線の指定方法については、「境界線の設定をひとまとめに行う」をご覧ください。

【適用範囲】

指定したスタイルは、次の範囲に適用されることになります。

■table要素とtd要素、th要素に指定した場合

table, td, th { border: 2px #808080 solid; }

表の大枠と各セルに境界線が付きます。

見出しセル1 見出しセル2
データセル1 データセル2

■table要素に指定した場合

table { border: 2px #808080 solid; }

表の大枠に境界線が付きます。

見出しセル1 見出しセル2
データセル1 データセル2

■td要素とth要素に指定した場合

td, th { border: 2px #808080 solid; }

各セルに境界線が付きます。

見出しセル1 見出しセル2
データセル1 データセル2

メモ

スタイルシートを利用できないユーザーのために、同時にborder属性を指定しておくことをお勧めします。


使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table, td, th { border: 2px #2b2b2b solid; }

</style>

</head>
<body>

<table border="1">
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>

</body>
</html>

表示例

見出しセル1 見出しセル2
データセル1 データセル2

テーブル

ページの先頭へ


inserted by FC2 system