表(table)の作り方と装飾の変え方まとめ【HTML&CSS】

テーブルの作り方

今回はWebサイトやブログでを作る方法を解説します。1ずつ丁寧に解説していくので、HTML/CSS初心者の方もご安心ください。

1. tableの使い方

<table>はHTMLのタグの1つです。<tr><th><td>などのタグと合わせて使うことで表を作ります。タグの名前が似ていて分かりづらいんですよね…。

1-1. それぞれのタグの意味

表の考え方

それぞれのタグをどこで使うのか図にしてみました。全体はtableで囲み、行のカタマリはtrで、表の見出し文字はthで、各セルはtdではさみます。

もう少し詳しくまとめてみます。

各タグの略称と解説

  • table:表全体をはさむ。<table>〜</table>の範囲が表となる。
  • tr:Table Rowの略。行全体をはさむ。いくつ使ってOK。
  • th:Table Headerの略。trの中で使う。はさまれた部分は見出しセルとなる。
  • td:Table Dataの略。trの中で使う。はさまれた部分が表の中身のセルとなる。いくつ使ってOK。

「trの数=表の行数」となります。「1つのtr内に含まれるtdやtrの数=列の数」になります。名前が似ているので混乱してきますね…。

1-2. 書き方

実際に例を見てみるのが分かりやすいかもしれません。試しに簡単な表を作ってみます。

HTML
<table border="1">
	<tr>
		<th>果物</th><th>味</th>
	</tr>
	<tr>
		<td>イチゴ</td><td>甘い</td>
	</tr>
	<tr>
		<td>レモン</td><td>酸っぱい</td>
	</tr>
</table>

テーブルの例

▼ 例の解説「見出しセルのth」と「中身のセルのtd」は同じようにtrの中に入れます。それぞれの段(tr内)に含めるセルの数は統一するようにしましょう。でなければレイアウトが崩れてしまいます。tableタグ内のborder="1"については後ほど解説するので、一旦無視してくださいませ。

tableの解説

このように対応しているわけですね。この例ではそれぞれの段に入るth・tdの数は2つになっています。

1-3. 見出し(th)は使わなくてもOK

thを表す画像

見出しがいらないときは、thを書かなければOKです。thをはさんでいるtrもいりません。

さきほどの例から<tr><th>....</th></tr>をごそっと取り除いてみます。

HTML
<table border="1">
	<tr>
		<td>イチゴ</td><td>甘い</td>
	</tr>
	<tr>
		<td>レモン</td><td>酸っぱい</td>
	</tr>
</table>

見出しを除いた例

見出しの無い表となりました。

2. 行や列の数を増やす

表の列数と行数は、tr td thを使う数によって勝手に変わります。いくつか例を見てみましょう。

▼ 例1:4×4の表に

見出しを含めて4×4の表にしたいときは、以下のように書きます。

  • tableの中にtrを4つ作る(trの数=行数)
  • 4つのうちの1つのtrの中にはthを4つ作る(=見出しに)
  • 残りに3つのtrにはtdを4つずつ入れる(=中身のセルに)

これをふまえてコードを書いてみます。

HTML
<table border="1">
	<tr>
		<th>果物</th><th>味</th><th>色</th><th>人気</th>
	</tr>
	<tr>
		<td>イチゴ</td><td>甘い</td><td>赤色</td><td>◎</td>
	</tr>
	<tr>
		<td>リンゴ</td><td>甘い</td><td>赤色</td><td>◯</td>
	</tr>
	<tr>
		<td>レモン</td><td>酸っぱい</td><td>黄々</td><td>△</td>
	</tr>
</table>

行と列の数が変わった例

1つの<tr>〜</tr>の中にはthもしくはtdが4つ並んで入るわけですね。

▼ 例2:1行しかない表に

今度は2マスしか無い表を作ってみましょう。

HTML
<table border="1">
	<tr>
		<td>イチゴ</td><td>甘い</td>
	</tr>
</table>

1行の表を作る

さすがに2マスだと表にする意味が無くなってしまうような気もしますが、こんなこともできるんだな程度に頭に入れておきましょう。

3. 表の余白を変える

tabletrのタグの中に直接スタイル指定を書きこむこともできるのですが、表を作るたびにタグに色々と書き込むのは面倒です。というわけでCSSで表の余白やデザインを指定する方法を紹介していきます。

セルの余白を変える

このように1つ1つのセルの余白を大きくしてみましょう。

表のpaddingの指定

見出しの1つ1つのセル内の余白を変えたいときは、thにpaddingを指定します。それ以外のセルの余白を変えたいときは、tdにpaddingを指定します。

paddingの使い方についてはこちらの記事が参考になるはずです。

それでは実際にコードを書いてみましょう。

HTML
<table border="1">
	<tr>
		<th>果物</th><th>味</th><th>色</th>
	</tr>
	<tr>
		<td>イチゴ</td><td>甘い</td><td>赤色</td>
	</tr>
	<tr>
		<td>リンゴ</td><td>甘い</td><td>赤色</td>
	</tr>
</table>
CSS
table th {/*table内のthに対して*/
	padding: 10px;/*上下左右10pxずつ*/
}

table td {/*table内のtdに対して*/
	padding: 3px 10px;/*上下3pxで左右10px*/
}

ブラウザ表示例

セルまわりの余白が大きくなりました。このように文字まわりの余白を指定することで、tableのサイズを変えることができるのですね。

4. 表の装飾を変える

次に表まわりの装飾を変えてみたいと思います。

4-1. 文字色を変える

まず文字色を変えたいと思います。

table全体の文字色を変えたい場合

⇒CSSでtableに対してcolorを指定します。

CSS
table {
	color: skyblue
	}
/*余白指定は省略*/

表の文字色を変える

ちなみにtr,td{color:~}としても同じ装飾となります。

見出しと他のセルで別の色にする

thtr別々に指定すれば、以下のように違う色を指定することもできます。

CSS
table th{/*thに対して*/
	color: skyblue;
	}

table td{/*tdに対して*/
	color: gray;
	}
/*余白指定は省略*/

別々の文字色を指定

4-2. セルの背景色を変える

文字色とほとんど同じなので説明するまでも無いかもしれませんが一応…。背景色の指定にはbackgroundを使います。見出し(th)の背景色だけを少しベージュっぽくしてみましょう。

CSS
table th{/*thに対して*/
	color: #FF9800;/*文字色*/
	background: #fff5e5;/*背景色*/
}
/*余白指定は省略*/

セルの背景色を変える

4-3. 文字を中央寄せする

左寄せになっている

見出し(th)以外は初期設定が左寄せとなっています(さきほどの例では各セルの文字の長さが同じだったので中央寄せに見えていたのです。)

全てのセルの文字を中央寄せしたいときには、以下のようにtableに対してtext-alignを指定しましょう。

CSS
table {
	text-align: center;
}
th {
	color: #FF9800;/*文字色*/
	background: #fff5e5;/*背景色*/	
}
/*余白指定は省略*/

サルワカ 🔊 26

⇡中央寄せになりました。

5. 表の枠線の見た目を変える

borderについて

上の例のHTMLコードではtableタグの中にborderという属性が入っていました。これは表の枠線の太さを決めるものです。border="1"というのは 「線の太さを1pxに」という指定になります(border="0"にすると線が消えます)。

とはいえタグ内で装飾指定をするのは後から変えたくなったときなどに面倒です。線の設定は全てCSSでするのが良いでしょう。というわけでtableタグのborderは消して、CSSで指定する方法を紹介します。

5-1. 線の色や太さを指定する

以下のようにthtdに対してborderを指定します。1つ1つのセルの周りに線をつけているというイメージですね。tableタグにborder属性などを書かないようにしましょう。

HTML
<table>
〜略〜
</table>
CSS
table th, table td {
	border: solid 1px black;
	/*実線 1px 黒*/
}
/*余白と文字装飾は省略*/

表の線を変える

これだけだと線と線の間に隙間が出来てしまっています。

5-2. 隙間を無くして一重線にする

一重線に変えるにはtableに対してborder-collapse: collapseと指定します。border-collapseは線の間に隙間を作るかどうかを決めるCSSのプロパティです。

CSS
table {
	border-collapse: collapse;
}
table th, table td {
	border: solid 1px black;
	/*実線 1px 黒*/
}
/*余白と文字装飾は省略*/

一重線に

無事に一重線になりました。あとは線の太さを変えるなり、色を変えるなり自由にスタイリングしましょう。

▼スタイリング例

CSS
table {
	border-collapse: collapse;
	border: solid 2px orange;/*表全体を線で囲う*/
}
table th, table td {
	border: dashed 1px orange;/**/
	/*破線 1px オレンジ*/
}
/*余白と文字装飾は省略*/

線のスタイリング例

各セルのまわりの罫線を点線(dashed)にしてみました。表全体を別の線で囲いたいときは、table{border:~}と指定します。

6. 複数のセルを結合する

複数のセルを繋げる

複数のセルをつなげて1つのセルにすることもできます。重複する項目があるときに便利ですね。

6-1. rowspanで縦方向につなげる

縦方向に並ぶ複数のセルをつなげたいときは、つなげる起点となるthもしくはtdタグにrowspan="つなげるセル数"と書き込みます。

表を結合する例

例えばこの図のように「甘い」というセルを2つ結合したい場合は、上側のtdタグの中にrowspan="2"と書き込みます。これで指定したセルが縦に2倍の大きさとなります。

その下のtd(リンゴの右隣)は消します。でないと下にはみ出てしまいます。

▼コード例

HTML
<table>
	<tr>
		<th>果物</th><th>味</th><th>色</th>
	</tr>
	<tr>
		<td>イチゴ</td><td rowspan="2">甘い</td><td>赤色</td>
	</tr>
	<tr>
		<td>リンゴ</td><!--td消す--><td>赤色</td>
	</tr>
	<tr>
		<td>レモン</td><td>酸っぱい</td><td>黄色</td>
	</tr>
</table>

セルを結合する例

セルが縦につながりました。このときCSSの指定はとくに変える必要はありません。

6-2. colspanで横につなげる

colspanで横につなげる

横につなげたいときはcolspanを使います。使い方はrowspanと全く同じでthかtdタグのどちらかにcolspan="つなげる数"と書き込みます。名前が似ていて覚えづらいですね…。

起点にcolspanを書く

たとえば、この例だと「果物」の隣のthにcolspan="2"と書きます。これでセルが2つ分の大きさになります。右隣のthは消すことになります。

▼使用例

少し変わった表現にしてみます。trタグ(=行)を1番上にもう1つ増やし、その中に3セル分の大きさの見出しセルを入れてみます。

HTML
<table>
	<tr>
		<th colspan="3">果物</th>
	</tr>
	<tr>
		<th>名前</th><th>特徴</th><th>色</th>
	</tr>
	<tr>
		<td>イチゴ</td><td>甘い</td><td>赤色</td>
	</tr>
	<tr>
		<td>リンゴ</td><td>甘い</td><td>赤色</td>
	</tr>
	<tr>
		<td>レモン</td><td>酸っぱい</td><td>黄色</td>
	</tr>
</table>

セルを横につなげる例

どこかで使えそうな表現ですね。

7. テーブルの幅を変える

最後に表の幅を変える方法を紹介します。

tableの幅を変える

表全体の幅を変えるには、tableに対してwidthを指定します。たとえば、表全体の幅を300pxにしたいときはtable {width:300px}と書きます。すると各列の大きさが自動調整されて、全体の幅がぴったり300pxになります。

CSS
table{
	width:300px
	}
/*装飾指定などは略*/

幅が300pxの幅が出来上がる

↑横幅300px

合計幅が300pxになるように自動でセルの幅が調整されています。

レスポンシブデザインにするときは

table {width: 100%}とすれば、親要素にピッタリとはまってくれます。つまりレスポンシブデザインであってもコンテンツの幅に応じて表の大きさも調整されるわけですね。

サルワカくんの顔(通常)
サルワカくん

スマホでの見やすさを考えて表をスクロールできるようにすることもできます。これは別の記事で解説しますね。

サルワカ