TECH I.S.

HTML 表の境界線


HTML テーブルには、さまざまなスタイルと形状の境界線を含めることができます。


ボーダーを追加する方法

表に罫線を追加すると、表の各セルの周囲にも罫線が追加されます。

ボーダーを追加するには、tablethtd要素にCSSのborderプロパティを使用します:

table, th, td{   border: 1px solid black; }


折りたたまれた表の境界線

上記の例のように二重の境界線が表示されないようにするには、CSSの border-collapseプロパティをcollapseに設定します。

これにより、境界線が単一の境界線に折りたたまれます。

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; }


CSSセレクターからtableを除外してテーブルの周りの境界線をスキップします

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

border-colorプロパティで、境界線の色を設定できます。

 th, td {   border-color: #96D4D4; }



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細