HTML & CSS - テーブルの罫線を変更する

テーブルの罫線を変更する

テーブルの罫線を変更するには、CSS の border、または border-top、border-right、border-bottom、border-left プロパティで定義します。

border: 太さ 形状 色

要素のボックスに線を引く

border-top: 太さ 形状 色

ボックスの上辺に線を引く

border-right: 太さ 形状 色

ボックスの右辺に線を引く

border-bottom: 太さ 形状 色

ボックスの下辺に線を引く

border-left: 太さ 形状 色

ボックスの左辺に線を引く

線の太さは、数値と単位で指定します。単位には px が主に使われます。

線の形状は、solid (実線)、dotted (点線)、dashed (少し長い点線)、double (二重線) などがあります。線を引かない場合は none を指定します。

<table>
  <caption> 表のタイトル </caption>
  
  <thead>
    <tr>
      <th> 見出しセル </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> データセル </td>
    </tr>
  </tbody>
  
</table>

table{
    border: 2px solid #7facc9;
}

thead th{
    border-bottom: 2px solid #7facc9;
}

tbody td{
    border-bottom: 1px dashed #cccccc;
}