柚子快報(bào)激活碼778899分享：第三章 表格布局與表單交互
http://yzkb.51969.com/
3.1 表格的概述 HTML（HyperText Markup Language）表格是網(wǎng)頁(yè)設(shè)計(jì)中用于展示數(shù)據(jù)的一種重要元素。它們通過
標(biāo)簽來定義，并可以包含行（）、表頭（| ）、單元格（ | ）等子元素來組織數(shù)據(jù)。表格不僅限于顯示數(shù)字或文本數(shù)據(jù)，還可以用來布局網(wǎng)頁(yè)內(nèi)容（盡管現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)傾向于使用CSS進(jìn)行布局，因?yàn)楸砀癫季衷陧憫?yīng)式設(shè)計(jì)和可訪問性方面存在局限性） 3.1.1 表格的結(jié)構(gòu) HTML表格的結(jié)構(gòu)主要由 元素及其內(nèi)部的一系列子元素組成，這些子元素共同定義了表格的行、列、表頭和數(shù)據(jù)單元。以下是HTML表格的基本結(jié)構(gòu)概述： 元素 元素是創(chuàng)建表格的容器。它包含了表格的所有內(nèi)容，包括行、列、表頭和數(shù)據(jù)。 元素可以接受一些屬性（盡管在HTML5中，許多樣式相關(guān)的屬性如border、cellpadding、cellspacing等已被廢棄，推薦使用CSS來控制樣式），但大多數(shù)情況下，你只需要簡(jiǎn)單地使用標(biāo)簽來開始和結(jié)束表格。 元素（可選） 元素為表格提供了標(biāo)題或說明。它應(yīng)該緊跟在元素之后，位于表格的任何表頭或表體內(nèi)容之前。的內(nèi)容默認(rèn)會(huì)居中顯示在表格的上方，但你可以使用CSS來改變它的位置或樣式。, , 元素（可選）這些元素分別用于定義表格的頭部、主體和尾部。它們不是必需的，但使用它們可以提高表格的語義化，有助于屏幕閱讀器等輔助技術(shù)更好地理解表格內(nèi)容。 ：包含一行或多行表頭單元格（| ），這些單元格通常描述了表格中列的內(nèi)容。 | ：包含了表格的主體內(nèi)容，即表格的實(shí)際數(shù)據(jù)行（）。 ：包含了對(duì)表格底部數(shù)據(jù)的總結(jié)或注釋，如合計(jì)行。 元素 元素代表表格中的一行。它包含了該行的所有單元格，無論是表頭單元格（| ）還是標(biāo)準(zhǔn)數(shù)據(jù)單元格（ | ）。 | 和 | 元素 | 元素定義表頭單元格。這些單元格通常包含列的標(biāo)題，并且默認(rèn)會(huì)以粗體和居中的方式顯示。 | 元素可以在中定義，也可以在表格的任何位置定義，用于標(biāo)識(shí)重要的數(shù)據(jù)或列標(biāo)題。 | 元素定義標(biāo)準(zhǔn)數(shù)據(jù)單元格。這些單元格包含了表格的實(shí)際數(shù)據(jù)。 3.1.2 表格的基本語法 HTML 表格的基本語法圍繞? ?元素展開，該元素包含了表格的所有內(nèi)容。下面是一個(gè)詳細(xì)的HTML表格基本語法示例，展示了如何創(chuàng)建一個(gè)簡(jiǎn)單的表格，包括表頭（| ）、數(shù)據(jù)行（ | ?和?| ）以及可選的表格標(biāo)題（ 語法： ?? ??? ??? ?23軟件3班名單 ?? ??? ??? ? ?? ??? ??? ??? ?| 序號(hào) | ?? ??? ??? ??? ?姓名 | ?? ??? ??? ??? ?性別 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 1 | ?? ??? ??? ??? ?張三 | ?? ??? ??? ??? ?男 | ?? ??? ??? ? ?? ??? ? ?瀏覽效果如圖： 3.2 表格屬性設(shè)置? 在HTML中，表格的屬性曾經(jīng)用于直接控制表格的樣式和行為，如邊框、間距、寬度等。然而，隨著Web標(biāo)準(zhǔn)的演進(jìn)和CSS的普及，許多原本用于 、、| 等表格元素的HTML屬性已經(jīng)被廢棄或不再推薦使用?，F(xiàn)在，推薦使用CSS來控制表格的樣式和布局。 盡管如此，了解這些舊的HTML表格屬性仍然有助于理解舊代碼或進(jìn)行兼容性處理。以下是一些曾經(jīng)常用的HTML表格屬性及其簡(jiǎn)要說明（但請(qǐng)注意，這些屬性現(xiàn)在應(yīng)該通過CSS來實(shí)現(xiàn)）： 屬性border：設(shè)置表格邊框的寬度?，F(xiàn)在應(yīng)使用CSS的border屬性。 cellpadding：設(shè)置單元格內(nèi)容與單元格邊框之間的空間?，F(xiàn)在應(yīng)使用CSS的padding屬性。 cellspacing：設(shè)置單元格之間的空間?，F(xiàn)在應(yīng)使用CSS的border-spacing（對(duì)于border-collapse: separate;的表格）或完全避免單元格間距（通過border-collapse: collapse;）。 width 和 height：設(shè)置表格的寬度和高度?，F(xiàn)在推薦使用CSS的width和height屬性，因?yàn)镠TML屬性不支持響應(yīng)式設(shè)計(jì)。 bgcolor：設(shè)置表格的背景顏色?，F(xiàn)在應(yīng)使用CSS的background-color屬性。 align：設(shè)置表格相對(duì)于其容器的對(duì)齊方式（左、中、右）?，F(xiàn)在應(yīng)使用CSS的margin、float或Flexbox/Grid布局來實(shí)現(xiàn)對(duì)齊。 , | , | 屬性 bgcolor、background：設(shè)置行或單元格的背景顏色或背景圖像?，F(xiàn)在應(yīng)使用CSS的background-color或background-image屬性。 align：設(shè)置單元格內(nèi)內(nèi)容的水平對(duì)齊方式（左、中、右）?，F(xiàn)在應(yīng)使用CSS的text-align屬性。 valign：設(shè)置單元格內(nèi)內(nèi)容的垂直對(duì)齊方式（上、中、下）。CSS2.1中沒有直接對(duì)應(yīng)的屬性，但可以使用vertical-align（注意，它作用于行內(nèi)元素和表格單元格，而不是整個(gè)行）。 colspan：設(shè)置單元格應(yīng)橫跨的列數(shù)。這個(gè)屬性仍然有效，因?yàn)樗c表格的布局結(jié)構(gòu)相關(guān)，而不是樣式。 rowspan：設(shè)置單元格應(yīng)橫跨的行數(shù)。同樣，這個(gè)屬性仍然有效。 ?3.2.1 表格邊框?qū)傩?在HTML中，border 屬性曾經(jīng)被用于 元素上以直接在表格周圍和單元格之間添加邊框。然而，需要注意的是，隨著Web標(biāo)準(zhǔn)的演進(jìn)和CSS的普及，border 屬性（以及其他與表格外觀直接相關(guān)的HTML屬性，如 cellpadding 和 cellspacing）現(xiàn)在被認(rèn)為是過時(shí)的，并且不推薦在新開發(fā)的網(wǎng)頁(yè)中使用。相反，應(yīng)該使用CSS來控制表格的邊框、間距、填充等樣式。這是因?yàn)镃SS提供了更強(qiáng)大、更靈活的方式來設(shè)計(jì)網(wǎng)頁(yè)，并且能夠更好地支持響應(yīng)式設(shè)計(jì)和無障礙訪問。 ?語法： (1) border 屬性。用于設(shè)置邊框的粗細(xì)，單位是像素。(2) bordercolor 屬性。用于設(shè)置表格邊框的顏色，可以使用red函數(shù)、十六進(jìn)制和顏色英文名稱。 (3) bordercolorlight 屬性。用于設(shè)置表格亮邊框，對(duì)表格左上角邊框生效。 (4) bordercolor 屬性。用于設(shè)置表格暗邊框，對(duì)表格有邊框生效。 3.2.2 表格的寬度和高度屬性 通過設(shè)置HTML中的width和height屬性，屬性可以設(shè)置表格的寬度和高度。 語法： （1）width。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的寬度。?（2）height。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的高度。? 設(shè)置表格標(biāo)記中的高度與寬度為百分比時(shí)，表格會(huì)跟隨瀏覽器窗口的改變而自動(dòng)調(diào)整。 3.2.3 表格背景顏色與背景圖像屬性? 設(shè)置表格的bgcolor屬性可以改變表格的背景顏色，設(shè)置表格的background屬性可以為表格增添背景圖像效果，使表格更加美觀。 語法: (1)bgcolor。可以用rgb函數(shù)、十六進(jìn)制、英文顏色名稱來設(shè)置背景顏色 (2)background。設(shè)置背景圖像，圖像的路徑可以是絕對(duì)路徑或相對(duì)路徑 (3)同時(shí)設(shè)置背景顏色和背景圖像屬性時(shí)，背景圖像會(huì)部分或完全覆蓋背景顏色示例： ?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ? ?? ??? ?23軟件3班名單 ?? ??? ? ?? ??? ??? ?| 序號(hào) | ?? ??? ??? ?姓名 | ?? ??? ??? ?性別 | ?? ??? ? ?? ??? ? ?? ??? ??? ?| 1 | ?? ??? ??? ?張三 | ?? ??? ??? ?男 | ?? ??? ? ?? ? ?? ? 瀏覽效果如圖： ?3.2.4 表格邊框樣式屬性 設(shè)置表格標(biāo)記中的fame屬性可以改變表格邊框的樣式；設(shè)置表格標(biāo)記中的rules屬性可以改變表格內(nèi)部邊框的樣式。 語法： ?? ? ? ? ? ? ? ? ? ? ? ? frame和rules常見屬性值及說明? 3.2.5 表格單元格間距，單元格邊距屬性 設(shè)置表格標(biāo)記中的cellspacing屬性可以改變表格單元格之間的間隔，使網(wǎng)頁(yè)中的表格內(nèi)容稍微松散一些。設(shè)置表格標(biāo)記中的celpadding屬性可以增加表格單元格的內(nèi)容與內(nèi)部邊框之間的距離。 語法: (1)cellspacing。值的單位為像素或百分比，默認(rèn)值為 2px。 (2)cellpadding。值的單位為像素或百分比。代碼示例： ?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ? ?? ??? ??? ??? ?23軟件3班名單 ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ?| 序號(hào) | ?? ??? ??? ??? ??? ?姓名 | ?? ??? ??? ??? ??? ?性別 | ?? ??? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ?| 1 | ?? ??? ??? ??? ??? ?張三 | ?? ??? ??? ??? ??? ?男 | ?? ??? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?23軟件3班名單 ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ?| 序號(hào) | ?? ??? ??? ??? ??? ?姓名 | ?? ??? ??? ??? ??? ?性別 | ?? ??? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ?| 1 | ?? ??? ??? ??? ??? ?張三 | ?? ??? ??? ??? ??? ?男 | ?? ??? ??? ??? ? ?? ??? ??? ? ?? ? ??瀏覽效果如圖： ?3.2.7 設(shè)置表格的（tr）標(biāo)記行的屬性 表格行tr標(biāo)記的屬性用于設(shè)置表格某一行的樣式，其屬性設(shè)置如表所示。 屬性名稱描述示例說明align設(shè)置行的水平對(duì)齊方式 行的邊框顏色bgcolor設(shè)置行的背景顏色 行的暗邊框顏色valign設(shè)置行內(nèi)內(nèi)容的垂直對(duì)齊方式 行的亮邊框顏色通過t標(biāo)記的 align 屬性可以設(shè)置行內(nèi)容的水平對(duì)齊方式。水平對(duì)齊方式有居左對(duì)齊、居中對(duì)齊和居右對(duì)齊。通過t標(biāo)記的 valign 屬性可以設(shè)置行內(nèi)容的垂直對(duì)齊方式。垂直對(duì)齊方式有頂部對(duì)齊、居中對(duì)齊和底部對(duì)齊。 語法:、 ? ? ? ? ? ? | ...... | ? ? ? ? ....... 說明:left 表示設(shè)置行內(nèi)容居左對(duì)齊;center表示設(shè)置行內(nèi)容居中對(duì)齊;right表示設(shè)置行內(nèi)容居右對(duì)齊。lop表示設(shè)置行內(nèi)容頂部對(duì)齊;middle表示設(shè)置行內(nèi)容居中對(duì)齊;bottom表示設(shè)置行內(nèi)容底部對(duì)齊。其中行垂直居中對(duì)齊屬性值與行水平居中對(duì)齊屬性值不同。 代碼示例： ?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ??? ? ?? ??? ??? ?23軟件3班名單 ?? ??? ??? ? ?? ??? ??? ??? ?| 序號(hào) | ?? ??? ??? ??? ?姓名 | ?? ??? ??? ??? ?性別 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 1 | ?? ??? ??? ??? ?張三 | ?? ??? ??? ??? ?男 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 2 | ?? ??? ??? ??? ?李四 | ?? ??? ??? ??? ?女 | ?? ??? ??? ? ?? ??? ? ?? ? 效果圖； 3.2.8 設(shè)置單元格屬性 在HTML中，設(shè)置單元格屬性通常指的是在 元素內(nèi)部，對(duì)| （表格單元格）或 | （表格頭部單元格）元素進(jìn)行屬性的設(shè)置。這些屬性可以幫助你控制單元格的樣式、行為等。以下是一些常用的單元格屬性及其用法： colspan 和 rowspan colspan：這個(gè)屬性用于定義單元格應(yīng)該橫跨的列數(shù)。默認(rèn)值為1，如果設(shè)置為大于1的值，則單元格會(huì)橫跨多列。 rowspan：這個(gè)屬性用于定義單元格應(yīng)該橫跨的行數(shù)。默認(rèn)值為1，如果設(shè)置為大于1的值，則單元格會(huì)橫跨多行。 ?3.2.9 表格單元格跨行、跨列屬性 1.單元格跨行 使用單元格 td 標(biāo)記的 rowspan 屬性可以設(shè)置單元格跨行合并。? 語法: … 說明:rowspan屬性可以設(shè)置單元格跨行。通過 rowspan="n"(n是正整數(shù))，可以設(shè)置某一單元格跨n行，當(dāng)前行下的n-1行內(nèi)的單元格數(shù)量都需要減少一個(gè)，即少定義一個(gè)td 標(biāo)記。 代碼示例： ?? ? ?? ??? ? ?? ??? ? ?? ? ?? ? ?? ??? ?設(shè)置單元格跨列，跨行屬性 ?? ??? ??? ? ?? ??? ? ? ?專業(yè)研討會(huì)日程安排 ?? ??? ??? ? ?? ??? ??? ??? ?| 上午 | ?? ??? ??? ??? ?下午 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 8:00-10:00 | ?? ??? ??? ??? ?10:00-12:00 | ?? ??? ??? ??? ?14:00-16:00 | ?? ??? ??? ??? ?16:00-18:00 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 學(xué)校領(lǐng)導(dǎo)講話 | ?? ??? ??? ??? ?大會(huì)主題報(bào)告 | ?? ??? ??? ??? ?行業(yè)企業(yè)專題報(bào)告 | ?? ??? ??? ??? ?總結(jié)報(bào)告 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 專家報(bào)告 | ?? ??? ??? ??? ?分組討論 | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ?| 全天參觀人工智能實(shí)訓(xùn)中心 | ?? ??? ??? ? ?? ??? ??? ? ?? ? 效果圖； ?3.3 表格嵌套 表格嵌套是一種常用的頁(yè)面布局方式。利用表格嵌套可以設(shè)計(jì)比較復(fù)雜且美觀的頁(yè)面效通常情況下，使用表格嵌套時(shí)，表格不宜過多使用，否則會(huì)降低網(wǎng)站訪問速度。表格嵌一般采用在單元格內(nèi)嵌套表格。 代碼示例： ?? ? ?? ??? ? ?? ??? ?嵌套表格布局頁(yè)面 ?? ??? ? ?? ? ?? ? ?? ??? ?嵌套表格布局頁(yè)面 ?? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ? ? ?? ??? ??? ??? ??? ??? ? ?| Logo | ?? ??? ??? ??? ??? ??? ? ?廣告條 | ? ?? ??? ??? ??? ??? ? ? ?? ??? ??? ??? ??? ? ? ?? ??? ??? ??? ??? ??? ? ?| 導(dǎo)航 | ?? ??? ??? ??? ??? ? ? ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ? | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ? ? ? ?? ??? ??? ??? ??? ??? ?| 左欄目 | ?? ??? ??? ??? ??? ??? ?正文欄目 | ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ? ?? ??? ??? ? | ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ??? ??? ?| 版權(quán)信息 | ?? ??? ??? ??? ? ?? ??? ??? ? ?? ? 效果圖； 3.4 表單 3.1.4 表單標(biāo)記 HTML 表單標(biāo)記（Form Markup）是網(wǎng)頁(yè)中用于收集用戶輸入信息的元素集合。它允許用戶填寫文本、選擇選項(xiàng)、上傳文件等，并將這些信息提交到服務(wù)器進(jìn)行進(jìn)一步處理。HTML 表單通過 ?? ? | | | | | | |
