table

2024年01月16日(火) 09時35分更新 icon 項目のみ表示/展開表示の切り替え

線の太さ線種を指定(border,border-width)

border: 線の太さ 線種 色;
border-width: 線の太さ;

線種

none 枠線なし

hidden 枠線なし

solid 実線

double 二重線

dotted 点線

dashed 破線

groove

ridge

inset

outset

隣接セルのボーダを重ねるか間隔をあける(border-collapse)

　以下は隣接セルのボーダを重ねた場合と間隔をあけた場合を示しています。
　間隔がわかりやすいようにborder-spacingを設定しています。
明治大正
昭和平成

明治大正
昭和平成
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <style type="text/css">
  .TBL1{
    border:solid 1px black;
    border-collapse: collapse;
    border-spacing: 10px;
  }
  .TBL1 td{
    border:solid 1px blue;
  }
  .TBL2{
    border:solid 1px black;
    border-collapse: separate;
    border-spacing: 10px;
  }
  .TBL2 td{
    border:solid 1px blue;
  }
</style>
<div class="hascroll"><table class="TBL1">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>
<br />
<div class="hascroll"><table class="TBL2">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>

</body>
</html>

セルを詰める(padding)

　以下はセル余白がディフォルトの場合と0を指定した場合を示しています。
明治大正
昭和平成

明治大正
昭和平成
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <style type="text/css">
  .TBL3 td{
    border:solid 1px black;
  }
  .TBL4{
    border-collapse: collapse;
    border-spacing: 0px;
  }
  .TBL4 td{
    border:solid 1px black;
    padding:0px;
  }
</style>
<div class="hascroll"><table class="TBL3">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>
<br />
<div class="hascroll"><table class="TBL4">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>
</body>
</html>

行を詰める(line-height)

　以下は行間隔が160%の場合と100%の場合を示しています。
明治大正
昭和平成

明治大正
昭和平成
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <style type="text/css">
  .TBL5 td{
    border-collapse: collapse;
    border-spacing: 0px;
    line-height:160%;
  }
  .TBL6{
    border-collapse: collapse;
    border-spacing: 0px;
    line-height:100%;
  }
  .TBL6 td{
    border:solid 1px black;
    padding:0px;
  }
</style>
<div class="hascroll"><table class="TBL5">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>
<br />
<div class="hascroll"><table class="TBL6">
<tbody><tr><td>明治</td><td>大正</td></tr>
<tr><td>昭和</td><td>平成</td></tr>
</tbody></table></div>

</body>
</html>