全然、科の話では無いのですが授業ネタ。
最近、AKBの総選挙があって、それをネタにHTMLのtableを練習しよう！というお題をやっていました。で、票のところは数値なので、右寄せにしたいじゃないですか！
で、colgroupを使って右寄せにしようとしても、それは反映されません。これはブラウザの実装の問題ではなく、そもそもtext-alignは指定されたブロック要素の中に在るインライン要素に対する指定で、これがtdやthなら有効なのですが、
colやcolgroupはtdやthの親要素ではないという扱いなので、こうなります。table要素も他のブロック要素と違う振る舞いをする面もあり、悩ましいですね。これを何とかしようとすると、右寄せしたいtdにclassを設定して、そのstyleでtext-alignを使うしかありません、縦一列を一元化して指定したくても、出来ません。
colって何のために在るのでしょうか？
tableを駆逐しようとするあまり、半端になった感じがします。
AKB総選挙速報
| 順位 | 名前 | 得票数 |
|---|
| 1位 | 指原 莉乃 | 28,516票 |
|---|
| 2位 | 渡辺 麻友 | 14,868票 |
|---|
| 3位 | 大島 優子 | 13,993票 |
|---|
| 4位 | 松井 珠理奈 | 13,639票 |
|---|
| 5位 | 柏木 由紀 | 12,875票 |
|---|
| 6位 | 松井 玲奈 | 12,163票 |
|---|
| 7位 | 島崎 遥香 | 11,817票 |
|---|
| 8位 | 柴田 阿弥 | 11,513票 |
|---|
| 9位 | 横山 由依 | 10,596票 |
|---|
| 10位 | 渡辺 美優紀 | 9,123票 |
|---|
<style type="text/css">
th,td{
margin:0;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#aaa;
padding:4px;
}
colgroup.junni{
font-weight:bold;
background:#ffc;
width:100px;
}
colgroup.hyo{
text-align:right; /*指定しても効果は無し*/
width:160px;
background:#ccc;
}
thead tr *{
border-bottom-width:4px;
border-bottom-style:double;
border-bottom-color:#aaa;
}
</style>
</head>
<body>
<table cellspacing=0>
<caption>AKB総選挙速報</caption>
<colgroup class="junni" />
<colgroup class="name" />
<colgroup class="hyo" align="right" />
<thead>
<tr><th>順位</th><td>名前</td><td>得票数</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>指原 莉乃</td><td>28,516票</td></tr>
<tr><th>2位</th><td>渡辺 麻友</td><td>14,868票</td></tr>
<tr><th>3位</th><td>大島 優子</td><td>13,993票</td></tr>
<tr><th>4位</th><td>松井 珠理奈</td><td>13,639票</td></tr>
<tr><th>5位</th><td>柏木 由紀</td><td>12,875票</td></tr>
<tr><th>6位</th><td>松井 玲奈</td><td>12,163票</td></tr>
<tr><th>7位</th><td>島崎 遥香</td><td>11,817票</td></tr>
<tr><th>8位</th><td>柴田 阿弥</td><td>11,513票</td></tr>
<tr><th>9位</th><td>横山 由依</td><td>10,596票</td></tr>
<tr><th>10位</th><td>渡辺 美優紀</td><td>9,123票</td></tr>
</tbody>
</table>
</body>
</html>
