css,css3,html最近入社してきたWebスクール出身の弊社メンバーに聞いてみても、意外とtableについて習っていなかったり、プログラマーさんからtableの装飾について質問されることが多かったので、改めてtableタグの装飾についてまとめて見ました。背景色*/</td></tr></table>この世知辛い時代は、装飾はcssでやるのが主流なので上の様な記述は忘れてしまいましょう!html上のtableタグの記述はシンプルにこうしましょう<table><thead><tr><th>名前</th><th>HP</th><th>攻撃力</th><th>守備力</th></tr></thead><tbody><tr><th>スライム</th><td>6</td><td>11</td><td>11</td></tr><tr><th>スライムベス</th><td>10</td><td>12</td><td>12</td></tr><tr><th>メタルスライム</th><td>4</td><td>45</td><td>256</td></tr><tr><th>キングスライム</th><td>570</td><td>89</td><td>100</td></tr></tbody></table>次は今まで使ってきた属性の代わりにテーブルの見た目を整えるのに必要なcssを書いていきます。覚える内容としては属性とほとんど同じ!今のままのcssをかけてない状態だとこんな感じになります。サンプルを別画面で開くまだ罫線もない状態なのでtableに見えないと思いますが続いて必要なcssプロパティを解説していきます。}この6つだけ抑えておけば十分なのでまずこれを覚えましょう。この後1つずつ解説します。罫線をつけてtableっぽくしてみよう上に記載しましたが、罫線をつけるためのcssはborderプロパティです。#ccc;}何となく表組みっぽくなってきましたが、まだまだ見辛い!幅を変えて見よう横幅を指定するにはwidthプロパティを使います。border-spacingプロパティを使います。#ccc;}あ〜れ〜くっつきましたが、なんか線が太かったり?細いところもあっておかしい!borderを重ねて見よう隣接するborderを重ねるにはborder-collapseプロパティを使います。#ccc;}いよいよ表組みっぽくなってきた!でももうちょっとセルにゆとりが欲しいな!セルに余白を撮って見ようセルの中の余白を撮るには、paddingプロパティを使えばOK。#FFF;}余白が取れて、だいぶ見やすくなってきました。表組みのデータが多ければ多いほどどこの列をどう見てるかがわからなくなることがあります。それをもっと見やすくしていきましょう。#FFF;}1行おきに色を変えて見よう(jQuery編)行数が多くなってくると今どこを見てるのかがわからなくなるので1行おきに色を変えたいですが、簡単にjqueryでやるシステム屋さんもいるかと思います。td").css("background-color","#F5F5F5");});でもわざわざjsを追加しなくてもcssだけで同じことが実現できます!1行おきに色を変えて見よう(css編)最近ではjQueryを読み込んでないページの方が少ないかもしれませんが、余計な記述を増やさずにcssだけで実現可能です。#F5F5F5;}さてこの記述を見て、jsでもいいじゃん!と思ったあなた!この後もぜひ呼んでください。何でcssでやるべきなのかよくある表組みの値によるソート機能。▼のあるtheadをクリックしてみると並び替えられます。サンプルを別画面で開くこの場合、せっかく変えた1行おきの色まで一緒に入れ替わってしまいます。60ビューaboutはむすけ自然と動物が大好きなWebクリエイター。front-endが専門領域ですが動物の知識はそれ以上。