- HTML5+CSS3+JavaScript從入門到精通(微課精編版)
- 前端科技
- 2207字
- 2019-08-15 16:38:00
6.2 新建表格
表格有多種形式,如簡單的表格、帶標題的表格、結(jié)構(gòu)化的表格、列分組的表格等,本節(jié)將介紹這些不同形式的表格的設(shè)計方法。
6.2.1 定義普通表格

視頻講解
使用table元素可以定義HTML表格。簡單的HTML表格由一個table元素,以及一個或多個tr和td元素組成,其中tr元素定義表格行,td元素定義表格的單元格。
【示例】下面示例設(shè)計一個簡單的HTML表格,包含兩行兩列,演示效果如圖6.2所示。


圖6.2 設(shè)計簡單的表格
6.2.2 定義列標題

視頻講解
在數(shù)據(jù)表格中,每列可以包含一個標題,這在數(shù)據(jù)庫中被稱為字段,在HTML中被稱為表頭單元格。使用th元素定義表頭單元格。
提示:HTML表格中有兩種類型的單元格:
表頭單元格:包含表頭信息,由th元素創(chuàng)建。
標準單元格:包含數(shù)據(jù),由td元素創(chuàng)建。
在默認狀態(tài)下,th元素內(nèi)部的文本呈現(xiàn)為居中、粗體顯示,而td元素內(nèi)通常是左對齊的普通文本。
【示例1】下面示例設(shè)計一個含有表頭信息的HTML表格,包含兩行兩列,演示效果如圖6.3所示。

表頭單元格一般位于表格的第一行,當然,用戶可以根據(jù)需要把表頭單元格放在表格中的任意位置。例如,第一行或最后一行,第一列或最后一列等。也可以定義多重表頭。
【示例2】下面示例設(shè)計了一個簡單的課程表,表格中包含行標題和列標題,即表格被定義了兩類表頭單元格,演示效果如圖6.4所示。


圖6.3 設(shè)計帶有表頭的表格

圖6.4 設(shè)計雙表頭的表格
6.2.3 定義表格標題

視頻講解
有時為了方便瀏覽,用戶需要為表格添加一個標題。使用caption元素可以定義表格標題。
注意:須緊隨table元素之后,只能對每個表格定義一個標題。
【示例】以上節(jié)示例1為基礎(chǔ),下面示例為上節(jié)示例1的表格添加一個標題,演示效果如圖6.5所示。


圖6.5 設(shè)計帶有標題的表格
從圖6.5中可以看到,在默認狀態(tài)下這個標題位于表格上面居中顯示。
提示:在HTML4中,可以使用align屬性設(shè)置標題的對齊方式,取值包括left、right、top、bottom。在HTML5中不建議使用,建議使用CSS樣式取而代之。
6.2.4 表格行分組

視頻講解
thead、tfoot和tbody元素可以對表格中的行進行分組。當創(chuàng)建表格時,如果希望擁有一個標題行,一些帶有數(shù)據(jù)的行,以及位于底部的一個總計行,這樣可以設(shè)計獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。
使用thead元素可以定義表格的表頭,該標簽用于組合HTML表格的表頭內(nèi)容,一般與tbody和tfoot元素結(jié)合起來使用。其中tbody元素用于對HTML表格中的主體內(nèi)容進行分組,而tfoot元素用于對HTML表格中的表注(頁腳)內(nèi)容進行分組。
【示例】下面示例使用上述各種表格標簽對象,設(shè)計一個符合標準的表格結(jié)構(gòu),代碼如下所示。

在上面示例代碼中,可以看到<tfoot>是放在<thead>和<tbody>之間,而最終在瀏覽器中會發(fā)現(xiàn)<tfoot>中的內(nèi)容顯示在表格底部。在<tfoot>標簽中有一個colspan屬性,該屬性的主要功能是橫向合并單元格,將表格底部的兩個單元格合并為一個單元格,示例效果如圖6.6所示。

圖6.6 表格結(jié)構(gòu)效果
注意:當使用thead、tfoot和tbody元素時,必須使用全部的元素,排列次序是thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳,且這些元素必須在table元素內(nèi)部使用。在默認情況下,這些元素不會影響到表格的布局。不過,用戶可以使用CSS使這些元素改變表格的外觀。在<thead>標簽內(nèi)部必須包含<tr>標簽。
6.2.5 表格列分組

視頻講解
ccol和colgroup元素可以對表格中的列進行分組。
其中使用<col>標簽可以為表格中一個或多個列定義屬性值。如果需要對全部列應(yīng)用樣式,<col>標簽很有用,這樣就不需要對各個單元格和各行重復(fù)應(yīng)用樣式了。
【示例1】下面示例使用col元素為表格中的三列設(shè)置不同的對齊方式,效果如圖6.7所示。


圖6.7 表格列分組樣式
在上面示例中,使用3個col元素為表格中三列分別定義不同的對齊方式。這里使用HTML標簽屬性align設(shè)置對齊方式,取值包括right(右對齊)、left(左對齊)、center(居中對齊)、justify(兩端對齊)和char(對準指定字符)。由于瀏覽器支持不統(tǒng)一,不建議使用align屬性。
提示:只能在table或colgroup元素中使用col元素。col元素是僅包含屬性的空元素,不能夠包含任何信息。如要創(chuàng)建列,就必須在tr元素內(nèi)嵌入td元素。
使用<colgroup>標簽也可以對表格中的列進行組合,以便對其進行格式化。如果需要對全部列應(yīng)用樣式,<colgroup>標簽很有用,這樣就不需要對各個單元和各行重復(fù)應(yīng)用樣式了。
【示例2】下面示例使用colgroup元素為表格中每列定義不同的寬度,效果如圖6.8所示。


圖6.8 定義表格列分組樣式
<colgroup>標簽只能在table元素中使用。
為列分組定義樣式時,建議為<colgroup>或<col>標簽添加class屬性,然后使用CSS類樣式定義列的對齊方式、寬度和背景色等樣式。
【示例3】從上面兩個示例可以看到,<colgroup>和<col>標簽具有相同的功能,同時也可以把<col>標簽嵌入到<colgroup>標簽中使用。

如果沒有對應(yīng)的col元素,列會從colgroup元素那里繼承所有的屬性值。
提示:span是<colgroup>和<col>標簽專用屬性,規(guī)定列組應(yīng)該橫跨的列數(shù),取值為正整數(shù)。例如,在一個包含6列的表格中,第一組有4列,第二組有2列,這樣的表格在列上進行分組,如下所示:
<colgroup span="4"></colgroup> <colgroup span="2"></colgroup>
瀏覽器將表格的單元格合成列時,會將每行前四個單元格合成第一個列組,將接下來的兩個單元格合成第二個列組。這樣,<colgroup>標簽的其他屬性就可以用于該列組包含的列中了。
如果沒有設(shè)置span屬性,則每個<colgroup>或<col>標簽代表一列,按順序排列。
注意:現(xiàn)代瀏覽器都支持<colgroup>和<col>標簽,但是Firefox、Chrome和Safari瀏覽器僅支持col和colgroup元素的span和width屬性。也就是說,用戶只能夠通過列分組為表格的列定義統(tǒng)一的寬度,另外也可以定義背景色,但是其他CSS樣式不支持。雖然IE支持,但是不建議用戶去應(yīng)用。通過示例2,用戶也能夠看到CSS類樣式中的“color:red;”和“font-size:16px;”都沒有發(fā)揮作用。
【示例4】下面示例定義如下幾個類樣式,然后分別應(yīng)用到<col>列標簽中,顯示效果如圖6.9所示。


圖6.9 設(shè)計隔列變色的樣式效果
- Python編程自學手冊
- 程序設(shè)計與實踐(VB.NET)
- Oracle 11g從入門到精通(第2版) (軟件開發(fā)視頻大講堂)
- Java面向?qū)ο筌浖_發(fā)
- 趣學Python算法100例
- Wireshark Network Security
- Animate CC二維動畫設(shè)計與制作(微課版)
- Python數(shù)據(jù)挖掘與機器學習實戰(zhàn)
- Linux命令行與shell腳本編程大全(第4版)
- 數(shù)據(jù)結(jié)構(gòu)與算法分析(C++語言版)
- HTML5與CSS3基礎(chǔ)教程(第8版)
- 編程菜鳥學Python數(shù)據(jù)分析
- 精通MySQL 8(視頻教學版)
- Java 從入門到項目實踐(超值版)
- Java面向?qū)ο蟪绦蛟O(shè)計教程