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>
テーブルの罫線を変更する - HTML
table{
    border: 2px solid #7facc9;
}

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

tbody td{
    border-bottom: 1px dashed #cccccc;
}
テーブルの罫線を変更する - CSS

関連記事