輕松學(xué)HTMLCSS之表格.pptx

第8章 表格,表格是網(wǎng)頁的一個(gè)重要容器元素，可包含文字和圖像。表格使網(wǎng)頁結(jié)構(gòu)緊湊整齊，使網(wǎng)頁內(nèi)容通俗易懂。表格的使用方法靈活，但內(nèi)容繁多。本章我們就來介紹表格的使用方法。,8.1 表格的構(gòu)建,表格由標(biāo)簽來定義。每個(gè)表格均有若干行，由標(biāo)簽定義；每行被分割為若干單元格（即列），由標(biāo)簽定義。下面給出一個(gè)表格的整體示意圖，如圖8.1所示：,8.1 表格的構(gòu)建,表格的定義語法規(guī)則如下所示：,8.1.1 表頭單元格,表頭單元格是指表格頭部的單元格格式，通過標(biāo)簽定義。使用標(biāo)簽可以使此標(biāo)簽里的文本內(nèi)容字體變粗，以形成表頭的格式。標(biāo)簽寫在標(biāo)簽里面，定義語法形式如下所示：,8.1.2 單元格數(shù)據(jù)標(biāo)簽,單元格數(shù)據(jù)標(biāo)簽，也是列標(biāo)簽，用來設(shè)置表格的列。標(biāo)簽用來添加文本內(nèi)容，在標(biāo)簽里面，與標(biāo)簽并列出現(xiàn)。定義語法形式如下所示：,8.1.3 表格的標(biāo)題,表格的標(biāo)題是指表格的題目，顯示在表格的最上面。通過標(biāo)簽來定義，與表頭不同的是，標(biāo)簽設(shè)置的標(biāo)題不被包圍在邊框里面，而表頭設(shè)置的標(biāo)題被包圍在邊框的里面，放在標(biāo)簽中。定義語法形式如下所示：,8.2 表格外觀,表格的外觀變化越來越多樣，增加了網(wǎng)頁的可觀性，引起讀者極大的興趣。表格的外觀包括表格內(nèi)容的顏色變換、對齊方式、表格的背景顏色等，下面我們就來詳細(xì)介紹有關(guān)表格外觀的設(shè)置。,8.2.1 寬度（width）和高度（height）,當(dāng)單元格中的內(nèi)容較多時(shí)，需要調(diào)整表格單元格的高度和寬度。通常使用width屬性定義表格寬度，height屬性定義表格的高度，定義語法結(jié)構(gòu)如下所示：,8.2.2 背景顏色和圖像,網(wǎng)頁背景的設(shè)置也是網(wǎng)頁設(shè)計(jì)過程中最為常見的網(wǎng)頁元素。其中，網(wǎng)頁背景不僅可以添加背景顏色，還可以添加背景圖像。下面我們就分別來介紹在HTML和CSS中設(shè)置背景顏色和圖像。,1.在HTML中定義背景,網(wǎng)頁可以添加背景顏色和圖像，同樣，表格也可以添加背景顏色和圖像，使表格的外觀更加美觀。通過標(biāo)簽和標(biāo)簽進(jìn)行定義，定義語法規(guī)則如下所示：,2.在CSS中定義背景,在CSS中，定義背景的方法是現(xiàn)在較為流行的一種定義方式，使用background-color屬性對背景顏色進(jìn)行定義。定義語法如下：,8.2.3 間距、表格填充,表格的間距、填充影響著表格的外觀形式，下面我們就來詳細(xì)介紹間距、表格的填充設(shè)置，使得表格的外觀更清晰明了、大方美觀。,1.間距（cellspacing）,間距是指表格的邊框邊距，通過cellspacing屬性定義。形式如下圖8.2中所示，箭頭之間的距離就表示間距。,2.表格填充（cellpadding）,表格填充是指單元格內(nèi)容與單元格邊框之間的距離，通過cellpadding屬性進(jìn)行定義。在標(biāo)簽中定義，這樣可以對整個(gè)表格的距離進(jìn)行控制。定義語法形式如下所示：,8.2.4 表格行的對齊方式,表格里面有許多行，每個(gè)行都可以進(jìn)行獨(dú)立的設(shè)定。通過對行的獨(dú)立設(shè)定，可以對一些特殊的內(nèi)容進(jìn)行修飾，從而達(dá)到獨(dú)立的修飾效果。其中，包含水平對齊的設(shè)置和垂直對齊的設(shè)置，下面我們就來詳細(xì)介紹。,1.水平對齊（align）,水平對齊放在行里面，是指行里面的內(nèi)容都進(jìn)行水平對齊，通過align屬性定義。定義語法規(guī)則如下所示：,2.垂直對齊（valign）,垂直對齊放在行里面，是指行里面的內(nèi)容都進(jìn)行垂直對齊，通過valign屬性進(jìn)行定義。定義語法規(guī)則如下所示：,3.在CSS中定義表格文本對齊,在CSS中，表格文本的對齊方式通常使用text-align和vertical-valign屬性定義。定義水平對齊方式語法格式如下所示： 定義垂直對齊方式語法格式如下所示：,8.3 邊框,邊框是表格中很重要的一個(gè)部分，它可以排版網(wǎng)站，也可以美化網(wǎng)站。邊框的使用也是非常廣泛的，本節(jié)我們就來詳細(xì)講解邊框的各種用法。,8.3.1 邊框?qū)挾?border),邊框?qū)挾仁侵附o表格的邊框設(shè)置一個(gè)寬度，用來隔開表格和內(nèi)容。通過border屬性進(jìn)行定義，放在標(biāo)簽中，定義語法形式如下所示：,8.3.2 邊框顏色（bordercolor）,邊框顏色是上一節(jié)設(shè)置邊框時(shí)所產(chǎn)生的寬度的顏色。通過bordecolor屬性的設(shè)置，可以使表格的邊框多元化。bordercolor屬性寫在標(biāo)簽中，要在border屬性存在的情況下才可以產(chǎn)生效果，寫在border屬性后面。定義語法形式如下所示：,8.3.2 邊框顏色（bordercolor）,1.亮邊框顏色（bordercolorlight） 亮邊框是指左邊框和上邊框。亮邊框顏色是指左邊框和上邊框的顏色，通過bordercolorlight屬性進(jìn)行定義,而下邊框和右邊框仍是系統(tǒng)默認(rèn)顏色。定義語法形式如下所示：,8.3.2 邊框顏色（bordercolor）,2.暗邊框顏色（bordercolordark） 暗邊框是指右邊框和下邊框。暗邊框顏色值指右邊框和下邊框的顏色，通過bordercolordark屬性進(jìn)行定義。定義語法規(guī)則如下所示：,8.3.3 邊框顯示,邊框的顯示效果多種多樣，基本的定義語法如下所示：,8.4 跨多行、多列的表元,在同個(gè)表格里，并不一定每行每列都是一樣的行數(shù)和列數(shù)。由于網(wǎng)頁制作的需要，有可能行和列的數(shù)量一樣，此時(shí)就需要用到跨多行和多列的表元，通過設(shè)定來使同個(gè)表格下的行數(shù)和列數(shù)可以自行調(diào)整。本節(jié)將詳細(xì)講述跨多行和多列的表元內(nèi)容。,8.4.1 跨多列（colspan）,跨多列colspan屬性，是指把一行中的幾個(gè)列合并成一個(gè)列，實(shí)現(xiàn)一列跨過幾列的顯示效果。由于colspan屬性用于列中，需寫在標(biāo)簽中，語法形式如下所示：,8.4.2 跨多行（rowspan）,跨多行rowspan屬性，是指把幾行中的幾個(gè)咧合并成一個(gè)列，實(shí)現(xiàn)一列跨過幾行的效果，也需在標(biāo)簽中定義。定義語法形式如下所示：,8.5 表格行分組,表格行分組是指將表格分為表頭、主體、尾注。當(dāng)表格在比較復(fù)雜的網(wǎng)頁中使用時(shí)，可以將表格分為三大部分。使用了表頭、主體、尾注，再使用跨多行、跨多列時(shí)，需要注意，在三大部分中，屬性不能跨過其他任意兩大部分，這就局限了跨多行、跨多列的使用。,8.5.1 表頭標(biāo)簽,表頭是指表格中的標(biāo)題部分，和頁面中head部分定義上有相似之處。通過標(biāo)簽來定義，此標(biāo)簽的使用，可以使網(wǎng)頁中過長的表格在打印時(shí)，每頁的最前面都可以顯示表頭標(biāo)簽的內(nèi)容。由于標(biāo)簽是用來識別行的，故寫在標(biāo)簽的外面，定義語法形式如下所示：,8.5.2 主體標(biāo)簽,主體是指表格中的內(nèi)容部分，和頁面中body部分定義上有些相似。主體標(biāo)簽用于識別行屬性的主體部分。用法與表頭相同，寫在之外，定義語法形式如下所示：,8.5.3 尾注標(biāo)簽,尾注時(shí)指表格中的腳注部分。尾注標(biāo)簽用來識別行屬于表格的尾注部分，可以讓網(wǎng)頁中過長的表格在打印時(shí)，每頁的最后面都可以顯示出尾注標(biāo)簽的內(nèi)退。定義語法規(guī)則如下所示：,8.6 表格的嵌套,在網(wǎng)頁制作過程中，常常需要使用多