テーブルタグの表にCSSで見やすく色をつける方法!

 

HTML で表を作るには table タグを使いますが、見やすい表にするには、枠線や色を付けたりといろいろ加工が必要になってきます。
ブログ記事中に挿入する程度の簡単な表には、そこまで凝ったものは必要ありませんが、見やすい表にはしておきたいですね。

表を見やすく装飾する

マークダウン記法を使うと HTML で直接記述するより簡単に表が作れます。

tableタグはMarkdown記法を使うと簡単だった

マークダウン記法で書いたソースを HTML へ変換しただけだと、通常枠線や色付もない何の装飾もされていない状態の HTML が出力されます。

ブログ側に CSS の設定がされていれば、そのまま投稿できますので、CSS を設定して見やすい表が表示されるようにします。

CSSの設定

見やすい表というと、枠線と色付けでシンプルに表示させたものが良いと思います。
できれば1行おきに色が付いていると、より見やすいのではないでしょうか。

CSSの設定は、こちらのサイトを参考にさせていただきました。

CSS3セレクタで1行ごとにテーブルに背景色をつける|Webpark

とても分かりやすくて、勉強になります。

実際に自分のサイトに登録した CSS がこちらになります。

/* テーブル */
.text table {
width: auto;
border: 1px solid #555555;
border-collapse: collapse;
border-spacing: 0;
}
th {
color: #333;
padding: 5px;
border-bottom: 1px solid #555555;
border-left: 1px solid #555555;
background: #597869;
font-weight: bold;
line-height: 120%;
text-align: center;
}
td {
padding: 5px;
border-bottom: 1px solid #555555;
border-left: 1px solid #555555;
}
tr:nth-child(2n+1) {
background: #C2EAE0;
}

.text table { }

表全体にかかる設定です。ここでは枠の大きさや枠線についての基本設定をしています。

最初の .text は、当ブログの記事部分のクラスタです。記事本文中の table タグにのみ適用するよう指定しています。

  • width: auto; ・・・ 横幅を自動的にあわせる
  • border: 1px solid #555555; ・・・ 枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-collapse: cpllapse; ・・・ 隣のセルの枠線を重ねて表示する
  • border-spacing: 0; ・・・ 隣のセルとの枠線の間隔

th { }

表最上段の標題部分の設定です。

  • color: #333; ・・・ 文字の色
  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555
  • background: #597869; ・・・ セル背景色の指定
  • font-weight: bold; ・・・ 文字を太字に
  • line-height: 120%; ・・・ セル内文字の行間。セル内に2行入力した時の行間
  • text-aline: center; ・・・ 文字の中央揃え

td { }

表2段目からの本体部分の設定です。

  • padding: 5px; ・・・ 枠線から文字までの間隔
  • border-bottom: 1px solid #555555; ・・・ セルの底部分枠線の指定。太さ1px 線の種類solid 線色#555555
  • border-left: 1px solid #555555; ・・・ セルの左側枠線の指定。太さ1px 線の種類solid 線色#555555

tr:nth-child(2n+1) { }

選択した行にのみ適用する設定です。

  • background: #C2EAE0; ・・・ セル(行)の背景色を指定

行の指定はいくつか方法があります。

CSSの記述 指定箇所
tr:nth-child(n) n番目のtrに適用
tr:nth-child(odd) 奇数番目のtrに適用
tr:nth-child(2n+1) 奇数番目のtrに適用
tr:nth-child(even) 偶数番目のtrに適用
tr:nth-child(2n) 偶数番目のtrに適用
tr:nth-child(3n) 3,6,9,12…番目のtrに適用
tr:nth-child(3n+1) 1,4,7,10…番目のtrに適用

シンプルですが、かなり見やすくなりました。

まとめ

表組みというのは、それほど頻繁には使わないと思っていましたが、実は記述が面倒だから無意識に避けていたような気がしてきました。
マークダウン記法と今回の CSS 設定を使えば、驚くほど簡単に表が完成してしまいます。

一度設定してしまえば、Sublime Text のようなマークダウン記法対応のエディタとの併用で、快適に記事や文章を書き進められます。

細かなことの積み重ねで、執筆環境を改善していくと、書くのが楽しくなってきますね。
改善内容も記事ネタになって一石二鳥ですね。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする