ホームへ

【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】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の太さを変える方法でした。

マンガで読める関連記事