HTML col colgroup 有何不同? 如何文字靠右?

html 網頁設計 css w3c col colgroup

taglife 2012-05-08 06:00:23 ‧ 14774 瀏覽

分享至

HTML 裡 <col> 和 <colgroup> 標籤使用時機有何不同？
在<table>裡：
<col style="background-color:#f00" />
<col style="background-color:#0f0" />
和
<colgroup style="background-color:#f00"></colgroup>
<colgroup style="background-color:#0f0"></colgroup>
根本就一樣阿？

而且這 2 個標籤怎不能用 CSS 讓文字靠右？
<table border="1" style="width:400px">
<col />
<col style="text-align:right" />
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
我要讓第二欄的 12 22 文字靠右，
只能在每個 <td> 裡下 style="text-align:right" 這麼麻煩嗎？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

wiseguy

iT邦超人 1 級 ‧ 2012-05-08 07:33:26

最佳解答

colgroup 用來把 td 集合在一起，如果整欄要靠右，請直接下 align="right" 即可。如：
<colgroup style="background-color:#f00" align="right"></colgroup>

而 col 是在 colgroup 中，又特別要對某欄做不一樣設定時在使用的。例如：
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT></COLGROUP>
就可以讓兩欄一個靠右、一個靠左。

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

taglife iT邦新手 5 級 ‧ 2012-05-08 11:58:00 檢舉

什麼是把 td 集合在一起？
align="right" 在 Firefox, Chrome, Safari 無效...

wiseguy iT邦超人 1 級 ‧ 2012-05-08 14:41:47 檢舉

把 td 集合在一起的意思就是 colgroup 的屬性，會作用到它所對應的那一群 td 欄位上。而 col 可以再對這一群 td 再設定某特定欄的不一樣屬性。

col colgroup 這兩個 tag 在 Firefox, Chrome, Safari 這些瀏覽器中，只剩 span, style 才有效，其它屬性都不支援了。因此文字對齊必須逐個 td 去設定。

taglife iT邦新手 5 級 ‧ 2012-05-10 22:14:28 檢舉

我還是不太懂 <col> 和 <colgroup> 使用上的差異？
什麼時候該用 <col>？什麼時候該用 <colgroup>？
可以舉個例子嗎？感謝~

wiseguy iT邦超人 1 級 ‧ 2012-05-10 22:45:11 檢舉

假如你有 A, B, C 三欄，A, B 想要底色一樣紅色，C 是黃底色，但 A 的字要白色、B的字要16pt，你就可以這樣下：

&lt;pre class="c" name="code">&lt;colgroup style="background-color: red" span="2">
	&lt;col style="color: white" />
	&lt;col style="font-size: 16pt" />
&lt;/colgroup>
&lt;colgroup style="background-color:yellow"/>

當然，你也可以只用 <colgroup> 如下面所示一欄一欄設定。只不過若欄數一多，你就要寫很多次而已。

&lt;pre class="c" name="code">&lt;colgroup style="background-color:red; color: white"/>
&lt;colgroup style="background-color:red; font-size: 16pt"/>
&lt;colgroup style="background-color:yellow"/>

不過說實在話，你不懂它怎麼用，那幹麻要用？不是生氣喔，純好奇而已。