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

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

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

tableデザイン WEB制作

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

公開日:
最終更新日:

tableデザイン 関連ワード #156 #tableタグ
HTML
作り方
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

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デザイナーを目指すならオンライン学習のUemy

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

html 関連記事はこちら すべての WEB制作 記事はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon