1、網(wǎng)站建設(shè)7html基礎(chǔ)

HTML基礎(chǔ)–表格內(nèi)容提要標(biāo)簽及基本語(yǔ)法表格的基本屬性單元格的屬性表格高級(jí)進(jìn)階第一章：標(biāo)簽及基本語(yǔ)法內(nèi)容提要表格標(biāo)簽表格的基本語(yǔ)法表格的常用屬性1.表格標(biāo)簽表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>描述定義表格定義表格標(biāo)題。定義表格的表頭。定義表格的行。定義表格單元。定義表格的頁(yè)眉。定義表格的主體。定義表格的頁(yè)腳。定義用于表格列的屬性。定義表格列的組。2.表格的基本語(yǔ)法表格由<table>標(biāo)簽來定義。每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。<table

border=“1”><tr><td>內(nèi)容2</td></tr><tr><td>內(nèi)容1</td></tr></table>點(diǎn)擊查看示例2.表格的常用屬性屬性值

描述規(guī)定表格相對(duì)周圍元素的對(duì)齊方式。alignleftcenterrightbgcolorrgb(x,x,x)#xxxxxxcolorname規(guī)定表格的背景顏色。borderpixels規(guī)定表格邊框的寬度。cellpaddingpixels?%規(guī)定單元邊沿與其內(nèi)容之間的空白。cellspacingpixels?%規(guī)定單元格之間的空白。width?%pixels規(guī)定表格的寬度。第二章：表格的基本屬性內(nèi)容提要表格的邊框表格的寬度及高度表格的背景表格的間距與填充1.表格的邊框1.1表格的邊框1.2表格的邊框顏色1.1表格的邊框基本語(yǔ)法：<table

border=“數(shù)字”><table>查看示例語(yǔ)法解釋：border：屬性定義表格外邊框線的寬度，單位為象素。1.2表格的邊框顏色基本語(yǔ)法：<table

border=“數(shù)字”bordercolor=“顏色”><table>查看示例語(yǔ)法解釋：bordercolor：設(shè)置表格的邊框的顏色，此設(shè)置針對(duì)于表格內(nèi)所有的邊框，不止針對(duì)與外邊框。2.表格的寬度及高度基本語(yǔ)法：<table

width=“數(shù)字”height=“數(shù)字”><table>查看示例語(yǔ)法解釋：width：設(shè)置表格的總體寬度height：設(shè)置表格的總體高度(100%高度必須在無版本聲明的情況下有效)。注意：?jiǎn)挝粸橄笏鼗虬俜直?，單位是百分比時(shí)，如果是非嵌套表格則是相對(duì)于瀏覽器窗口而言，若是嵌套表格則是相對(duì)其所在單元格寬度。3.表格的背景3.1表格背景顏色3.2表格背景圖片3.1表格的背景顏色基本語(yǔ)法：<table

bgcolor=“顏色”></table>查看示例語(yǔ)法解釋：bgcolor：定義表格的背景顏色3.2表格的背景圖片基本語(yǔ)法：<table

background=“背景圖片路徑”></table>查看示例語(yǔ)法解釋：background：定義表格的背景圖像，給出絕對(duì)路徑或

者相對(duì)路徑。如果圖片小于表格的大小將會(huì)按照平鋪的方式展現(xiàn)背景圖片。4.表格的間距與填充基本語(yǔ)法：<table

cellpadding=“數(shù)字”cellspacing=“數(shù)字”></table>查看示例語(yǔ)法解釋：cellpadding：設(shè)置單元格內(nèi)容與邊框之間的間距，以象素為單位。cellspacing：設(shè)置單元格與單元格之間的間距，以象素為單位。第三章：?jiǎn)卧駥傩詢?nèi)容提要單元格的基本屬性單元格的合并1.單元格的基本屬性1.1

tr行的屬性1.2

td,th列的屬性1.3結(jié)合使用行和列1.1

tr行的屬性定義和用法<tr>標(biāo)簽定義HTML表格中的行。tr元素包含一個(gè)或多個(gè)th或td元素?？蛇x屬性屬性值描述alignrightleftcenterrgb(x,x,x)#xxxxxxcolornametopmiddlebottom定義表格行的內(nèi)容對(duì)齊方式。bgcolor規(guī)定表格行的背景顏色。valign規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式。1.2td,th列的屬性定義和用法<td>標(biāo)簽定義HTML表格中的標(biāo)準(zhǔn)單元格。HTML表格有兩類單元格：表頭單元-包含頭部信息（由th元素創(chuàng)建）標(biāo)準(zhǔn)單元-包含數(shù)據(jù)（由td元素創(chuàng)建）td元素中的文本一般顯示為正常字體且左對(duì)齊。th元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本1.2td,th列的屬性(1)可選屬性屬性

值

描述alignleftrightcenterrgb(x,x,x)#xxxxxxcolornamenumber規(guī)定單元格內(nèi)容的水平對(duì)齊方式。bgcolor規(guī)定表格單元格的背景顏色。colspan設(shè)置單元格可橫跨的列數(shù)。heightpixels?%規(guī)定表格單元格的高度。rowspannumbertopmiddlebottompixels?%規(guī)定單元格可橫跨的行數(shù)。valign規(guī)定單元格內(nèi)容的垂直排列方式。width規(guī)定表格單元格的寬度。1.3結(jié)合使用行和列<table

cellpadding=“3”

cellspacing=“1”

width=“500”

border=“1”><tr

bgcolor=“#EEEEEE”><th

width=“100”>姓名</th><th

width=“150”>生日</th><th

width=“250”>戶籍</th></tr><tr

bgcolor=“#FFFFFF”><td

width=“100”>小明</td><td

width=“150”>1999.04.06</td><td

width=“250”>山西省太原市</td></tr><tr

bgcolor=“#FFFFFF”><td

width=“100”>丹丹</td><td

width=“150”>1998.07.21</td><td

width=“250”>山西省大同市</td></tr></table>查看示例2.單元格的合并2.1單元格跨列合并2.2單元格跨行合并2.3單元格跨列跨行結(jié)合使用2.1單元格跨列合并基本語(yǔ)法：<td

colspan=“橫跨的列數(shù)”></td>查看示例語(yǔ)法解釋：colspan：屬性規(guī)定表頭單元格可橫跨的列數(shù)。2.2單元格跨行合并基本語(yǔ)法：<td

rowspan=“橫跨的行數(shù)”></td>查看示例語(yǔ)法解釋：rowspan：屬性規(guī)定表頭單元格可橫跨的行數(shù)。2.3單元格跨列跨行結(jié)合使用<table

width="500"

border="1"><tr><th

colspan="4"></th></tr><tr

align="center"><th

rowspan=“2"></th><th></th><th></th><th></th></tr><tr

align="center"><td></td><td></td><td></td></tr></table>點(diǎn)擊查看示例第四章：表格高級(jí)進(jìn)階內(nèi)容提要表格高級(jí)標(biāo)簽表格的嵌套利用表格制作漂亮的導(dǎo)航1.表格高級(jí)標(biāo)簽概述：在HTML頁(yè)面table布局中，龐大的頁(yè)面代碼量會(huì)導(dǎo)致開發(fā)者眼花繚亂。所以table設(shè)計(jì)中特別制定了thead、tbody、tfoot、caption標(biāo)簽來定義table布局。thead元素應(yīng)該與tbody和tfoot元素結(jié)合起來使用。tbody元素用于對(duì)HTML表格中的主體內(nèi)容進(jìn)行分組，而tfoot元素用于對(duì)HTML表格中的表注（頁(yè)腳）內(nèi)容進(jìn)行分組。注釋：如果您使用thead、tfoot以及tbody元素，您就必須使用全部的元素。它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁(yè)腳了。您必須在table元素內(nèi)部使用這些標(biāo)簽。1.表格高級(jí)標(biāo)簽(1)基本語(yǔ)法：<table

border="1"><thead><tr><td>頁(yè)眉</td></tr></thead><tfoot><tr><td>頁(yè)腳</td></tr></tfoot><tbody><tr><td>主體內(nèi)容</td></tr></tbody></table>查看示例2.表格的嵌套概述：在頁(yè)面中，排版是通過表格的嵌套來完成的，如果都在一個(gè)表格中，復(fù)雜的布局難以實(shí)現(xiàn)，并且使瀏覽器渲染時(shí)間加長(zhǎng)，導(dǎo)致頁(yè)面顯示過慢。注意：表格嵌套只能嵌套在表格之中的<td>或<th>標(biāo)簽之內(nèi)示例：點(diǎn)擊查看示例3.利用表格制作漂亮的導(dǎo)航最終效果圖：需要素材：Logo：背景圖片：頁(yè)頭背景：導(dǎo)航背景：3.利用表格制作漂亮的導(dǎo)航(1)制作步驟：新建HTML文檔設(shè)置body的背景圖片為bg.png

在body內(nèi)設(shè)置2行1列的表格，表格總體寬度