HTMLテーブルの境界線
HTMLテーブルには、さまざまなスタイルや形状の境界線を付けることができます。
境界線を追加する方法
テーブルに境界線を追加するときは、各テーブルセルの周囲にも境界線を追加します。
境界線を追加するには、、、および
要素でCSSborder
プロパティを
使用します。table
th
td
例
table, th, td
{
border: 1px solid black;
}
折りたたまれたテーブルの境界線
上記の例のように二重の境界線が表示されないようにするには、CSSborder-collapse
プロパティをに設定しcollapse
ます。
これにより、境界線が1つの境界線に折りたたまれます。
例
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
スタイルテーブルの境界線
各セルの背景色を設定し、境界線を白色(ドキュメントの背景と同じ)にすると、境界線が見えない印象になります。
例
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
ラウンドテーブルの境界線
プロパティを使用するborder-radius
と、境界線の角が丸くなります。
例
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
table
cssセレクターから除外して、テーブルの周囲の境界線をスキップします。
例
th, td {
border: 1px solid
black;
border-radius: 10px;
}
点線のテーブルボーダー
プロパティを使用するborder-style
と、境界線の外観を設定できます。
次の値が許可されます。
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
例
th, td {
border-style: dotted;
}
ボーダの色
このborder-color
プロパティを使用すると、境界線の色を設定できます。
例
th, td {
border-color: #96D4D4;
}