tableタグを見やすくキレイに設定するコピペで使えるCSS

tableタグを見やすくキレイに設定するコピペで使えるCSS

tableで作る表をシンプルでキレイに作るHTMLとCSS

#156 tableデザイン

WEB制作

tableタグで表を作るときに、罫線がうまくひけない、なんかごちゃごちゃする、という時はありませんか。 tableタグにそのままborderを設定しても思うように線がつかないんですよね。 そんなお悩みを解決するCSSとHTMLの設定方法です

公開日:
最終更新日:

サイトマップサイトマップ

Table をキレイに表示させるタグとCSS

表を作るときに使うtalbleタグですが、普通に使うとキレイな表にならないんですよね。
私が良く使うテーブルタグの書き方をご紹介します。

Tableの完成イメージ

見出し1見出し2見出し3
内容1内容2内容3

こんな感じの罫線と背景の設定についてをご紹介します。

個人的にセルすべてを罫線で囲うのが嫌いなので、セルの横線は基本的に付けません。
時と場合と使い道によるんですが、大抵の場合はこのテーブルデザインで使っています。

tableタグの書き方

<table>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
</table>

これはごく普通に書きます。

tableタグに設定するCSS(スタイルシート)

tableタグにCSSでboderをつけて使うわけなんですが、そのまま使うとへんなスキマができたりするので、それをCSSで調整します。

table そのものに設定するCSS

tableに設定するCSSは以下の通り。

table {
    border-spacing: 0;
    border-collapse: collapse;
	border-bottom: 1px solid #aaa;
    color: #555;
    width: 100%;   
}	

tableを使う時は共通デザインにしたいので、tableタグそのものにスタイルを設定していますが、お好みに合わせてクラス指定したりしてください。

border-spacing の調整

このCSSは隣接するセルのボーダーの間隔を設定するCSSです。
デフォルトだと隙間が空くので、CSSでスキマをなくします。

border-spacing: 0;

border-collapseの調整

同じく罫線の調整で、隣接するセルのボーダーを重ねて表示させる設定です。

border-collapse: collapse;

border-bottom でテーブルの下線をつける

tableタグそのものに下線をつけます。
なんでtableのbottomだけに線を引くのかはこの後の設定であきらかになります。

thに設定するCSS

表の見出しになる th タグのスタイルシートの設定です。

th {
	border-top: 1px solid #aaa;
    background-color: #f5f5f5;    
	padding: 10px 0 10px 6px;
    text-align: left;        
}

セルの上部に線を引いて、背景色を設定し、余白を調整して、文字を左寄せにしています。

border-top: 1px solid #aaa;

セルの上部にだけ線を引きます。
左右と下には何もしないで、上だけに線を引くのがポイントです。

text-align: left;

thのデフォルトはセンタリングなんですが、センタリングじゃない方が表として見やすいことが多いので、個人的には左寄せにしています。
センタリングでも特に問題はありません。

好みの問題です。

padding: 10px 0 10px 6px;

セルの余白設定です。
上10px 右0px 下10px 左6px

上下には10pxの余白を設定し、左右は左にだけ6pxで、右は0pxにしています。

なぜかというと、左寄せにしているので、左側に余白がないと窮屈になり、右側はテーブルの幅に応じてセルの大きさが変わるので、余白を設定しなくても余白が作られるためです。

右も6pxとってもいいんですけどね。

tdに設定するCSS

表の内容を表示させるtdに設定するスタイルシートです。

td {
    border-top: 1px solid #aaa;
    padding: 10px 0 10px 6px;
}

こちらもth同様、セルの上部にだけ線を引いています。

tdはデフォルトで左寄せなので、特にtext-alignの設定はしていません。

padding: 10px 0 10px 6px;

これはthと同様の設定です。

tableデザインのまとめ

ここに記載したCSSを設定することで、シンプルで見やすいtableが作れます。

見出し1見出し2見出し3
内容1内容2内容3

こんな感じのテーブル。

thとtdの上部にだけ線を引くことで、borderが重複して太くなることを避けられます。

そのままだと、表の一番に線が引かれないので、tableタグ自体にborder-bottomを設定していた、というわけですね。

文字サイズ、余白、線・背景色で印象が変わります

最近歳をとったせいか、文字を割と大き目で設定するようになりました。。
文字サイズはお好みで良いと思いますが、文字サイズが小さい表だと読むのがつかれるので大き目にすると、年上の方などには優しいデザインになります。

table用CSSのコピペ用 まとめ

今回紹介したテーブルのスタイルシートのまとめです。
まとめてコピペすればそのまま使えます。

table {
    border-spacing: 0;
    border-collapse: collapse;
	border-bottom: 1px solid #aaa;
    color: #555;
    width: 100%;   
}	

th {
	border-top: 1px solid #aaa;
    background-color: #f5f5f5;    
	padding: 10px 0 10px 6px;
    text-align: left;        
}

td {
    border-top: 1px solid #aaa;
    padding: 10px 0 10px 6px;
}

テーブルタグのデザインまとめでした!

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728円(税込)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,508円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

3,800円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

tableデザインの関連ページ

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

ブログ デイリーアクセスランキング

MusiceBee
1位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

ランダム表示バナー
2位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

WEBフォント設定
3位

WEBフォント設定

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

カレンダーの作り方2
4位

カレンダーの作り方2

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

MusicBeeのレイアウト変更方法
5位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ここひえ
6位

ここひえ

ショップジャパンのパーソナルクーラー「ここひえ」を購入して使った感想と気づいたこと。 風を正面に受けると涼しいです

CPC改善策
7位

CPC改善策

Google Adsenseの収益最大化施策として、CPCの改善に取り組みました。 CPCの大幅改善に成功!やったぜ!

NORDACE
8位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

電子ノート
9位

電子ノート

電池もちが抜群で持ち運びに便利な電子ノートのレビューです。文庫本サイズの電子ノートはアイデアを思いつたらすぐにメモれる優れモノ

カー用品
10位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなどを書いていきます。

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728
(税込)