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

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

EarFun Clip

軽量&コンパクトなイヤーカフ型イヤホン
Amazon限定クーポン配布中!7月31日まで!

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コーディングとサイト制作の教科書

1,400円(税込)

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

HTML5 & CSS3 デザインレシピ集

2,750円(税込)

HTML5 & CSS3 デザインレシピ集

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

2,090円(税込)

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

HTML解体新書

3,450円(税込)

HTML解体新書

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

2,000円(税込)

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

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

1,242円(税込)

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

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

1,870円(税込)

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

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

1,958円(税込)

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

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

1,480円(税込)

イラスト図解式 この一冊で全部わかる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があるんですが長くなるので割愛しました

ロリポッププラン比較

【2024年4月更新】ロリポップの最適プランの選び方

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

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

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

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

SVG背景

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

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

配色ジェネレーター

あなたの創造力を引き出す、直感的な配色ジェネレーター

色相環からカラーを選択し、クリックすると配色例を表示します! 24色×16トーンからお好みのカラーに合わせて利用可能!

WEBフォント設定

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

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

アイキャッチの作り方

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

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

CLS対策上級編

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

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

CLS対策初級編

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

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

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

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

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

スクロール監視

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

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

アンカーリンクナビ

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

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

bookblock

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

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

jquery-match-height.js

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

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

交差監視

Intersection Observer APIを図解で解説

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

スクロール変換

縦スクロールを横スクロールに変換するJavaScript

縦にスクロールした分だけ、横にスクロールするJavaScriptを応用して、その場にとどめながら透明度を変化させます。

ランダム表示バナー

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

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

URLの疑似静的化

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

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

配列の解説

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

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

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

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

セサミ5とセサミタッチ
1位

セサミ5とセサミタッチ

CANDY HOUSEのセサミ5とセサミタッチの導入レビューです! 指紋認証とNFCタッチで鍵いらずな生活を手に入れました!

車用スマホホルダー
2位

車用スマホホルダー

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

ノートPCスタンド
3位

ノートPCスタンド

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

EarFun Clip
4位

EarFun Clip

イヤーカフタイプの最大のメリットである軽い装着感と、連続10時間使える電池持ちでつけっぱなしのながら使いにオススメな一品!

NAS DS224+
5位

NAS DS224+

SynologyのNAS DS224+を購入。 メモリ増設が可能なため一緒に16GBのメモリも購入して増設してみました。

湯楽城
6位

湯楽城

2024年8月に千葉県は成田に1泊2日の旅に行ってきました! お目当ては総工費24億円をかえて建設された「湯楽城」へ

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

MusicBeeのレイアウト変更方法

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

セサミタッチで使えるICタグ
8位

セサミタッチで使えるICタグ

セサミ5とセサミタッチを購入して1ヵ月。子供の指紋認証が通りづらいという問題が発生したので、NFCタグを購入して追加設定しました。

音楽再生
9位

音楽再生

パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。

chocozap
10位

chocozap

ジムで体を鍛えたいと思ってもそんなに行かないとわかっていると月額費用が安い方が嬉しいわけで、chocozapの料金は魅力!

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

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