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

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

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

#156 tableデザイン

WEB制作

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

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

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

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

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

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,300円(税込)

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デザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

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

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

1,958円(税込)

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

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

1,848円(税込)

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

tableデザインの関連ページ

CSSで作る横スライド

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

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

marginとpadding

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

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

WEB言語紹介

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

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

ロリポッププラン比較

ロリポップのプランの選び方を各プランと比較して解説

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

PHPで作るカレンダーの作り方2

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

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

CLS対策上級編

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

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

CLS対策初級編

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

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

WEBフォント設定

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

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

アイキャッチの作り方

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

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

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

jquery-match-height.js

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

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

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

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

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

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

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

スクロール監視

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

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

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

ランダム表示バナー

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

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

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPの覚え方

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

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

配列の解説

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

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

SNSでこの記事をシェアできます

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

jquery-match-height.js
1位

jquery-match-height.js

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

SEL50F18F
2位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
3位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

レンズ比較
4位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

車用スマホホルダー
5位

車用スマホホルダー

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

千鳥ヶ淵夜桜
6位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

ノートPCスタンド
7位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

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

MusicBeeのレイアウト変更方法

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

静岡家族旅行 計画編
9位

静岡家族旅行 計画編

2018年8月20日に毎年恒例の夏の家族旅行の行き先を静岡県に決定! 静岡県の選定理由と観光名所の選定の計画について。

α7Ⅲ 夜桜撮影
10位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

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
(税込)