今年最初の勉強会はジェイコさん、キイさんが仕事で製作中のサイトやこれから取りかかるサイト制作の質問など。
あと、前からあるのに意外と知らないテーブルレイアウトについて。
今日ではサイトの見た目をいじるのはCSSでやるのが当たり前ですよね。テーブルでレイアウトした昔のサイトを見ると古くさく思いますよね。テーブルでレイアウトするのは、良くない！とされています。理由は「SEOに有効なマークアップが出来ない」「タグが入れ子になりすぎて見にくい」「面倒くさい」などなどです。
しかし、コンテンツに出てくる内容が表組の場合、テーブルはありです。
例えばhttp://juicyeyes.com/access.html（この場合はdl, dt, ddでも良いと思う）
そのテーブルのレイアウトについてです。
| 役職 | 氏名 | 所属 |
|---|---|---|
| 会長 | 山田 一郎 | 営業 |
| 副会長 | 山田 次郎 | 営業 |
| 幹事 | 野比 ノビタ | 営業 |
| 幹事 | 小山 順三郎 | 営業 |
| 幹事 | 岸野 太郎 | 営業 |
| 幹事補佐 | 来如意 | 営業 |
以下のようにtheadとtbodyに分けると見やすいです。ちなみにtfootというのもあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <thead> <tr> <th>役職</th><th>氏名</th><th>所属</th> </tr> </thead> <tbody> <tr><th>会長</th><td>山田 一郎</td><td>営業</td></tr> <tr><th>副会長</th><td>山田 次郎</td><td>営業</td></tr> <tr><th>幹事</th><td>野比 ノビタ</td><td>営業</td></tr> <tr><th>幹事</th><td>小山 順三郎</td><td>営業</td></tr> <tr><th>幹事</th><td>岸野 太郎</td><td>営業</td></tr> <tr><th>幹事補佐</th><td>来如意</td><td>営業</td></tr> </tbody> </table> |
|
1 2 3 4 |
table{border:1px solid #999;border-collapse: collapse;} th{background:#999;} thead th{background:#fcc;} td{background:#ccc;} |
——————————–
ご覧の皆様、今年もよろしくお願いします！