table要素の枠線は、CSSプロパティのborderを使って指定することができます。

どうせなら、単純に囲うだけでなく、おしゃれにデザインしたいですよね。

今回は、CSSのborderを使用してtable要素の枠線を作成したい方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSプロパティのborderでtable要素の枠線を作成する方法が詳しくわかるようになりますよ。

ぜひ最後まで読んでくださいね！

table要素でborderを使うには

CSSプロパティのborderを用いて、table要素に枠線をつける方法を紹介します。

基本的には、tableタグで表を作成しただけでは、表の枠線は表示されません。

枠線の設定が「none」となっているためです。

試しに、以下の表にCSSで枠線の設定をしていきましょう。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <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>
</table>

CSSでは以下のように記述します。

table, th, td {
  border:1px solid #333;
}

table要素全体と、セルのtd・th要素にそれぞれ枠線が表示されましたね。

borderに線の種類と太さ、色を指定すると枠線を作れます。これは他の要素でも同様にできますね。

セル同士の枠線を重ねて1本にする方法は後で説明します。

また、table要素全体の枠線を削除して、セルにのみ表示したい場合には、

th, td {
  border:1px solid #333;
}

と書きます。これとは逆に、表の外側にのみ表示したい場合には、

table {
  border:1px solid #333;
}

と書きますね。表を囲う大枠にのみ線が追加されているのを確認してみてください。

table要素で使えるプロパティについて

borderプロパティで指定するだけでは、セル同士の枠線の間に隙間がありますね。

この隙間をなくす方法や隙間の大きさを変える方法を紹介します。

border-collapse

border-collapseは、表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定するCSSプロパティです。

値は以下の2つです。

先ほどのtable要素のHTMLを使って、CSSで指定します。

table {
  border-collapse: collapse;
  border: solid 2px #333;
}
th, td {
  border: dashed 1px #777;
}

「border-collapse: collapse」で枠線の間隔をなくし、表全体の枠線とセルの枠線の設定を別のものにしてみました。

solidは実線、dashedは点線を表示します。

borderのみの指定と異なり、枠線が重なっているのが確認できるでしょうか。

thとtdで、枠線の指定を変えてみるのも良いですね。

border-spacing

border-spacingは、隣接するセルの枠線の間隔を指定します。

間隔があるときに限られるため、「border-collapse: spacing」のときにのみ適用されます。

値は数値で指定ができます。2つ指定すると、それぞれ横方向と縦方向の指定になります。

table {
  border-collapse: spacing;
  border-spacing: 10px 5px;
  border: solid 2px #333;
}
th, td {
  border: solid 1px #777;
}

border-spacingを使って、枠線の間隔を横10px、縦5pxに指定しています

border-collapseの初期値はspacingですので、最初の指定はいらない場合が多いですね。

ですが、reset.cssなどを導入している場合、collapseで指定されていることがあるので確認しておきましょう。

table要素でborderを使ったアレンジ方法

ここまで、枠線の指定方法、調整方法を解説してきました。

基本的な使い方がわかっていただけたでしょうか？

ここでは、枠線を一部削除するなど、細かい指定の仕方を紹介します。

表を装飾したいときに参考にしてみてくださいね。

特定のテーブルセルの枠線を消す

表の枠線を一部だけ削除する方法を紹介します。

<table>
  <tr>
    <td>データ1-1</td>
    <td class="noborder">データ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 class="noborder">データ3-3</td>
  </tr>
</table>

CSSは以下のように記述します。

table, td {
  border: 1px solid #333;
}
.noborder {
  border: none;
}

削除したい要素にclass名を指定し、CSSで「border: none」を指定しています。

「データ1-2」「データ3-3」の枠線が消えているのが確認できますね。

線ごとに指定

今度はセルではなく、線ごとの指定を考えます。

表の枠線には縦線と横線がありますよね。この線ごとに指定を変えてみましょう。

表は先ほどのものを使います。

table {
  border-collapse: collapse;
  border: solid 2px #333;
}
td {
  border-right: solid 1px #555;
}

「border-right」を使ってセルの右側にのみに枠線を指定しています。

横線は表示されず、縦のセルが繋がって見えるようになりました。

「border-bottom」で指定すれば、横線のみになり、縦線は表示されません。

枠線を角丸にする

表全体を囲う大枠を角丸に設定します。

<table>
  <tr>
    <th>見出し1</th>
    <td>データ1-1</td>
    <td>データ1-2</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>データ2-1</td>
    <td>データ2-2</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>データ3-1</td>
    <td>データ3-2</td>
  </tr>
</table>

CSSは以下のように記述します。

table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
}
th, td {
  padding: 10px 25px;
  border-bottom: 1px solid #555;
}
th {
  background-color: #eee;
}
td {
  border-left: 1px solid #555;
}
tr:last-child th,
tr:last-child td {
  border-bottom: none;
}

table要素に枠線と「border-radius」を指定し、角を丸くしています。

ここでは、「border-collapse: separate」と指定しています。セルの枠線と重ねて表示するcollapseの場合では、角丸にはなりません。

ただ、間隔は0にしておく必要がありますね。

これだけでは、色を付けたセルがはみ出してしまうので、「overflow: hidden」を指定しています。

セルの枠線は、一番外側の枠はいらないので、「border-left」と「border-bottom」を用いて一部だけを表示させています。

枠線の指定を変えてどう変化するのか、確かめてみましょう。

まとめ：tableに枠線をつけて見やすい表を

今回は、CSSのborderプロパティを使ってtable要素の枠線を作成する方法を解説してきました。

一部だけ枠線を表示させるなど、装飾のアレンジ方法もいくつか紹介しましたね。

table要素に適切に枠線を追加すると、表全体が見やすくなります。

今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングスクールを比較／