官术网_书友最值得收藏!

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è)計隔列變色的樣式效果

主站蜘蛛池模板: 集贤县| 象州县| 建昌县| 宝鸡市| 徐水县| 海盐县| 临沭县| 石棉县| 江川县| 阿克| 河津市| 朝阳市| 崇信县| 留坝县| 和硕县| 城市| 平定县| 玉田县| 高碑店市| 石家庄市| 长沙市| 杨浦区| 彩票| 尉氏县| 监利县| 安福县| 晋中市| 甘泉县| 互助| 应城市| 扬中市| 车致| 武平县| 清水县| 安国市| 眉山市| 美姑县| 仁化县| 阿城市| 望谟县| 荣成市|