Webサイトで表(テーブル)を作成したい。
コピペで済むようなサンプルがあればわかりやすいなぁ。
あと、スマホではレスポンシブでスライドできる表が必要そうです。
Webサイトで表を挿入したい！
WordPressでプラグインなしで自分の思った通りの表を作りたい。
そんな方のために、今回の記事では
- 表（テーブル）の基本的な作り方
- 表のデザインの変更方法（デザイン例も）
- 表に斜線を引く方法
- 表のセルを繋げる方法
- レスポンシブ対応の表の作り方
まで、表に関するあれこれを解説していきます。
合わせて読みたいポートフォリオを公開するならConoHa WINGで30分で完了！【HTMLやWordPressも】
HTMLの表(table)の作り方
プラグインを使用しないので、HTMLを使用して作っていく方法を紹介します。
表は、色々なタグを組み合わせて作成していきます。
表に関するそれぞれのタグの意味
表は、以下のような構成で成り立っています。
詳しく説明します。
- table：表全体を表します。
- tr：Table Rowの略で、行を表します。
- th：Table Headerの略で、見出しを表します。
- td：Table Dataの略で、表の中身のセルを表します。
多くて嫌ですが、どういう意味のタグかを知っておくと楽です。
表のHTMLの基本的な書き方
HTMLで、以下の画像のような基本的な表を書く方法をまずは紹介します！
table、tr、th、tdを駆使しつつ、HTMLを書いていきます。
<table>
<tr>
<th>商品</th><th>値段</th>
</tr>
<tr>
<td>りんご</td><td>120円</td>
</tr>
<tr>
<td>バナナ</td><td>100円</td>
</tr>
</table>また、CSSは以下の通りです。枠線に関する設定です。
table, th, td{
border: 1px solid #000;
}とはいえ、この表は本当に基本中の基本。
自分でデザインを変更できるような方法も紹介していきますので、引き続き読んでみてください。
なお、CSSの基本がサッパリ分からない方は以下の記事を参考にしてください！
表の列数・行数を増やしたいとき
表の列数・行数を増やしたいと思った場合は、タグの数を変化させればOK
例として、以下のような4×3の表の作り方を説明します。
HTMLは以下のようになります。（CSSについては、見出し1と同じです）
<table>
<tr>
<th>商品</th><th>値段</th><th>味</th><th>備考</th>
</tr>
<tr>
<td>りんご</td><td>120円</td><td>甘い</td><td>青森県産</td>
</tr>
<tr>
<td>バナナ</td><td>100円</td><td>あま～い</td><td>フィリピン産</td>
</tr>
<tr>
<td>いちご</td><td>500円</td><td>甘酸っぱい</td><td>栃木県産</td>
</tr>
</table>4列なので、thおよびtdは4つ。
3行なので、<tr>～</tr>の部分が3つあるということですね。
これで、基本的な表の骨組みは自由に作れます。
次に、デザインを整えていく方法について解説していきます。
表のデザインをおしゃれにするCSS
このままでは見にくい表ですので、表のデザインを整えていく方法について説明します。
表の余白の設定するCSS
表のセルと、線の間がキツイので、余白をとって以下のような表にしましょう。
HTMLは関係ないので載せません（見出し1と同じです)
CSSで、以下のように設定することで余白を取ることができます。
th{
padding: 5px 7px;/*見出しに関する余白*/
}
td{
padding: 3px 5px;/*その他のセルに関する余白*/
}padding: 上下の余白 左右の余白;という書き方になっています。
これで多少は見やすくなりました。
表を1重線にするCSS
ここまでの表に対して違和感を覚えた人もいるはず。
表はやはり、1重線が一般的ですよね。
このような表にするためには、以下のCSSを追記します。
table{
border-collapse: collapse;
}border-collapseにて、線の間に隙間を作るかどうかを決めています。
今回の場合は、隙間をつくらない=1重線、ということですね。
表の見出しの文字色や背景色を変更するCSS
見出しについては、文字色や背景色がカラフルな方が見やすいものです。
以下のCSSを追記することで、見出し、つまりthに対して背景色や色を変更することが可能です。
th{
color: #fff;/*文字の色*/
background-color: #FFC107;/*背景色*/
}基本的に表を作るのであれば、余白、1重線、見出しの色の変化をしておけば見やすい表になるでしょう。
セルの中の文字を中央寄せするCSS
表を作るうえで、文字の長さによってはバランスが悪くなることがあります。
大抵、文字が中央に寄っていないせいです。
文字を中央寄せして、以下のような見やすい表にしましょう。
以下のCSSを追記することで対応できます。
td{
text-align: center;
}セルの文字の長さが極端に違うとバランスが崩れるので、そういった場合は注意しましょう。
おしゃれな表のデザイン例とCSS例
ここまで色々な表を紹介してきました。
とはいえ、見本が欲しいものです。
ということで、2つおしゃれな表を用意しました。
これを参考にしつつ、自分で色を変更したり、中身を変えたりすれば大抵対応できそうです。
セルに影を付けて立体的にし、見出しの部分の角を丸くしました。
影についての詳しい説明は、以下の記事を参考にしてください！
以下のCSSのみをそのままコピペして使えば、同じようなデザインになります。
table{
border-collapse: collapse;
}
table th:first-child{
border-radius: 5px 0 0 0;
}
table th:last-child{
border-radius: 0 5px 0 0;
border-right: none;
}
table th{
color: #fff;
border-right: 1px solid #fff;
background-color: #FF9800;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
padding: 7px 7px;
}
table td{
text-align: center;
border-left: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
padding: 7px 3px;
}
table td:last-child{
border-right: 1px solid #aaa;
}
表の見出し(ヘッダ)を左側にすることもできます。(左も上もヘッダにするということも可能)
これはHTMLが多少異なるため、HTMLから書いていきます。
<table>
<tr>
<th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
</tr>
<tr>
<th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
</tr>
<tr>
<th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
</tr>
<tr>
<th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
</tr>
<tr>
<th>見出し</th><td>データ</td><td>データ</td><td>データ</td>
</tr>
</table>見出しであるthが各行の先頭に来ています。
そして、以下がCSSになります。
th{
background-color: #4CAF50;
color: #fff;
}
table th,table td{
padding: 3px 7px;
text-align: center;
}
table tr:nth-child(odd){
background-color: #F1F8E9;
}最後にあるtable tr:nth-cild(odd)についてですが、oddの部分で奇数行について（今回の場合は背景色を）指定するという風になっています。
table tr:nth-child(even)とすることで、偶数行にすることが可能です。
表に斜線を引く【CSSで斜線を表現】
あまり必要になる機会はないのかもしれませんが、表に斜線を引く方法についても説明しておきます。
このような点数表の左上であったり、総当たりの表を作るのには必要ですね。
HTMLは以下のようになります。
<table>
<tr>
<th><!--ここがempty--></th><th>Aさん</th><th>Bさん</th>
</tr>
<tr>
<th>1回目</th><td>4点</td><td>5点</td>
</tr>
<tr>
<th>2回目</th><td>3点</td><td>2点</td>
</tr>
</table>必要なのは、空の見出しです。間になにも挟まずに、<th></th>とすればOK
CSSで、斜線に関係する部分だけに注目すると、以下の通りです。
th:empty{
background-image: linear-gradient(to top right,
transparent, transparent 49%,
black 49%, black 51%,
transparent 51%, transparent);
}見出しの空の部分に対して、linear-gradientを適用している感じです。
liner-gradientについて理解しよう
仕組みが気にならない人は飛ばして良いです。
先ほどのCSSでは、to top rightの部分で「左上から右下にかけてグラデーションをかける」という意味を指定し、そのグラデーションの内容は「49%透明、49%～51%は黒色、51%～は透明」という風にして、疑似的に斜線に見せているだけです。
表の複数セルの結合をする
複数セルを結合したい場合もあるかと思います。
複数セルが結合されたHTMLがどのようになるか、見てみましょう。
rowspanで表のセルを縦方向に繋げる
600円の部分が繋がっています。
このような表は、td rowspan="2"と書くことで実現可能です。
<table>
<tr>
<th>果物</th><th>値段</th><th>備考</th>
</tr>
<tr>
<td>イチゴ</td><td rowspan="2">600円</td><td>税込み価格</td>
</tr>
<tr>
<td>パイナップル</td><!--tdは消す--><td>税抜き価格</td>
</tr>
<tr>
<td>バナナ</td><td>100円</td><td>限定大特価</td>
</tr>
</table>colspanで表のセルを横方向につなげる
逆に、横方向につなげる方法についても解説します。
見出しの部分の幅が広くなっています。
広くしたい部分、今回ですとthに対してcolspan="2"を指定することで実現可能です。
<table>
<tr>
<th>果物</th><th colspan="2">値段</th><!--thは消す-->
</tr>
<tr>
<td>イチゴ</td><td>648円</td><td>税込み価格</td>
</tr>
<tr>
<td>パイナップル</td><td>1000円</td><td>税抜き価格</td>
</tr>
<tr>
<td>バナナ</td><td>100円</td><td>限定大特価</td>
</tr>
</table>表をレスポンシブ対応にするCSS
最後に、表をレスポンシブ対応にする方法について説明します。
小さめの表について
サイズが小さめの表については、スマホ表示でも崩れることがないため、表の幅をできるだけ大きくするだけで大丈夫です。
できるだけ大きく・・・つまり、100%にすれば最大の大きさとなりますね。
table{
width: 100%;
}このようにすれば、常に最大の大きさで表示されますので安心です。
幅が狭すぎるとおかしくなるセルも出てきますので、余白の設定などで常にいい感じの見た目になるように調節しましょう。
表をスクロール対応させる方法
スマホ表示でも崩れることがない小さい表ならばいいのですが、大きな表となるとスクロールさせないと綺麗に見せることはできません。
イメージとしては、以下の通りです。
これなら、どんなに小さい画面でも崩れることなく表を見せることができます！
そんな表にする方法はかなり簡単で、以下のHTMLのようにするだけ。
<div style="overflow-x: auto; white-space: nowrap;">
<!-- ここに表のHTMLを入れ込む -->
</div>overflow-x: auto;ではみ出した部分のx座標についてスクロールバーを表示させ（正しくはユーザーエージェントに依存します）、white-space: nowrap;にて、表の中の文字を自動改行しないように設定するdivタグで囲むだけです。
HTML+CSSで表を作る方法まとめ
今回は、表に関して多くのことを書きました。
まとめておきます。
- HTMLで作る基本的な表
- 表の列数・行数の調節方法
- 表の余白設定・線の設定・見出しの色・文字の中央寄せ・表のデザイン例
- 表に斜線を引く方法
- 複数セルの結合方法
- 表をレスポンシブ対応させる方法
これで表に関しては自由自在にいじれるかなと思います！
表を使って分かりやすく伝えられるようにしましょう！
