[精讚] [會員登入]
1075

[HTML] 讓表格整欄上色的方法

過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

此文完整連結 http://n.sfs.tw/10702

複製連結 [HTML] 讓表格整欄上色的方法@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-23 16:19:48 最後編修
2017-01-27 13:29:33 By 張○○
 

自動目錄

過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法,那就是使用HTML4新增的 colgroup標籤

先看範例

文章編號 名稱 作者 日期 備註
25556 文章表格教學示範 瘦河馬 2010-02-06 這是一篇好文章
25557 文章表格COLGROUP教學示範 瘦河馬 2017-02-06 這是第二篇好文章

如果我要分別每一欄上色,在過去是很不方便的,得在那欄設定 class,再修改class的樣式,如果使用colgroup就能快速的解決這個問題

<table border="1">
   <colgroup>
    <col style="background-color:darkgray; color:white; width:100px;">
    <col span="2" style="background-color:green; ">
    <col style="background-color:yellow">
  </colgroup>
        <tr>
            <td width="50">文章編號</td>
            <td>名稱</td>
            <td width="60">作者</td>
            <td width="60">日期</td>
            <td width="75">備註</td>
        </tr>
        <tr>
            <td>25556</td>
            <td>文章表格教學示範</td>
            <td>瘦河馬</td>
            <td>2010-02-06</td>
            <td>這是一篇好文章</td>
        </tr>
        <tr>
            <td>25557</td>
            <td>文章表格COLGROUP教學示範</td>
            <td>瘦河馬</td>
            <td>2017-02-06</td>
            <td>這是第二篇好文章</td>
        </tr>
    </tbody>
</table>

結果

第2行是 colgroup的標籤,3~5行用<col>分別定義:

  第1欄 灰底白字寬100px,這裡注意白字沒有出來,顯然是這個樣式無法作用
  第2,3欄 綠底,使用一個span="2" 的屬性作為整合2欄
  第4欄 黃底
  第5欄未寫,故維持原樣

使用colgroup注意事項

1. <colgroup> 要放在表格內,不能放在<table></table>的標籤外,使用<col>指定每個欄
2. 理論上 <colgroup>要放在任何<tr> <thead>  <tfoot> <tbody> 之前,但我試過放在表格的很多地方都能用,例如最下、<tr>和<tr>之間
3. 所有瀏覽器都支援
4. 和<tr>不一樣,只有少許的樣式有支援[2][3]

background-color

border

width

visibility

5. <tr>或<td>設的樣式可以輕易的蓋掉<colgroup>

參考資料

[1] http://www.w3schools.com/TAgs/tag_colgroup.asp

[2] https://www.sitepoint.com/community/t/css-colgroup-font-style-problem/4589/5

[3] https://www.w3.org/wiki/HTML/Attributes/_Global

你可能感興趣的文章

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。

網頁自動轉址的四種方法 設定網頁自動轉址的四種方法,三種html,一種php

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

[Freebsd] 定時測試 ADSL 是否斷線並重連 中華電信 ADSL 雖有固定 ip,可是他卻會不定時「斷線」, 使用以下的 方法可以定時測試是否斷線,以及重新撥接。

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

為什麼要重造輪子? 什麼輪子?造什麼輪子?我為什麼要重造輪子?

魔球中小女孩唱的歌 The show 魔球中小女孩唱的歌 The show