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

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)潔明了和高效快捷的方式將圖片、文本據(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ù)單元格可以包含文本、圖片、列表、段落、表單、水平線或格等元素。表格中的內(nèi)容按照相應(yīng)的行或列進(jìn)行分類和顯示。

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

(1)table 標(biāo)記是成對(duì)標(biāo)記，

表示表格開始，表示表格結(jié)束。

(2)caption 標(biāo)記是成對(duì)標(biāo)記，表示標(biāo)題開始，表示標(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)t(Table Heading 表頭)標(biāo)記是成對(duì)標(biāo)記，表示表頭開始，表示表頭結(jié)束，設(shè)計(jì)表格時(shí)，表頭常常作為表格的第1行或者第1列，用來(lái)對(duì)表格單元格的內(nèi)行說(shuō)表頭文字內(nèi)容一般居中、加粗顯示。 (5)d(Table Data)標(biāo)記是成對(duì)標(biāo)記，定義單元格或列。以開始，以結(jié)表頭可以用出 標(biāo)記定義，也可以用 標(biāo)記定義，但兩標(biāo)記之間的內(nèi)容不自咖中、不加粗。

18軟件技術(shù)7班課程表

節(jié)次	星期一	星期二	星期三	星期四	星期五
第1-2節(jié)	數(shù)據(jù)庫(kù)	C語(yǔ)言	網(wǎng)頁(yè)設(shè)計(jì)	java	php
第3-4節(jié)	php	計(jì)算機(jī)數(shù)學(xué)			C語(yǔ)言
第5-6節(jié)	java			數(shù)據(jù)結(jié)構(gòu)	網(wǎng)頁(yè)設(shè)計(jì)
第7-8節(jié)	心理咨詢		數(shù)據(jù)庫(kù)

3.2 表格屬性的設(shè)置

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

設(shè)置表格標(biāo)記中的邊框?qū)傩钥梢愿淖儽砀竦耐庥^。表格邊框?qū)傩匀绫?-3所示。表格中的屬性同樣適用于單元格。

語(yǔ)法:

…..

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

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

3.2.2 表格的寬度和高度屬性

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

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

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

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

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

…. (1)bgcolor?？梢杂胷gb 函數(shù)、十六進(jìn)制、英文顏色名稱來(lái)設(shè)置背景顏色。

(2)background。設(shè)置背景圖像，圖像的路徑可以是絕對(duì)路徑或相對(duì)路徑。 (3)同時(shí)設(shè)置背景顏色和背景圖像屬性時(shí)，背景圖像會(huì)部分或完全覆蓋背景顏色。

3.2.4 表格邊框樣式屬性

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

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

語(yǔ)法:

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

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

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

...

?

?

?

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

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

......

…·

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

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

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

語(yǔ)法: …

?

設(shè)置單元格跨列、跨行屬性

專業(yè)研討會(huì)日程安排

上午		下午
8:00-10:00	10:10-12:00	14:00-16:00	16:10-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í)，表格不宜過(guò)多使用，否則會(huì)降低網(wǎng)站訪問(wèn)速度。表格嵌套一般采用在單元格內(nèi)嵌套表格。

嵌套表格布局頁(yè)面

logo 廣告條 導(dǎo)航

左欄目 正文內(nèi)容

版權(quán)信息

?

3.4 表單

HTML中的表單是網(wǎng)頁(yè)中最常用的元素，是網(wǎng)站服務(wù)器端與客戶端之間溝通的橋梁。個(gè)完整的交互表單由兩部分組成:一是客戶端包含的表單頁(yè)面，用于填寫測(cè)覽者進(jìn)行交耳的信息;另一個(gè)是服務(wù)端的應(yīng)用程序，用于處理瀏覽者提交的信息，瀏覽者在老單中輸人信息，然后將這些信息提交給服務(wù)器;服務(wù)器中的應(yīng)用程序會(huì)對(duì)這些信息進(jìn)行處理響應(yīng)，這樣就完成了瀏覽者和服務(wù)器之間的交互。

3.4.1 表單標(biāo)記

表單 fom 標(biāo)記為成對(duì)標(biāo)記，以

開始和

結(jié)束。表單定義了采集數(shù)據(jù)的范圍，其所包含的數(shù)據(jù)內(nèi)容將被完整地提交給服務(wù)器。

3.4.2 定義域和域標(biāo)題

利用feldset標(biāo)記可以在網(wǎng)頁(yè)上定義域，在表單中使用域可以將表單的相關(guān)元素進(jìn)行分組，heldset標(biāo)記將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。當(dāng)一組表單元素放到 heldset 標(biāo)記內(nèi)時(shí)，瀏覽器會(huì)以特殊方式來(lái)顯示它們，它們可能有特殊的邊界、3D 效果或者可創(chuàng)建一個(gè)子表單來(lái)處理這些元素。legend標(biāo)記為ieldset標(biāo)記定義域標(biāo)題 語(yǔ)法:

? ? ?

? ? ? ? ? ? ?

域標(biāo)題內(nèi)容

? ?

3.4.3 表單信息輸入

表單的主要功能是為用戶提供輸入信息的接口，將輸入信息發(fā)送到服務(wù)器并等待服務(wù)器響應(yīng)。表單中輸入信息的標(biāo)記是imput標(biāo)記，可以輸入一行信息。input 標(biāo)記是單個(gè)標(biāo)記 語(yǔ)法:

.單行文本輸入框 設(shè)置imput 標(biāo)記的type屬性值為text,可以實(shí)現(xiàn)向表單中插人一個(gè)單行文本框。在單行文本框中可以輸人任意類型的數(shù)據(jù)，但是輸人的數(shù)據(jù)只能單行顯示，不能換行。語(yǔ)法:

設(shè)置 input 標(biāo)記的 type 屬性值為 radio，可以實(shí)現(xiàn)向表單中插入一個(gè)單選按鈕，用戶可利用單選按鈕在網(wǎng)頁(yè)上為某一選擇設(shè)置多個(gè)單選項(xiàng)。 語(yǔ)法:

?

請(qǐng)?zhí)顚憘€(gè)人信息

姓名:

愛好:跳舞

踢足球

打游戲

性別:男

女

?

3.4.4 多行文本輸入框

textarea 標(biāo)記可以向表單中插入多行文本輸入框。多行文本輸入框可以用來(lái)輸入較多的文字信息，而且可以換行，并將這些信息提交到服務(wù)器。

?

請(qǐng)您填寫寶貴意見：

</p><p>

?

3.4.5 下拉列表框

下拉列表可以在表單中接收用戶的輸入。下拉列表通常需要同時(shí)使用select和option 標(biāo)記來(lái)在表單中插入下拉菜單和列表項(xiàng)。語(yǔ)法: 文字信息1 文字信息 2 ......

3.5 綜合案例——表格與表單

案例1

網(wǎng)站首頁(yè) 關(guān)于我們 團(tuán)隊(duì)合作 相關(guān)作品 設(shè)計(jì)理念 人物介紹 聯(lián)系我們

聯(lián)系我們 地址：廣東省江門市XXXXXXXX 電話: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ì)出屬于客戶……   更多>>

?案例2

用戶注冊(cè)信息

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

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

http://yzkb.51969.com/