初心者が覚えておきたいtableタグの装飾

良くあるパターンの組み方

まずは良くあるごく普通のtableのデザインについて書いてみるだ！

一行目が違う色（表の見出しになっている）パターン

See the Pen zxbxPa by Info Markup (@Info_Markup) on CodePen.

こういう時は迷わず表の見出し部分をthにし、thに背景色を付けるべ？オラならそうつけるだ

th {
  padding:5px 10px;
  border:1px solid #CCC;
  background-color:#0070BA;
  color:#FFF;
 }

一列目が違う色（表の見出しになっている）パターン

See the Pen PwLwKq by Info Markup (@Info_Markup) on CodePen.

th {
  padding:5px 10px;
  border:1px solid #CCC;
  background-color:#0070BA;
  color:#FFF;
 }

こんな風に向きが変わっても、同様にthに背景色を指定する事が多いと思うのだ！
では、次の場合の時はどうやろか？

一列目＆一行目が違う色（表の見出しになっている）パターン

むむっ、一行目も色が違うけど、一列目も色がちょっと違うだ！
どっちも見出しっぽいし、どっちもthにしたいべ！
どうすっぺ！

See the Pen zxbxEj by Info Markup (@Info_Markup) on CodePen.

th {
  padding:5px 10px;
  border:1px solid #CCC;
  background-color:#BFDFFF;
}
th.item {
  background-color:#0070BA;
  color:#FFF;
}

名前
身長
体重


桜木花道
189.2cm
83kg


流川楓
187cm
75kg


宮城リョータ
168cm
59kg

こんな時、一行目thにclassを付けて色指定してねいか？

See the Pen Ggegxg by Info Markup (@Info_Markup) on CodePen.

th {
  padding:5px 10px;
  border:1px solid #CCC;
  background-color:#0070BA;
  color:#FFF;
}
th.item {
  background-color:#BFDFFF;
  color:#000;
}

名前
身長
体重


桜木花道
189.2cm
83kg


流川楓
187cm
75kg


宮城リョータ
168cm
59kg

それとも一列目にclassをいくつも付けてっぺや？

実はそんなことをしねぇでも　html上に書くclassの記述は1つで十分なのだ！

テッテレェー！！正解はこれだ！

See the Pen vEPEKM by Info Markup (@Info_Markup) on CodePen.

まず1行目のtrにclassを1つ付けてけろ
html上はそれだけで良いだ

名前
身長
体重


桜木花道
189.2cm
83kg


流川楓
187cm
75kg


宮城リョータ
168cm
59kg

cssの指定はこうすっぺ
trにクラスを付いてる時のthだけに色を指定するのだ

th {
  padding:5px 10px;
  border:1px solid #CCC;
  background-color:#BFDFFF;
}
tr.itemRow th {
  background-color:#0070BA;
  color:#FFF;
}

見た目は一緒だけど、htmlのソースは綺麗になったっぺ？
無駄なclassの記述を減らすことができるんだっぺ

thだけじゃなくて行ごとに色を変える時に使えるから、ソースをシンプルにする時はつかってみるといいだ！
htmlファイルの軽量化にもつながるべ

初歩的なところだけど、ちょいちょいclassをいっぱい書いてる人を見かけることがあるから、ぜひ覚えて使ってくれや！