網(wǎng)頁設(shè)計(jì)與制作（活頁式） 課件 情景4-1 表格及其簡單應(yīng)用

網(wǎng)頁設(shè)計(jì)與制作表格標(biāo)簽的組成授課教師：胡文利JavaScriptCSSHTMLHTML目錄CONTENTS12學(xué)習(xí)目標(biāo)知識導(dǎo)圖3知識點(diǎn)講解4練一練5小結(jié)學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01了解表格的基本結(jié)構(gòu)學(xué)習(xí)目標(biāo)02掌握表格標(biāo)簽的屬性設(shè)置學(xué)習(xí)目標(biāo)03掌握表格的編輯02知識導(dǎo)圖知識導(dǎo)圖學(xué)習(xí)路線03知識點(diǎn)講解表格基本結(jié)構(gòu)

HTML語言中的表格是由<table>標(biāo)簽來定義。

每個表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。

字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格基本結(jié)構(gòu)HTML表格的基本結(jié)構(gòu)由以下部分組成：由<table>…</table>一對標(biāo)簽：用來定義表格由<th>…</th>一對標(biāo)簽：用來定義表格的標(biāo)題欄（文字加粗）由<tr>…</tr>一對標(biāo)簽：用來定義表格的行由<td>…</td>一對標(biāo)簽：用來定義表格的列表格基本結(jié)構(gòu)表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。表單域：相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。表格基本標(biāo)簽有:<table>標(biāo)簽(表格)<tr>標(biāo)簽(行)、<td>標(biāo)簽（單元格)。<tr>標(biāo)簽和<td>標(biāo)簽都要在表格的開始標(biāo)簽<table>和結(jié)束標(biāo)簽</table>之間才有效。表格中可以放入內(nèi)容，無論是文字、圖片、表單、超鏈接甚至是其他表格，但有一點(diǎn)要明確一下，所有的內(nèi)容是放在單元格td(th）元素中的，不能放到其他的表格元素中，比如我們不能把內(nèi)容直接放在table中或tr中。表格標(biāo)簽含義及其作用表格最重要的目的是顯示表格類數(shù)據(jù)。<table>:標(biāo)簽用于定義表格，每一對<table></table>表示一個表格<tr>:

標(biāo)簽用于定義表格的行，每一對<tr></tr>表示表格中的一行<td>:

標(biāo)簽用于定義表格中的單元格，每一對<td></td>表示表格中的一個單元格，它就像一個容器，可以容納所有的元素<th>:

標(biāo)簽用于定義表格中的表頭單元格，一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中1、<table>標(biāo)簽表格標(biāo)簽用于聲明表格對象，表格行、單元格、標(biāo)題等內(nèi)容都必須放在表格標(biāo)簽中。表格默認(rèn)情況下沒有邊框，且在父窗口中水平居左對齊，這些樣式，可通過表格標(biāo)簽的屬性進(jìn)行修改。表格標(biāo)簽常用屬性如下表所示：屬性描述border設(shè)置表格邊框?qū)挾?，單位為像素（默認(rèn)不顯示邊框）width設(shè)置表格寬度，單位為像素或上一級對象窗口的百分比height設(shè)置表格高度，單位為像素或上一級對象窗口的百分比cellspacing設(shè)置相鄰單元格之間的間距cellpadding設(shè)置單元格邊框與內(nèi)容的間距align設(shè)置表格的水平對齊方式（默認(rèn)左對齊）2、<tr>標(biāo)簽<tr>標(biāo)簽用于產(chǎn)生和設(shè)置表格中行，一個<tr></tr>產(chǎn)生一行。使用<tr>還可以通過其屬性對行進(jìn)行簡單樣式的設(shè)置。單元格標(biāo)簽常用屬性：屬性描述height設(shè)置行高，直接輸入某個數(shù)字，單位是像素align設(shè)置行中各單元格內(nèi)容相對于單元格水平對齊方式，可取left、center和right3個值，默認(rèn)值是left，即左對齊valign行中各單元格內(nèi)容相對于單元格的垂直對齊方式，可取top、middle和bottom三個值，默認(rèn)是middle，即垂直居中對齊bgcolor設(shè)置行中每個單元格的背景顏色3、<td>、<th>標(biāo)簽表格中的內(nèi)容必須放到單元格中，單元格由<td>、<th>標(biāo)簽設(shè)置。<td>和<th>設(shè)置的單元格分別稱為“一般單元格”和“標(biāo)題單元格”。標(biāo)題單元格中的內(nèi)容也稱表頭，默認(rèn)加粗且水平居中顯示。單元格標(biāo)簽常用屬性：屬性描述align設(shè)置單元格內(nèi)容的水平對齊方式（td的默認(rèn)左對齊，th的默認(rèn)居中對齊）valign設(shè)置單元格內(nèi)容的垂直對齊（top|middle|bottom，默認(rèn)居中對齊）bgcolor設(shè)置單元格的背景顏色background設(shè)置單元格的背景圖像width設(shè)置單元格的寬度，單位為像素或表格寬度的百分比height設(shè)置單元格的高度rowspan設(shè)置單元格的跨行操作colspan設(shè)置單元格的跨列操作4、caption標(biāo)簽caption標(biāo)記用于設(shè)置表格標(biāo)題，用于概述表格內(nèi)容，放在<table>標(biāo)簽的后面?；菊Z法：

<caption>…</caption>常用屬性：屬性描述align設(shè)置水平對齊方式，取值：left/center/right，默認(rèn)取centervalign設(shè)置垂直對齊方式，取值：top/bottom，默認(rèn)取top總結(jié)：表格基本結(jié)構(gòu)表格中橫向有多個單元格則為行（<tr></tr>）垂直的多個單元格則為列，單個的則為單元格（<td></td>）表頭（<th></th>）標(biāo)題標(biāo)簽（<caption></caption>）表格是一個或多個單元格構(gòu)成的集合表格基本示例04練一練新建表格實(shí)例練一練：制作一個“紅色書籍”統(tǒng)計(jì)表05小結(jié)小結(jié)本節(jié)內(nèi)容講解了表格的屬性的設(shè)