[精讚] [會員登入]
2289

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

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

分享此文連結 //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

END

你可能感興趣的文章

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

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

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[bc] linux 的計算機 bc 設定小數位數、計算π、次方根 linux 的計算機 bc 設定小數位數、計算π、次方根

詭異的創業思維 創業的思維中,有多少銀彈,有多少技術,有多少人脈,有多少時間等等,每個都要考慮進去,以熱忱建立的關係脆弱的像蘇打餅乾一樣..

[Wildfly10] 發佈war檔 deploy war file onto wildfly10

[大型機台] 熱血高校躲避球 多少少年時光歲月耗在這個遊戲上,二十幾年前的那個時光,唯一想做的事就是把吃飯錢省下來拿去打一場五塊錢的電動,就算是沒錢也

[SIP] OPENSER LINUX版本安裝全記錄 [SIP] OPENSER LINUX版本安裝全記錄