tableタグの中にborderを入れる方法

HTMLでは、tableタグと言ってセルを作る事が可能です。

その中で、borderの入れ方で「思ったように挿入する事ができない」と言う方向けに今回は、tableタグの中にborderを入れる方法を解説していきたいと思います。

 

2分で解決すると思います。

それでは書いていきます。

Tableとは

ここは、既に分かる方もいると思いますがTableとはセルで作られた表の事です。

TableにBorderを入れる方法

ボーダーを入れる方法は下記のとおりです。

<table border=”1″ >

このように入れると、周りに二重線の枠が出来ます。

確認してみてください。

tableタグの中に、border=”(数字)” を書き込むだけです。

さらに、二重線だと見にくいという方は読み進めて下さい。

Borderを二重線から一つの線に変更

ボーダーを二重線から一つの線に変更する方法は下記です。

<table border=“1” style=bordercollapse: collapse>

こちらのコードをコピペしてtableタグに上書きすれば一つの線が出来ます。

WEBデザインとして見栄えを良くしたい方は、下記に色の指定方法を解説しておきました。

Borderの色指定

Borderの色の指定は、border-colorを使います。

<table border=“1” style=bordercollapse: collapse; bordercolor: (色の値)>

こんな感じです。

簡単ですね!

これらは覚える必要はありません。

分かりやすく解説している記事を一つ見つけて、調べていたらなんとなく覚えてきた程度を目指せばいいでしょう!

それでは、今回はこれで終了になります。