システム屋さんも必見！今更聞けないtableタグの装飾
最近入社してきたWebスクール出身の弊社メンバーに聞いてみても、意外とtableについて習っていなかったり、プログラマーさんからtableの装飾について質問されることが多かったので、改めてtableタグの装飾についてまとめて見ました。
目次
抑えておく6つのcssプロパティ
こんな風にhtmlに属性を書いてませんか？
1 | <table width="100%" cellpadding="0" cellspacing="0" border="1"> |
2 | <tr> |
3 | <td bgcolor="#cccccc"> |
4 | /* 中略 */ |
5 | /* |
6 | width ⇒ 幅指定 |
7 | cellpadding ⇒ セルの内側の余白 |
8 | cellspacing ⇒ 隣接するセルとセルの間隔 |
9 | border ⇒ 罫線 |
10 | bgcolor ⇒ 背景色 |
11 | */ |
12 | </td> |
13 | </tr> |
14 | </table> |
この世知辛い時代は、装飾はcssでやるのが主流なので上の様な記述は忘れてしまいましょう！
html上のtableタグの記述はシンプルにこうしましょう
1 | <table> |
2 | <thead> |
3 | <tr><th>名前</th><th>ＨＰ</th><th>攻撃力</th><th>守備力</th></tr> |
4 | </thead> |
5 | <tbody> |
6 | <tr><th>スライム</th><td>6</td><td>11</td><td>11</td></tr> |
7 | <tr><th>スライムベス</th><td>10</td><td>12</td><td>12</td></tr> |
8 | <tr><th>メタルスライム</th><td>4</td><td>45</td><td>256</td></tr> |
9 | <tr><th>キングスライム</th><td>570</td><td>89</td><td>100</td></tr> |
10 | </tbody> |
11 | </table> |
次は今まで使ってきた属性の代わりにテーブルの見た目を整えるのに必要なcssを書いていきます。
覚える内容としては属性とほとんど同じ！
まだ罫線もない状態なのでtableに見えないと思いますが続いて必要なcssプロパティを解説していきます。
覚えるべきcssプロパティはこんな感じ
1 | /* 罫線 */ |
2 | td { border: 1px solid #ccc; } |
3 | /* 幅指定 */ |
4 | table { width: 300px; } |
5 |
6 | /* セルとセルの間隔 */ |
7 | table { border-spacing: 5px; } |
8 |
9 | /* 隣接するボーダーの扱い方（重ねるor分ける） */ |
10 | table { border-collapse: collapse; /* separate or collapse */ } |
11 |
12 | /* 背景色 */ |
13 | th { background-color: #000; } |
14 |
15 | /* 内側の余白 */ |
16 | td { padding: 10px; } |
この６つだけ抑えておけば十分なのでまずこれを覚えましょう。 この後１つずつ解説します。
まずは罫線をつけてtableっぽくしてみよう
上に記載しましたが、罫線をつけるためのcssはborderプロパティです。
サンプルを別画面で開くCSSはこんな感じ
1 | th,td { |
2 | border: 1px solid #ccc; |
3 | } |
何となく表組みっぽくなってきましたが、まだまだ見辛い！
幅を変えて見よう
横幅を指定するにはwidthプロパティを使います。
サンプルを別画面で開くCSSはこんな感じ
1 | table { |
2 | width:100%; |
3 | } |
4 | th,td { |
5 | border: 1px solid #ccc; |
6 | } |
だいぶ見やすくなってきましたが、セルとセルの間が離れてなんか変！ 次はそこを変えて見ましょう
苦しゅうない、もっと近うよれ
セルとセルが離れてて見づらいので近くに寄せましょう border-spacingプロパティを使います。。
サンプルを別画面で開くCSSはこんな感じ
1 | table { |
2 | border-spacing: 0; |
3 | width:100%; |
4 | } |
5 | th,td { |
6 | border: 1px solid #ccc; |
7 | } |
あ〜れ〜くっつきましたが、なんか線が太かったり？細いところもあっておかしい！
borderを重ねて見よう
隣接するborderを重ねるにはborder-collapseプロパティを使います。。
サンプルを別画面で開くCSSはこんな感じ
1 | table { |
2 | border-collapse: collapse; |
3 | border-spacing: 0; |
4 | width:100%; |
5 | } |
6 | th,td { |
7 | border: 1px solid #ccc; |
8 | } |
いよいよ表組みっぽくなってきた！でももうちょっとセルにゆとりが欲しいな！
セルに余白を撮って見よう
セルの中の余白を撮るには、paddingプロパティを使えばＯＫ。
サンプルを別画面で開くCSSはこんな感じ
1 | table { |
2 | border-collapse: collapse; |
3 | border-spacing: 0; |
4 | width:100%; |
5 | } |
6 | thead th { |
7 | background-color: #EEE; |
8 | } |
9 | th,td { |
10 | padding: 3px 5px; |
11 | border: 1px solid #ccc; |
12 | background-color: #FFF; |
13 | } |
余白が取れて、だいぶ見やすくなってきました。 けど表組みのデータが多ければ多いほどどこの列をどう見てるかがわからなくなることがあります。
それをもっと見やすくしていきましょう。
見出しと内容のセルの色を変えて見よう
みだしを
サンプルを別画面で開くCSSはこんな感じ
1 | table { |
2 | border-collapse: collapse; |
3 | border-spacing: 0; |
4 | width:100%; |
5 | } |
6 | th,td { |
7 | padding: 3px 5px; |
8 | border: 1px solid #ccc; |
9 | } |
10 | thead th { |
11 | background-color: #EEE; |
12 | } |
13 | tbody th, tbody td { |
14 | background-color: #FFF; |
15 | } |
1行おきに色を変えて見よう （jQuery編）
行数が多くなってくると今どこを見てるのかがわからなくなるので１行おきに色を変えたいですが、簡単にjqueryでやるシステム屋さんもいるかと思います。
サンプルを別画面で開くjsの記述はこんな感じ？
1 | $(function(){ |
2 | $("tbody tr:nth-child(even) th, tbody tr:nth-child(even) td").css("background-color","#F5F5F5"); |
3 | }); |
でもわざわざjsを追加しなくてもcssだけで同じことが実現できます！
1行おきに色を変えて見よう （css編）
最近ではjQueryを読み込んでないページの方が少ないかもしれませんが、余計な記述を増やさずにcssだけで実現可能です。
サンプルを別画面で開くjsの記述はこんな感じ？
1 | table { |
2 | border-collapse: collapse; |
3 | border-spacing: 0; |
4 | width:100%; |
5 | } |
6 | th,td { |
7 | padding: 3px 5px; |
8 | border: 1px solid #CCC; |
9 | } |
10 | thead th { |
11 | background-color: #EEE; |
12 | } |
13 | tbody th, tbody td { |
14 | background-color: #FFF; |
15 | } |
16 | tbody tr:nth-child(even) th, |
17 | tbody tr:nth-child(even) td { |
18 | background-color: #F5F5F5; |
19 | } |
さてこの記述を見て、jsでもいいじゃん！と思ったあなた！この後もぜひ呼んでください。
何でcssでやるべきなのか
よくある表組みの値によるソート機能。▼のあるtheadをクリックしてみると並び替えられます。
サンプルを別画面で開くこの場合、せっかく変えた１行おきの色まで一緒に入れ替わってしまいます。
それに比べてCSSだけで実装すると問題なく表示できる
サンプルを別画面で開くこれらもあってcssの方がおすすめです
