《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》 課件 第6章 HTML5表格

第6章HTML5表格內(nèi)容提要《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》表格是組織數(shù)據(jù)的一種有效方法，表格不僅僅用在文字處理上，在網(wǎng)頁的作用也非常重要，特別是表現(xiàn)列表數(shù)據(jù)方面。本章首先介紹HTML5表格的組成，接下來介紹

HTML5表格的標(biāo)簽，然后重點(diǎn)介紹<table>、<tr>和<td>及如何實(shí)現(xiàn)嵌套表格，最后通過叮叮書店購物車頁面介紹表格的應(yīng)用。本章要點(diǎn)《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》HTML5表格組成。常用的表格標(biāo)簽<table>、<tr>、<th>和<td>。嵌套表格。6.1表格——表格結(jié)構(gòu)《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》表格是由行和列組成的二維表，每個表格均有若干行，每行有若干列，行和列圍成的區(qū)域是單元格，單元格的內(nèi)容是數(shù)據(jù)，也稱數(shù)據(jù)單元格，數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。表格通過在行和列的標(biāo)題之間進(jìn)行視覺關(guān)聯(lián)的方法，可以讓信息能夠很簡單地被解讀出來。一個典型的HTML5表格結(jié)構(gòu)包括一個標(biāo)題、頭部、主體和腳部。標(biāo)簽6.1表格——表格表格由<table>來定義，行由<tr>定義，單元格由<td>定義，這三個標(biāo)簽是表格常用的標(biāo)簽?！禜TML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》6.1表格——表格標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》例6.1

table.html使用表格標(biāo)簽實(shí)現(xiàn)了一個典型的表格。HTML5表格主要用于表格數(shù)據(jù)，但很多人習(xí)慣用

HTML5表格來實(shí)現(xiàn)網(wǎng)頁布局，建議不要這樣做，這是因?yàn)?表格會產(chǎn)生很多標(biāo)簽，這會導(dǎo)致代碼變得難于編寫、維護(hù)和調(diào)試。表格不能自動響應(yīng)。正常使用的布局結(jié)構(gòu)標(biāo)簽（如<article>和<div>等），默認(rèn)的寬度是父元素的100%，而表格的默認(rèn)大小是根據(jù)單元格的內(nèi)容決定的。表格布局減少了視覺受損用戶的可訪問性。6.2常用表格標(biāo)簽——<table>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》<table>標(biāo)簽定義表格，簡單的HTML5表格由<table>以及一個或多個<tr>、<th>或<td>元素組成，<tr>定義表格行，<th>定義標(biāo)題單元格，<td>定義數(shù)據(jù)單元格。更復(fù)雜的HTML5表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。6.2常用表格標(biāo)簽——<tr>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》<tr>定義HTML5表格中的行，<tr>包含一個或多個<th>或<td>元素。6.2常用表格標(biāo)簽——<th>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》HTML5表格單元格有標(biāo)題單元格和數(shù)據(jù)單元格。<th>定義HTML5表格中的標(biāo)題單元格，表格的標(biāo)題是特殊的單元格，通常在行或列的開始處?？梢允褂胹cope屬性來說明標(biāo)題單元格是列標(biāo)題還是行標(biāo)題，如果值為“row”，表示標(biāo)題與其

所屬行的所有單元格相關(guān)，如果值為“col”，表示標(biāo)題與其所屬列的所有單元格相關(guān)。scope屬性會讓表格變得更加無障礙，每個標(biāo)題與相同行或列中的所有數(shù)據(jù)相關(guān)聯(lián)，這樣屏幕閱讀設(shè)備能一次讀出一列或一行的數(shù)據(jù)。用來幫助屏幕閱讀設(shè)備更好地理解那些標(biāo)題單元格到底是列標(biāo)題還是行標(biāo)題。6.2常用表格標(biāo)簽——<th>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》HTML5表格的<table>和單元格（<th>和<td>）

都有自己的邊框線，默認(rèn)邊框線寬度為0，表格顯示沒有邊框，可以使用CSS樣式進(jìn)行設(shè)置。例6.2

table-border.html中，把表格周圍的邊框設(shè)置為3px寬，單元格的邊框設(shè)置為1px寬。為了符合Web標(biāo)準(zhǔn)，示例中直接使用CSS樣式設(shè)置邊框。標(biāo)簽colspan和rowspan屬性用于建立不規(guī)范表格，

所謂不規(guī)范表格是單元格的個數(shù)不等于行乘以列的數(shù)值。6.2常用表格標(biāo)簽——<td><td>定義HTML5表格中的數(shù)據(jù)單元格。《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》6.2常用表格標(biāo)簽——<td>標(biāo)簽如下圖3行3列的表格共有9個單元格，左圖所示是一個規(guī)范表格，右圖所示是一個不規(guī)范表格，右圖中第一行的第2、3兩個單元格合并為一個單元格，即第一行第2個單元格橫跨2列，把第一行第3個單元格位置占據(jù)了。第二行的第3個單元格和第三行的第3個單元格兩個單元格合并為一個單元格，即第二行第3個單元格橫跨2行，把第三行第3個單元格位置占據(jù)了。例6.3

table-td.html實(shí)現(xiàn)下圖所示的不規(guī)范表格《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》6.2常用表格標(biāo)簽——<colgroup>和<col>標(biāo)簽如果想讓表格中每一列的單元格樣式都一樣，可以使用<colgroup>和<col>標(biāo)簽。<colgroup>標(biāo)簽用于對表格中的列進(jìn)行組合，以便對其樣式進(jìn)行格式化。<col>標(biāo)簽為表格中一個或多個列定義屬性值，只能在<table>或<colgroup>元素中使用<col>標(biāo)簽。<col>標(biāo)簽常用屬性。span屬性規(guī)定<col>元素應(yīng)該橫跨的列數(shù)。在默認(rèn)情況下，它只能影響一列?！禜TML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》6.2常用表格標(biāo)簽——<colgroup>和<col>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》<col>元素是空元素，必須在<tr>元素內(nèi)部<td>元素里，才能使用<col>。。修改例6.2

table-border.html

，為表格中的四個列設(shè)置三種不同的背景色。例子中“background-color:hsl(236,51%,90%);”是樣式聲明，定義單元格背景色。6.2常用表格標(biāo)簽——<caption>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》使用<caption>標(biāo)簽可以為表格增加一個標(biāo)題，<caption>標(biāo)簽需放在<table>標(biāo)簽的下面。標(biāo)題是對表格內(nèi)容的描述，對那些希望可以通過標(biāo)題，來決定是否需要了解更詳細(xì)表格內(nèi)容的快速瀏覽者來說，是非常有用的。6.2常用表格標(biāo)簽——<thead>、<tbody>和<tfoot>標(biāo)簽《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》<thead>標(biāo)簽定義表格的頭部，<tbody>標(biāo)簽定義表格主體，<tfoot>標(biāo)簽定義表格的腳部。<thead>應(yīng)該與<tbody>和<tfoot>結(jié)合起來使用。如果使用<thead>、<tbody>以及<tfoot>元素，就必須全部使用。它們出現(xiàn)的次序是：<thead>、<tbody>、<tfoot>，必須在<table>內(nèi)部使用這些標(biāo)簽，<thead>內(nèi)部必須擁有<tr>標(biāo)簽。6.3嵌套表格《HTML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視頻版》在一個表格的單元格里插入一個完整的表格，稱為嵌套表格，一般不建議這樣做，因?yàn)檫@種做法會使標(biāo)記看上去很難理解，對使用屏幕閱讀的用戶來說，可訪問性也降低。例6.4

table-nesting.html在表格右下角一個合并的單元格中嵌套了另一個完整的表格。6.4叮叮書店購物車頁面的建立啟動Visual

Studio

Code，打開叮叮書店項(xiàng)目，新建文件cart1.html，在cart1.html中，使用5行5列的表格顯示購物車的內(nèi)容，第1行為表格標(biāo)題行，最后1行為統(tǒng)計(jì)行?！禜TML5+CSS3+ES6貫穿式項(xiàng)目實(shí)戰(zhàn)-微課視