1、第5章 表格,網(wǎng)頁設(shè)計與制作實例教程,網(wǎng)頁設(shè)計與制作實例教程,知識要點,表格標記 表格的基本結(jié)構(gòu) 表格的屬性 表格的結(jié)構(gòu)標記,網(wǎng)頁設(shè)計與制作實例教程,實例5-1 表格的基本標記,一個簡單的表格是由四對標記組成的，分別是： 1表格標記 定義一個表格，每一個表格只有一對和，一張頁面中可以有多個表格。 2表格行標記 定義表格的行，一個表格可以有多行，所以和對于一個表格來說不是唯一的。 3.表格單元格標記 定義表格的一個單元格，每行可以有不同數(shù)量的單元格，在和之間是單元格的具體內(nèi)容。 定義表頭單元格，位于與之間的文本默認以粗體居中顯示。,網(wǎng)頁設(shè)計與制作實例教程,表格的基本結(jié)構(gòu),定義表格 定義表行 定義

2、表頭 定義單元格 ,網(wǎng)頁設(shè)計與制作實例教程,實例5-2 表格的寬和高,1表格的寬度 Width屬性 指定整個表格或表格的某一行和某個單元格的寬度。單位可以是百分比（%）或者像素（px）,百分比設(shè)置寬度的相對值，像素設(shè)置寬度的絕對值。 2表格的高度 height屬性：指定整個表格或表格中的某一行和某個單元格的高度。單位可以是百分比（%）或者像素（px）,百分比設(shè)置高度的相對值，像素設(shè)置高度的絕對值。,網(wǎng)頁設(shè)計與制作實例教程,實例5-3 表格的邊框,表格邊框是通過border屬性來設(shè)置的。,網(wǎng)頁設(shè)計與制作實例教程,實例5-4 表格的邊框顏色,bordercolor屬性可以指定表格或某一個單元格的邊

3、框顏色，它也可以指定某一行的邊框顏色，格式分別為、和。,網(wǎng)頁設(shè)計與制作實例教程,實例5-5 表格的背景色和背景圖像,bgcolor屬性用于指定表格或某一個單元格的背景顏色，background屬性用于指定表格或某一個單元格的背景圖片。格式分別為和 ， 和。,網(wǎng)頁設(shè)計與制作實例教程,實例5-6 表格的對齊方式,1.表格的水平對齊 align屬性：指定表格在窗口中的水平對齊方式，也可以指定某一行或某一個單元格里的內(nèi)容（文本、圖片等）相對于所在單元格的水平對齊方式。有三個值，left、center和right，分別代表左對齊、居中對齊和右對齊。格式分別為、和。 2.單元格的垂直對齊 valign屬性

4、：指定某一行或某一個單元格里的內(nèi)容（文本、圖片等）相對于所在單元格的垂直對齊方式。有top、middle、bottom和baseline四個值，分別代表頂端對齊、居中對齊、底部對齊和基線對齊，格式為和。,網(wǎng)頁設(shè)計與制作實例教程,實例5-7 表格間距和邊距,單元格的間距（cellspacing屬性）：指定表格中單元格之間的距離，格式為。 單元格的邊距（cellpadding屬性）：指定單元格里的內(nèi)容（文本、圖片等）距離單元格邊框的距離，格式為。,網(wǎng)頁設(shè)計與制作實例教程,實例5-8 單元格跨越列數(shù),Colspan屬性值表示當(dāng)前單元格跨越的列數(shù)，格式為，“#”處輸入列數(shù)值。,網(wǎng)頁設(shè)計與制作實例教程,實例5-9 單元格跨越多行,rowspan屬性值表示當(dāng)前單元格跨越的行數(shù),格式為,“#”處輸入行數(shù)值。,網(wǎng)頁設(shè)計與制作實例教程,實例5-10 表格結(jié)構(gòu)標記,，表的題頭(Header)，指定表格題頭部分的內(nèi)容。 ，表的正文(Body)，指定位于表格主體部分的內(nèi)容。 . - 表的腳注(Footer)，指定位于表格腳注部分的內(nèi)容。,網(wǎng)頁設(shè)計與制作實例教程,實例5-11 表格結(jié)構(gòu)標記的作用,在設(shè)置整個表格主體、題頭或腳注部分的屬性時，表格結(jié)構(gòu)標記的作用就顯而易見了。只要對thead、tbody和tfoot標記的屬性進行修改，就能對整個部分的所有單元格屬性進行修改，從而省去了逐一修改單元格屬