表（テーブル）の作り方を解説【HTML / CSS】

表の作り方

テーブルタグは、HTMLタグの一つで多くの場合表を作る時に使用されます。

料金表や、フォームを作る場合、コーポレートサイトでは会社概要など、

少し気にして見てみると様々なサイトで使用されているのが分かりますね。

今回はテーブル（表）の書き方を紹介します。

タグの意味

テーブルは基本的に <table> <tr> <th> <td> の4つのタグで構成されています。

 <table>

Table（テーブル）、表全体を囲むタグ <table>〜</table>の範囲が表になる。

<tr>

Table Row（テーブルロウ）、行を囲むタグ行の分だけ必要。

<th>

Table Header（テーブルヘッダー）、見出しのタグ。 <tr>~</tr>の中で使用し、見出しセルになる。

CSSなどでカスタマイズする場合は便利な場合もあるので、使い方に合わせて使用するのがおすすめです。（以下で説明）

<td>

Table Data（テーブルデータ）、中身のタグ。 <tr>~</tr>の中で使用し、中身のセルになる。

書き方

簡単な表を作ってみましょう。

See the Pen mdRqbJz by FLD (@freeladay) on CodePen.

HTML

<table border="1">
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
  <td>コーヒー</td><td>¥250</td>
 </tr>
</table>

基本の表の作りです。

ここから好みに応じてカスタマイズしていきます。

行を追加する

See the Pen rNjYBLj by FLD (@freeladay) on CodePen.

HTML

<table border="1">
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
  <td>コーヒー</td><td>¥250</td>
 </tr>
 <tr>
  <td>紅茶</td><td>¥300</td>
 </tr>
</table>

行を追加したい場合は<tr></tr>を追加します。

列を追加する

See the Pen jOBrGMw by FLD (@freeladay) on CodePen.

HTML

<table border="1">
 <tr>
  <th>商品名</th><th>価格</th><th>杯数</th>
 </tr>
 <tr>
  <td>コーヒー</td><td>¥250</td><td>1杯</td>
 </tr>
 <tr>
  <td>紅茶</td><td>¥300</td><td>２杯</td>
 </tr>
</table>

列を追加したい場合は<tr></tr>の中に追加します。

表のデザインをカスタマイズする

ここからは、元の表からのカスタマイズ方法を紹介します。

線の太さや色を変える

See the Pen WNRXeZv by FLD (@freeladay) on CodePen.

まず、表をCSSで整える為にborder=”0″にして、線を消します。

See the Pen RwKjbLv by FLD (@freeladay) on CodePen.

CSS

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

thとtdにそれぞれ1pxの線を黒で指定した場合です。

線の隙間をなくす

See the Pen WNRXedQ by FLD (@freeladay) on CodePen.

CSS

table {
border-collapse: collapse;
}

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

border-collapseは線の間に隙間を作るかどうかを決めるものです。

tableにborder-collapse: collapseを指定することにより隙間がなくなります。

文字色や背景色を変える

テーブル（table）セル全体の文字色を変える

See the Pen jOyaNxr by FLD (@freeladay) on CodePen.

CSS

table{color:#33ccff;}

 

見出し（th）セルの文字色を変える

See the Pen XWpzrYz by FLD (@freeladay) on CodePen.

CSS

table th{color:#33ccff;}

 

中身のセル（td）の文字色を変える

See the Pen wvgPwYa by FLD (@freeladay) on CodePen.

CSS

table td{color:#33ccff;}

 

thセルの背景色を変える

See the Pen qBRVWLM by FLD (@freeladay) on CodePen.

CSS

table th{background:#a5becc;}

セル内の余白を変える

See the Pen VwPrZgR by FLD (@freeladay) on CodePen.

CSS

table th{padding:15px;}
table td{padding:10px;}

余白をつけると、より表が整って見えてきます。

セルを結合する

セルの結合方法を紹介します。

横方向に結合する

See the Pen vYgWBPw by FLD (@freeladay) on CodePen.

HTML 

<table border="1">
　<tr>
　　<th colspan="3">商品</th>
　</tr>
　<tr>
　　<td>コーヒー</td><td>¥250</td><td>1杯</td>
　</tr>
　<tr>
　　<td>紅茶</td><td>¥300</td><td>2杯</td>
　</tr>
</table>

 thセルを横に3つ結合しました。

結合する場合、必要のない他2つのセルは削除します。

縦方向に結合する

See the Pen jOyaNoy by FLD (@freeladay) on CodePen.

HTML

<table border="1">
　<tr>
　　<th colspan="3">商品</th>
　</tr>
　<tr>
　　<td>コーヒー</td><td>¥250</td><td rowspan="2">1杯</td>
　</tr>
　<tr>
　　<td>紅茶</td><td>¥300</td>
　</tr>
</table>

tdセルを縦に2つ結合しました。

表の幅を変える

See the Pen abpVogj by FLD (@freeladay) on CodePen.

CSS

table{ width:350px; }

表全体で350pxになるようにセルの幅が調整されます。

もちろん、th、tdそれぞれに幅を指定することも可能です。

まとめ

テーブルタグはウェブデザインでも頻繁に出てくるタグです。

使用する場面に合わせてカスタマイズしながら、様々な表を作ってみてくださいね。