[CSS] テーブルに枠線を引く

2019年10月4日

テーブルにCSSを使って枠線を引くサンプルです

サンプル

テーブルに枠線と背景色を付けたシンプルな例です。

例）テーブルに枠線と背景色を付ける

table.sample{
  border-collapse:collapse;
}

table.sample th{
  border:1px solid #000066;
  background:royalblue;
}

table.sample td{
  border:1px solid #000066;
  background:#ffffff;
}

table.sample{

border-collapse:collapse;

}

table.sample th{

border:1px solid #000066;

background:royalblue;

}

table.sample td{

border:1px solid #000066;

background:#ffffff;

}

<table class="sample">
  <tr><th>都道府県</th><th>県庁所在地</th><th>人口</th></tr>
  <tr><td>北海道</td><td>札幌市</td><td>1,952,255</td></tr>
  <tr><td>青森県</td><td>青森市</td><td>290,646</td></tr>
  <tr><td>岩手県</td><td>盛岡市</td><td>300,116</td></tr>
</table>

<tr><th>都道府県</th><th>県庁所在地</th><th>人口</th></tr>

</table>

【結果】

都道府県	県庁所在地	人口
北海道	札幌市	1,952,255
青森県	青森市	290,646
岩手県	盛岡市	300,116

備考

テーブルに枠線を引くときは、th、tdタグにborderを指定します。
他の枠線スタイルについては以下ページをご覧ください。
→ [CSS] 枠線スタイル一覧

CSS

Posted by tora