柚子快報(bào)激活碼778899分享：第三章 表格布局與表單交互

http://yzkb.51969.com/

3.1 表格概述

表格是網(wǎng)頁(yè)中的一個(gè)重要容器元素，可包含文字和圖像。表格使網(wǎng)頁(yè)結(jié)構(gòu)緊湊整齊，使網(wǎng)頁(yè)內(nèi)容的顯示一目了然。表格除了用來(lái)顯示數(shù)據(jù)外，還用于搭建網(wǎng)頁(yè)的結(jié)構(gòu)。幾乎所有HTML頁(yè)面都或多或少地采用了表格。表格以簡(jiǎn)潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序地顯示在頁(yè)面上，從而可以呈現(xiàn)出漂亮的頁(yè)面。表格在網(wǎng)頁(yè)設(shè)計(jì)中能將網(wǎng)頁(yè)分成多個(gè)任意的矩形區(qū)域。

3.1.1 表格的結(jié)構(gòu)

表格是由行和列組成的二維表，而每行又由一個(gè)或多個(gè)單元格組成，用于放置數(shù)據(jù)或其他內(nèi)容。表格中的單元格是行與列的交叉部分，是組成表格的最基本單元。單元格的內(nèi)容是數(shù)據(jù)，也稱數(shù)據(jù)單元格。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。

3.1.2 表格的基本語(yǔ)法

在HTML中，常用表格主要通過5個(gè)標(biāo)記來(lái)構(gòu)成:

，和表示標(biāo)題結(jié)束。使用caption 標(biāo)記可以給表格添加標(biāo)題，該標(biāo)題應(yīng)位于table 標(biāo)記與t標(biāo)記之間的位置。 (3)t(Table Row)標(biāo)記是成對(duì)標(biāo)記，表示行開始，表示行結(jié)束。 (4)th(Table Heading表頭)標(biāo)記是成對(duì)標(biāo)記，兩標(biāo)記之間的內(nèi)容不自動(dòng) 在一個(gè)表格中，可以插人多個(gè)口標(biāo)記，表示多行，一組標(biāo)記表示插入一行中、不加粗。一行中可以有多個(gè)列，列中的內(nèi)容可以是文字、數(shù)據(jù)、圖像、超鏈接、表單元素等

3.2 表格屬性設(shè)置

表格是網(wǎng)頁(yè)文件中布局的重要元素，制作網(wǎng)頁(yè)的過程中常常需要對(duì)網(wǎng)頁(yè)中的表格做一些設(shè)置，對(duì)表格的設(shè)置實(shí)質(zhì)是對(duì)表格標(biāo)記屬性的一些設(shè)置。

3.2.1 表格邊框?qū)傩?/p>

設(shè)置表格標(biāo)記中的邊框?qū)傩钥梢愿淖儽砀竦耐庥^。表格邊框?qū)傩?/p>

語(yǔ)法:

，

表示標(biāo)題開始，

，
(1)table標(biāo)記是成對(duì)標(biāo)記， 表示表格開始，表示表格結(jié)束。 (2)caption標(biāo)記是成對(duì)標(biāo)記，
表示表頭開始，表示表頭結(jié)束，設(shè)計(jì)表格時(shí)，表頭常常作為表格的第1行或者第1列，用來(lái)對(duì)表格單元格的內(nèi)行說(shuō)網(wǎng)貢設(shè)計(jì)與表頭文字內(nèi)容一般居中、加粗顯示。 (5)td(Table Data)標(biāo)記是成對(duì)標(biāo)記，定義單元格或列。以	開始，以	結(jié)束表頭可以用 山 標(biāo)記定義，也可以用 d 標(biāo)記定義，但

….. (1)border屬性。用于設(shè)置邊框的粗細(xì)，單位是像素。 (2)bordereolor屬性。用于設(shè)置表格邊框的顏色，可以使用rgb函數(shù)、十六進(jìn)制數(shù)和顏色英文名稱。 (3)bordercolorlight屬性。用于設(shè)置表格亮邊框，對(duì)表格左上邊框生效

(4)bordercolordark屬性。用于設(shè)置表格暗邊框，對(duì)表格右下邊框生效

3.2.2 表格的寬度和高度屬性

通過設(shè)置width屬性和height，屬性可以設(shè)置表格的寬度和高度，語(yǔ)法:

… (1)width。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的寬度

(2)height。其單位可以是長(zhǎng)度單位或百分比，用于定義表格的高度。

設(shè)置表格標(biāo)記中的高度與寬度為百分比時(shí)，表格會(huì)跟隨瀏覽器窗口的改變而自動(dòng)調(diào)整

?

3.2.3 表格背景顏色與背景圖像屬性

設(shè)置表格的bgeolor屬性可以改變表格的背景顏色，設(shè)置表格的background屬性可以為表格增添背景圖像效果，使表格更加美觀。 語(yǔ)法:

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

…. (1)bgcolor?？梢杂胷gb 函數(shù)、十六進(jìn)制、英文顏色名稱來(lái)設(shè)置背景顏色 (2)background。設(shè)置背景圖像，圖像的路徑可以是絕對(duì)路徑或相對(duì)路徑。

(3)同時(shí)設(shè)置背景顏色和背景圖像屬性時(shí)，背景圖像會(huì)部分或完全覆蓋背景顏色。

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

3.2.4 表格邊框樣式屬性

設(shè)置表格標(biāo)記中的fame屬性可以改變表格邊框的樣式;設(shè)置表格標(biāo)記中的mles屬性可以改變表格內(nèi)部邊框的樣式。 語(yǔ)法:

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

…內(nèi)容.

?1.

?

?2.

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

3.

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

3.2.5 表格單元格間距、單元格邊距屬性

設(shè)置表格標(biāo)記中的cellspacing屬性可以改變表格單元格之間的間隔，使網(wǎng)頁(yè)中的表格內(nèi)容稍微松散一些。設(shè)置表格標(biāo)記中的cellpadding屬性可以增加表格單元格的內(nèi)容與內(nèi)部邊框鈷靈之間的距離。 語(yǔ)法:

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

(1)cellspacing。值的單位為像素或百分比，默認(rèn)值為2px。 (2)cellpadding。值的單位為像素或百分比。

1.?

?

?2.

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

3.2.6 表格水平對(duì)齊屬性

通過設(shè)置表格標(biāo)記的aign屬性，可以設(shè)定表格在水平方向上的對(duì)齊方式。對(duì)齊方式有居左、居中、居右3種。語(yǔ)法:

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

…

3.2.7 設(shè)置表格的(tr)標(biāo)記行的屬性

通過t標(biāo)記的align屬性可以設(shè)置行內(nèi)容的水平對(duì)齊方式。水平對(duì)齊方式有居左對(duì)齊、居中對(duì)齊和居右對(duì)齊。通過t標(biāo)記的valign屬性可以設(shè)置行內(nèi)容的垂直對(duì)齊方式。垂直對(duì)齊方式有頂部對(duì)齊、居中對(duì)齊和底部對(duì)齊。 語(yǔ)法:

?

...

說(shuō)明:left表示設(shè)置行內(nèi)容居左對(duì)齊;center表示設(shè)置行內(nèi)容居中對(duì)齊;right表示設(shè)行內(nèi)容居右對(duì)齊。top表示設(shè)置行內(nèi)容頂部對(duì)齊;midde表示設(shè)置行內(nèi)容居中對(duì)齊;botter表示設(shè)置行內(nèi)容底部對(duì)齊。其中行垂直居中對(duì)齊屬性值與行水平居中對(duì)齊屬性值不同。

?

?2.

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

?3.

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

3.2.8 設(shè)置單元格的屬性

表格的列(td)標(biāo)記的屬性可以設(shè)置表格單元格的顯示風(fēng)格。

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女

?

?3.2.9 表格單元格跨行、跨列屬性

1.單元格跨行

使用單元格d標(biāo)記的rowspan 屬性可以設(shè)置單元格跨行合并

語(yǔ)法:…說(shuō)明:rowspan屬性可以設(shè)置單元格跨行。通過rowspan=”n”(n是正整數(shù))，可以置某一單元格跨n行，當(dāng)前行下的n-1行內(nèi)的單元格數(shù)量都需要減少一個(gè)，td 標(biāo)記。

2.單元格跨列 使用單元格td標(biāo)記的cospan屬性可以設(shè)置單元格跨列合并。 語(yǔ)法:

說(shuō)明:colspan屬性可以設(shè)置單元格跨列。通過colspan=”n"(n是正整數(shù))，可以設(shè)某一單元格跨n列，當(dāng)前行內(nèi)的單元格數(shù)量需要減少n-1個(gè)，即刪除n-1個(gè)td標(biāo)記。

3.3 表格嵌套

表格嵌套是一種常用的頁(yè)面布局方式。利用表格嵌套可以設(shè)計(jì)比較復(fù)雜且美觀的頁(yè)面效果。通常情況下，使用表格嵌套時(shí)，表格不宜過多使用，否則會(huì)降低網(wǎng)站訪問速度。表格嵌套一般采用在單元格內(nèi)嵌套表格。 語(yǔ)法:

23軟件1班名單

序號(hào)	姓名	性別
1	張三	男
2	李四	女	…

....

...... 3.4 表單 HTML中的表單是網(wǎng)頁(yè)中最常用的元素，是網(wǎng)站服務(wù)器端與客戶端之間溝通的橋梁。一個(gè)完整的交互表單由兩部分組成:一是客戶端包含的表單頁(yè)面，用于填寫瀏覽者進(jìn)行交互的信息;另一個(gè)是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息，瀏覽者在表單中輸入信息，然后將這些信息提交給服務(wù)器;服務(wù)器中的應(yīng)用程序會(huì)對(duì)這些信息進(jìn)行處理響應(yīng)，這樣就完成了瀏覽者和服務(wù)器之間的交互。 3.4.1 表單標(biāo)記 定義： ?標(biāo)簽用于創(chuàng)建HTML表單，用于收集用戶輸入的數(shù)據(jù)。屬性： action：提交表單時(shí)要發(fā)送數(shù)據(jù)的URL。method：發(fā)送表單數(shù)據(jù)的方法，通常是?GET?或?POST。enctype：用于文件上傳時(shí)的編碼類型，通常為?multipart/form-data。name：表單的名稱，用于識(shí)別表單。 3.4.2 定義域和域標(biāo)題 定義域：表單中的每一個(gè)輸入控件都是一個(gè)域。域標(biāo)題：可以使用??標(biāo)簽來(lái)定義輸入控件的標(biāo)題 個(gè)人信息 姓名： 性別： 男 女 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 其他信息 請(qǐng)輸入你的寶貴意見 請(qǐng)選擇你的職業(yè)規(guī)劃 前端 后端 運(yùn)維 測(cè)試 ? 3.4.3 表單信息輸入 表單的主要功能是為用戶提供輸入信息的接口，將輸入信息發(fā)送到服務(wù)器并等待服務(wù)器響應(yīng)。表單中輸人信息的標(biāo)記是inp 標(biāo)記，可以輸人一行信息。input標(biāo)記是單個(gè)標(biāo)記。 3.4.3.1 單行文本輸入框 定義：用于輸入單行文本。示例： 用戶名： 例子 用戶名： ? 3.4.3.2 密碼輸入框 定義：用于輸入密碼，輸入的字符會(huì)被隱藏。示例： 密碼： ?例子 用戶名： 用戶類型： 密碼： ? 3.4.3.3 復(fù)選框 定義：用于勾選多個(gè)選項(xiàng)。示例： 閱讀 運(yùn)動(dòng) 例子 姓名： 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 3.4.3.4 單選按鈕 定義：用于從多個(gè)選項(xiàng)中選擇一個(gè)。示例： 男 女 ?例子 姓名： 性別： 男 女 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 ? 3.4.3.5 圖像按鈕 定義：用于創(chuàng)建一個(gè)圖形按鈕，用戶可以點(diǎn)擊。示例： 例子 用戶名： 用戶類型： 密碼： 3.4.3.6 提交按鈕 定義：用于提交表單。示例： ?例子 用戶名： 用戶類型： 密碼： ? 3.4.3.7 重置按鈕 定義：用于重置表單。示例： ?例子 用戶名： 用戶類型： 密碼： 3.4.3.8 普通按鈕 定義：用于創(chuàng)建一個(gè)普通按鈕，通常與JavaScript結(jié)合使用。示例： ?例子 用戶名： 用戶類型： 密碼： 3.4.3.9 文件選擇框 定義：用于讓用戶選擇文件上傳。示例： ?例子 姓名： 性別： 男 女 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 ? 3.4.3.10 隱藏框 定義：用于存儲(chǔ)用戶看不到的信息。示例： 3.4.4 多行文本輸入框 定義：用于輸入多行文本。示例： 評(píng)論： </p><p> ?例子 姓名： 性別： 男 女 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 請(qǐng)輸入你的寶貴意見 3.4.5 下拉列表框 定義：用于創(chuàng)建下拉列表。示例： 選擇語(yǔ)言： 中文 英文 例子 姓名： 性別： 男 女 愛好：唱歌 跳舞 打籃球 足球 長(zhǎng)跑 請(qǐng)輸入你的寶貴意見 請(qǐng)選擇你的職業(yè)規(guī)劃 前端 后端 運(yùn)維 測(cè)試 3.5 綜合案例——表格與表單 案例1.達(dá)維工作室“聯(lián)系我們”子頁(yè) 網(wǎng)站首頁(yè) "zi1">關(guān)于我們 "zi1">團(tuán)隊(duì)合作 "zi1">相關(guān)作品 "zi1">設(shè)計(jì)理念 "zi1">人物介紹 "zi1">聯(lián)系我們   聯(lián)系我們 地址:廣東省江門市XXXXXXXXX 電話:0750-XXXXXX 傳真:0750-XXXXXX QQ:12345678 電子郵箱: 123@ 163.com 工作室網(wǎng)站: www. XXXX.com 關(guān)于我們 達(dá)維工作室是專業(yè)從事互聯(lián)網(wǎng)相關(guān)開發(fā)的公司。 專門提供全方們的優(yōu)質(zhì)服務(wù)和最專業(yè)的網(wǎng)站建設(shè)方案為企業(yè)打造全新電子商務(wù)平臺(tái)。 達(dá)維工作室成立于 2014年,已經(jīng)成為國(guó)內(nèi)著名的網(wǎng)站建設(shè)提供商。多年的風(fēng)雨歷程   更多 >> 團(tuán)隊(duì)合作 我們的團(tuán)隊(duì). 成員都具有多年的實(shí)際設(shè)計(jì)工作經(jīng)驗(yàn),滿足客戶的國(guó)際化需求設(shè)計(jì)師創(chuàng)意的思維模式,提供最適合的設(shè)計(jì)方案。 我們的承諾: 本工作室設(shè)計(jì)與制作的網(wǎng)站均屬原創(chuàng)、不套用網(wǎng)上的任何模板根據(jù)每個(gè)公司特點(diǎn),設(shè)計(jì)出屬于客戶……   更多 >> 結(jié)果 案例2.用戶注冊(cè)信息? 用戶注冊(cè)信息

用戶名:
密碼：
確認(rèn)密碼：
性別：	男 女
出生年月:	年 1 2 3 4 5 6 7 8 9 10 11 12 月
業(yè)余愛好：	看書 上網(wǎng) 打球
相片：
意見或建議：

柚子快報(bào)激活碼778899分享：第三章 表格布局與表單交互

http://yzkb.51969.com/

參考鏈接