記事内に商品プロモーションが含まれる場合があります
今回はWebサイトやブログで表を作る方法を解説します。1ずつ丁寧に解説していくので、HTML/CSS初心者の方もご安心ください。
1. HTMLの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. 書き方
実際に例を見てみるのが分かりやすいかもしれません。試しに簡単な表を作ってみます。
<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"については後ほど解説するので、一旦無視してくださいませ。
このように対応しているわけですね。この例ではそれぞれの段に入るth・tdの数は２つになっています。
1-3. 見出し（th）は使わなくてもOK
見出しがいらないときは、thを書かなければOKです。thをはさんでいるtrもいりません。
さきほどの例から<tr><th>....</th></tr>をごそっと取り除いてみます。
<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つずつ入れる（＝中身のセルに）
これをふまえてコードを書いてみます。
<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マスしか無い表を作ってみましょう。
<table border="1"> <tr> <td>イチゴ</td><td>甘い</td> </tr> </table>
さすがに2マスだと表にする意味が無くなってしまうような気もしますが、こんなこともできるんだな程度に頭に入れておきましょう。
3. 表の余白を変える
tableやtrのタグの中に直接スタイル指定を書きこむこともできるのですが、表を作るたびにタグに色々と書き込むのは面倒です。というわけでCSSで表の余白やデザインを指定する方法を紹介していきます。
このように1つ1つのセルの余白を大きくしてみましょう。
見出しの1つ1つのセル内の余白を変えたいときは、thにpaddingを指定します。それ以外のセルの余白を変えたいときは、tdにpaddingを指定します。
paddingの使い方についてはこちらの記事が参考になるはずです。
それでは実際にコードを書いてみましょう。
<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を指定します。
table {
color: skyblue
}
/*余白指定は省略*/
ちなみにtr,td{color:~}としても同じ装飾となります。
見出しと他のセルで別の色にする
thとtr別々に指定すれば、以下のように違う色を指定することもできます。
table th{/*thに対して*/ color: skyblue; } table td{/*tdに対して*/ color: gray; } /*余白指定は省略*/
4-2. セルの背景色を変える
文字色とほとんど同じなので説明するまでも無いかもしれませんが一応…。背景色の指定にはbackgroundを使います。見出し（th）の背景色だけを少しベージュっぽくしてみましょう。
table th{/*thに対して*/ color: #FF9800;/*文字色*/ background: #fff5e5;/*背景色*/ } /*余白指定は省略*/
4-3. 文字を中央寄せする
見出し（th）以外は初期設定が左寄せとなっています（さきほどの例では各セルの文字の長さが同じだったので中央寄せに見えていたのです。）
全てのセルの文字を中央寄せしたいときには、以下のようにtableに対してtext-alignを指定しましょう。
table {
text-align: center;
}
th {
color: #FF9800;/*文字色*/
background: #fff5e5;/*背景色*/
}
/*余白指定は省略*/
⇡中央寄せになりました。
5. 表の枠線の見た目を変える
上の例のHTMLコードではtableタグの中にborderという属性が入っていました。これは表の枠線の太さを決めるものです。border="1"というのは 「線の太さを1pxに」という指定になります（border="0"にすると線が消えます）。
とはいえタグ内で装飾指定をするのは後から変えたくなったときなどに面倒です。線の設定は全てCSSでするのが良いでしょう。というわけでtableタグのborderは消して、CSSで指定する方法を紹介します。
5-1. 線の色や太さを指定する
以下のようにthとtdに対してborderを指定します。1つ1つのセルの周りに線をつけているというイメージですね。tableタグにborder属性などを書かないようにしましょう。
<table> 〜略〜 </table>CSS
table th, table td {
border: solid 1px black;
/*実線 1px 黒*/
}
/*余白と文字装飾は省略*/
これだけだと線と線の間に隙間が出来てしまっています。
5-2. 隙間を無くして一重線にする
一重線に変えるにはtableに対してborder-collapse: collapseと指定します。※ border-collapseは線の間に隙間を作るかどうかを決めるCSSのプロパティです。
table {
border-collapse: collapse;
}
table th, table td {
border: solid 1px black;
/*実線 1px 黒*/
}
/*余白と文字装飾は省略*/
無事に一重線になりました。あとは線の太さを変えるなり、色を変えるなり自由にスタイリングしましょう。
▼スタイリング例
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="つなげるセル数"と書き込みます。
例えばこの図のように「甘い」というセルを２つ結合したい場合は、上側のtdタグの中にrowspan="2"と書き込みます。これで指定したセルが縦に２倍の大きさとなります。
その下のtd（リンゴの右隣）は消します。でないと下にはみ出てしまいます。
▼コード例
<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を使います。使い方はrowspanと全く同じでthかtdタグのどちらかにcolspan="つなげる数"と書き込みます。名前が似ていて覚えづらいですね…。
たとえば、この例だと「果物」の隣のthにcolspan="2"と書きます。これでセルが2つ分の大きさになります。右隣のthは消すことになります。
▼使用例
少し変わった表現にしてみます。trタグ（＝行）を１番上にもう1つ増やし、その中に3セル分の大きさの見出しセルを入れてみます。
<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に対してwidthを指定します。たとえば、表全体の幅を300pxにしたいときはtable {width:300px}と書きます。すると各列の大きさが自動調整されて、全体の幅がぴったり300pxになります。
table{
width:300px
}
/*装飾指定などは略*/
↑横幅300px
合計幅が300pxになるように自動でセルの幅が調整されています。
レスポンシブデザインにするときは
table {width: 100%}とすれば、親要素にピッタリとはまってくれます。つまりレスポンシブデザインであってもコンテンツの幅に応じて表の大きさも調整されるわけですね。
スマホでの見やすさを考えて表をスクロールできるようにすることもできます。これについては「HTMLのテーブル・コンプリートガイド」が参考になるのではないかと思います。
