【CSS/html】tableのborderの太さを変える方法
tableは表をつくるhtmlタグです。
表によっては枠線の太さを太くしたいこともあるでしょう。
tableのborderの太さを変える方法を解説します。
【html】border属性の値を変える
htmlのtableにborder属性をつけて、その値を変えると線の太さが変わります。
| セル | セル |
| セル | セル |
<table border="1" cellspacing="0">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>| セル | セル |
| セル | セル |
<table border="3" cellspacing="0">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>borderはtable、tdそれぞれについています。
「cellspacing="0"」を指定するとtableとtdの隙間が無くなり、1本の線にできます。
それでも線と線がくっついた状態であるため、指定した値の2倍の太さになってしまいます。
また、tableのborder属性はhtml5からは太さを指定するものではなく、線があるかないかを示すものとなっています。よって1か未指定が適切なものとなります。
以上2つの理由により、CSSで線の太さを指定する方法をおススメします。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【CSS】border-widthの値を変える
tdのborder-widthの値を変えると線の太さが変わります。
| セル | セル |
| セル | セル |
<style>
.example{
border-collapse: collapse;
}
.example td{
border: 1px solid #333;
}
</style>
<table border="1" class="nocss example">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>| セル | セル |
| セル | セル |
<style>
.example3{
border-collapse: collapse;
}
.example3 td{
border: 3px solid #333;
}
</style>
<table border="1" class="example3">
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>まず、tableに「border-collapse: collapse」を指定するとtableとtdの線が共有され1本の線になります。
線を指定するにはtdにborderを指定します。
borderは下記のように、太さ・線の種類・色を一行で指定できます。
border:1px solid #333
この「太さ」の部分（border-width）の数値を変えることで線の太さを変えることができます。
borderについて詳しくはこちら↓
【まとめ】tableのborderの太さを変える方法
html
tableにcellspacing="0"を指定し、border属性の値を変える
CSS
tableにborder-collapse:collapse、tdにborderを指定、そのborderのborder-widthの値を変える
以上、tableのborderの太さを変える方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
