網頁設計與制作（活頁式） 課件 情景4-1 表格及其簡單應用

網頁設計與制作表格標簽的組成授課教師：胡文利JavaScriptCSSHTMLHTML目錄CONTENTS12學習目標知識導圖3知識點講解4練一練5小結學習目標01學習目標學習目標01了解表格的基本結構學習目標02掌握表格標簽的屬性設置學習目標03掌握表格的編輯02知識導圖知識導圖學習路線03知識點講解表格基本結構

HTML語言中的表格是由<table>標簽來定義。

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

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

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

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

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

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