【初心者向け】CSSでtableの枠線の太さを変える方法｜borderの使い方と実例付きで解説

Webページで表を使うとき、「枠線（ボーダー）の太さを変えたい」と思ったことはありませんか？

でも、いざCSSで書こうとすると…

• borderってどこに書くの？
• 枠線の太さはどう指定するの？
• 内側だけ細く、外枠だけ太くできる？

といった疑問が出てくるはずです。

この記事では、HTMLテーブルの枠線の太さをCSSで自在に変える方法を、実例とともにわかりやすく解説します！

基本：table全体の枠線を太くする

<table class="my-table">
  <tr>
    <td>りんご</td>
    <td>みかん</td>
  </tr>
</table>

.my-table {
  border: 3px solid #000; /* ←ここで太さを指定（今回は3pxの太さ） */
  border-collapse: collapse; /* 枠線を重ねない */
}
.my-table td {
  border: 1px solid #000;
}

ポイント

• border-collapse: collapse;を指定すると、二重線が消え、スッキリしたデザインになります。
• tableタグには外枠（親枠）の太さを指定、tdに個別の線を指定できます。

外枠だけ太く、内枠は細くする方法

.my-table {
  border: 4px solid #000; /* 外枠：太め */
  border-collapse: collapse;
}
.my-table td {
  border: 1px solid #aaa; /* 内枠：細め */
}

このように、外枠と内枠で太さや色を分けることで、よりメリハリのあるデザインにできます。

枠線の太さを場所ごとに変える

CSSでは、次のように上下左右の枠線を個別に設定することもできます：

td {
  border-top: 2px solid red;
  border-bottom: 2px solid blue;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
}

応用：最初の行だけ枠線を太くする

.my-table tr:first-child td {
  border-top: 3px solid black;
}

行や列ごとに枠線を変える（クラスで制御）

<tr class="highlight-row">
  <td>特別行</td>
  <td>注目！</td>
</tr>

.highlight-row td {
  border: 2px solid orange;
}

こうすれば、「目立たせたい行だけ」太線にすることもできます。

よくある間違いと解決法

まとめ：CSSでtableの枠線を自在にコントロールしよう！

CSSを使えば、HTMLの<table>の枠線も、太さ・色・場所ごとに自由に調整できます。

覚えておきたいポイントは以下の通り：

• border: ○px solid 色; で太さを指定
• border-collapse: collapse; でスッキリとした表に
• tdやtrごとに太さを変えることも可能

CSSのtable装飾は、見やすさ・デザイン性アップにも直結する大事な要素です。
今回の知識を活かして、あなたのWebページをさらに美しく、整ったものにしていきましょう。

この記事が少しでも参考になったら嬉しいです。