table 角丸の表を作成する コピペで使えるHTML+CSS

スポンサーリンク

CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。WordPressで使用する際の注意点も。

tableを角丸表にする

borderで枠線を引き、border-radiusで角丸にする。

1行目1列目1行目2列目1行目3列目
2行目1列目2行目2列目2行目3列目
3行目1列目3行目2列目3行目3列目
style属性で記述
<table style="border-collapse: separate; width: 80%; margin: auto; border: solid 20px #404040; border-radius: 20px; text-align: center;">
  <tbody>
    <tr>
      <td>1行目1列目</td>
      <td>1行目2列目</td>
      <td>1行目3列目</td>
    </tr>
    <tr>
      <td>2行目1列目</td>
      <td>2行目2列目</td>
      <td>2行目3列目</td>
    </tr>
    <tr>
      <td>3行目1列目</td>
      <td>3行目2列目</td>
      <td>3行目3列目</td>
    </tr>
  </tbody>
</table>

<table>に記述をする。WordPressなどを使っている場合、border-collapse: collapse; とデフォルトで設定されいることがある。border-radiusを使って角丸にする場合、border-collapse: separate; とする必要がある。角丸にならない場合は、追記してほしい。

正確な角丸表を作成する

上記の表では四隅の内側が直角になっている。内側についても角丸になるよう、設定する。そのためには、四隅の<td>の丸みを設定する。

1行目1列目1行目2列目1行目3列目
2行目1列目2行目2列目2行目3列目
3行目1列目3行目2列目3行目3列目
style属性で記述
<table style="border-collapse: separate; border: solid 4px #404040; border-radius: 20px; text-align: center;">
  <tbody>
    <tr>
      <td style="border-radius: 20px 0 0 0;">1行目1列目</td>
      <td>1行目2列目</td>
      <td style="border-radius: 0 20px 0 0;">1行目3列目</td>
    </tr>
    <tr>
      <td>2行目1列目</td>
      <td>2行目2列目</td>
      <td>2行目3列目</td>
    </tr>
    <tr>
      <td style="border-radius: 0 0 0 20px;">3行目1列目</td>
      <td>3行目2列目</td>
      <td style="border-radius: 0 0 20px 0;">3行目3列目</td>
    </tr>
  </tbody>
</table>

border-radius : 左上 右上 左下 右下 の順でborderの丸みを指定する。

<td>で四隅の丸みを設定しない(tableの丸みのみ)場合は以下のように表示されてしまう。

1行目1列目1行目2列目1行目3列目
2行目1列目2行目2列目2行目3列目
3行目1列目3行目2列目3行目3列目

※<tbody>,<tr>,<td>についてbackgroundを指定していない場合は<table>のborder-radius指定のみで角丸表は完成します。ただし、この方法では後にbackgroundを指定する際に修正が必要になり面倒です。四隅の<td>について、border-radiusで指定することを推奨します。

角丸20pxの<table>を作成する方法

  1. <table>についてborder-radius:20px と指定する
  2. 左上の<td>について border-radius: 20px 0 0 0; と指定
  3. 右上の<td>について border-radius: 0 20px 0 0; と指定
  4. 左下の<td>について border-radius: 0 0 0 20px; と指定
  5. 右下の<td>について border-radius: 0 0 20px 0; と指定

汎用性を持たせた角丸表スタイルシート

1行目1列目1行目2列目1行目3列目
2行目1列目2行目2列目2行目3列目
3行目1列目3行目2列目3行目3列目
スタイルシートで記述
<table class=".round-corner-table">
  <tbody>
    <tr>
      <td>1行目1列目</td>
      <td>1行目2列目</td>
      <td>1行目3列目</td>
    </tr>
    <tr>
      <td>2行目1列目</td>
      <td>2行目2列目</td>
      <td>2行目3列目</td>
    </tr>
      <td>3行目1列目</td> 
     <td>3行目2列目</td> 
     <td>3行目3列目</td> 
    </tr> 
  </tbody>
</table>
.round-corner-table{
  border-collapse: separate;
  border: solid 4px #404040; 
  border-radius: 20px; 
  text-align: center;
}
.round-corner-table tr:first-child td:first-child{ /* 最初のtr(行) かつ、最初の td(列) つまり、1行目1列目に適用*/
  border-radius: 20px 0 0 0; /* 左上から指定してゆく */
}
.round-corner-table tr:first-child td:last-child{ /* 最初のtr(行) かつ、最後の td(列) つまり、1行目3列目に適用*/
  border-radius: 0 20px 0 0;
}
.round-corner-table tr:last-child td:first-child{ /* 最後のtr(行) かつ、最初の td(列) つまり、3行目1列目に適用*/
  border-radius: 0 0 0 20px;
}
.round-corner-table tr:last-child td:last-child{ /* 最後のtr(行) かつ、最後の td(列) つまり、3行目3列目に適用*/
  border-radius: 0 0 20px 0;
}

※この方法で記述すれば、行や列が増えても問題なく角丸表を作成できる。ただし、<th>を用いる際は<th>について指定する必要がありますので注意が必要です。

caption、thを使用している場合の角丸表

borderで枠線を引き、border-radiusで角丸にする。<caption>については対象とならない。

野菜の栽培票
農場ニンジンキャベツ
みどり農場400120
きいろ農場100300
合計500420
style属性で記述
<table style="border-collapse: separate; border: solid 4px #404040; border-radius: 20px; text-align: center;>
  <caption>野菜の栽培票</caption>
  <thead>
    <tr>
      <th style="border-radius: 20px 0 0 0;">農場</th>
      <th>ニンジン</th>
      <th style="border-radius: 0 20px 0 0;">キャベツ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>みどり農場</td>
      <td>400</td>
      <td>120</td>
    </tr>
    <tr>
      <td>きいろ農場</td>
      <td>100</td>
      <td>300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th style="border-radius: 0 0 0 20px;">合計</th>
      <td>500</td>
      <td style="border-radius: 0 0 20px 0;">420</td>
    </tr>
  </tfoot>
</table>

対象要素の概要

table関連の要素

table tr td 表組み コピペで使えるHTML+CSS
テーブル表を作成するtable、trといった要素について解説。どちらが行でどちらが列かもわかりやすく。行と列の結合をするためのcolspan、rowspan属性の説明も。
caption th thead tfoot 表に意味を持たせる コピペで使えるHTML+CSS
テーブル表のcaptionやthead、tfoot、そしてth要素について使用すべき状況はどんな時かなどを解説。headers属性についても。

使用するCSSの概要

border-collapse

border-collapse セル境界線の表示形式 コピペで使えるHTML+CSS
table要素を調整するborder-collapseプロパティの仕組みを解説。separateとcollapseとではどのように表記が変わるのか?borderの数値をどのように設定すべきなのか?具体的にテーブルを表示して比較説明します。

border

border 枠線の表示 コピペで使えるHTML+CSS
CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。

border-radius

border-radius 角を丸くする コピペで使えるHTML+CSS
CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。