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