靜態(tài)網(wǎng)頁制作教程第三章表格

1、第三章 表格表格在對(duì)web頁上的信息格式和布局進(jìn)行控制的較好方法，它定義格式化信息有著強(qiáng)大的功能，能夠控制各種信息的位置，使得頁面結(jié)構(gòu)協(xié)調(diào)一致。一.創(chuàng)建一個(gè)簡(jiǎn)單表格二.定義單元格的高度和寬度三. 控制表格的邊框及邊框線四.創(chuàng)建跨單元格的存儲(chǔ)格在網(wǎng)頁中，表格的運(yùn)用是非常重要的技巧。在html中，表格的建立主要就運(yùn)用、四種標(biāo)記來顯示完成的1.和標(biāo)記：用于表示一個(gè)表格的組件。一個(gè)表格組件將由數(shù)個(gè)行、存儲(chǔ)格、標(biāo)題格子組件所組成。2.：用于定義表格的一行，一組標(biāo)記內(nèi)通常包含數(shù)組由或標(biāo)記所定義的存儲(chǔ)格。3.用于定義表格的存儲(chǔ)格。4.：用于定義表格的標(biāo)題存儲(chǔ)格，此存儲(chǔ)格中的文字將以粗體的方式顯示。在一個(gè)最基

2、本的表格組件中，必須包含一組標(biāo)記，一組標(biāo)記與一組標(biāo)記。語法如下：一.創(chuàng)建一個(gè)簡(jiǎn)單表格1.創(chuàng)建一個(gè)簡(jiǎn)單的表格2.給表格添加一個(gè)標(biāo)題3.如果需要，把表格的第一行設(shè)計(jì)為表頭4.給單元格和表格元素定義數(shù)據(jù)1.創(chuàng)建一個(gè)簡(jiǎn)單的表格輸入和標(biāo)記。如果要顯示表格單元格的邊框，則需在標(biāo)記中添加border屬性。并為border屬性設(shè)置值。如：2.給表格添加一個(gè)標(biāo)題使用和標(biāo)記來添加標(biāo)題，語法：表格標(biāo)題如果要添加的標(biāo)題位于表格的上方，則將表格標(biāo)題置于標(biāo)記下一行，如：表格標(biāo)題如果要將標(biāo)題置于表格下方，則將表格標(biāo)題置于標(biāo)記之前。如：表格標(biāo)題我們還可以像對(duì)待其他文本一樣，格式化和中的文本表格標(biāo)題3.把表格的第一行設(shè)計(jì)為表頭

3、通過標(biāo)記來指定表格中特殊表頭單元格，標(biāo)記之后的文本作為表頭單元格的一部分?？梢栽诒砀竦娜我獾胤绞褂眠@個(gè)標(biāo)記，表頭也不是必須要放在各列的頂部。當(dāng)表格的標(biāo)記和表格標(biāo)題輸入之后，在表格的每一列中放置一個(gè)標(biāo)記和該列中的文本。表格標(biāo)題第一列第二列第三列4.給單元格和表格元素定義數(shù)據(jù)使用標(biāo)記來建立單元格，并往其中添加數(shù)據(jù)，它的用法與標(biāo)記的用法十分相似。個(gè)人資料姓名居住地職業(yè)張三北京學(xué)生李四上海工程師王五深圳老師標(biāo)記的用法同類似，表格是用來創(chuàng)建表格中行的。如實(shí)例所示，表格的每一行都是由標(biāo)記來建立。根據(jù)需要，可把某個(gè)單元格設(shè)置成空數(shù)據(jù)格，即不輸入數(shù)據(jù)到該格中，也就是在標(biāo)記之后不輸入數(shù)據(jù)。李四工程師二.定義單元

4、格的高度和寬度表格的寬度由標(biāo)記的width屬性來控制，而高度則是由標(biāo)記的height屬性來控制的。語法分別為：width=數(shù)值height=數(shù)值數(shù)值的設(shè)定值若為一整數(shù)，則其單位為像素，若設(shè)定值為n%，則代表表格的寬度為整個(gè)網(wǎng)頁寬度的百分之n。如：將width屬性設(shè)為50%，代表此表格寬度為整個(gè)網(wǎng)頁寬度的一半。個(gè)人資料姓名居住地職業(yè)張三北京學(xué)生李四上海工程師王五深圳老師個(gè)人資料姓名居住地職業(yè)張三北京學(xué)生李四上海工程師王五深圳老師兩者設(shè)置寬度和高度的區(qū)別，當(dāng)改變?yōu)g覽器窗口大小的時(shí)候，用百分比設(shè)置的表格會(huì)隨瀏覽器窗口的變化而變化，而通過像素設(shè)定寬度和高度的表格的大小不會(huì)變化。以上是對(duì)整個(gè)表格的所有單

5、元格的高度和寬度的控制，也可以在標(biāo)記中添加width和height屬性來控制某一行的寬度和高度。如：三. 控制表格的邊框及邊框線通過標(biāo)記的屬性可以控制整個(gè)表格組件的格式。1.border屬性：用來控制表格邊框線的厚度，語法如下：border=數(shù)值，數(shù)值的設(shè)定若為整數(shù)，則其單位為像素(pixel)。2.cellspacing屬性：用于控制存儲(chǔ)格邊框到表格邊框的距離，框線的寬度。cellspacing=數(shù)值3.cellpadding:用于控制存儲(chǔ)格內(nèi)文字的邊緣到存儲(chǔ)格邊框的距離。cellpadding=數(shù)值設(shè)置表格的邊框姓名居住地職業(yè)張三北京學(xué)生李四上海工程師王五深圳老師4.設(shè)置表格背景顏色與邊框

6、厚度顏色標(biāo)記還有兩個(gè)屬性bgcolor屬性：控制表格的背景顏色bordercolor屬性：控制表格厚度的顏色5.設(shè)置表格的對(duì)齊方式表格對(duì)齊方式有兩種：水平方向和垂直方向align(水平方向)：align=left（水平左對(duì)齊）align=right(水平右對(duì)齊)align=center(水平居中對(duì)齊)valign(垂直方向)valign=top(垂直頂部對(duì)齊)valign=bottom(垂直底部對(duì)齊)valign=baseline(垂直一條公共基線對(duì)齊)valign=middle(垂直居中對(duì)齊)(1).align屬性可以放置于標(biāo)記中，控制整個(gè)表格在網(wǎng)頁中的對(duì)齊方式?？孔髮?duì)齊表格居中對(duì)齊表格靠右對(duì)齊表格(2).align和valign屬性也可以在標(biāo)記中控制對(duì)齊方式張三北京學(xué)生李四上海工程師王五深圳老師四.創(chuàng)建跨單元格的存儲(chǔ)格我們常常會(huì)看到有的表格里的某些存儲(chǔ)格跨了好幾個(gè)單元格，這是通過colspan和rowspan屬性來控制而達(dá)到的。colspan屬性：水平延伸存儲(chǔ)格，語