第8章 表格.ppt

1、第8章 表格,表格的用途很廣，可以用來顯示表格型數(shù)據(jù)、圖片等，也可以用來布局。在前面的布局中常用表格，現(xiàn)在的網(wǎng)頁更往W3C標準方向發(fā)展，用DIV+CSS布局可取代表格。但表格不僅僅可以用來布局，還有其他功能，所以學習表格是很重要，雖然不常用于表格布局，但表格的其他用法不能用DIV+CSS取代。學完本章后，讀者會掌握： 標記table及tr、td用法 跨多行、多列的表格 表格內(nèi)文字對齊 表格在網(wǎng)頁中對齊 表格間隔,8.1 表格基本語法,表格在網(wǎng)頁中可以表現(xiàn)出Word中的表格效果，即在Word中要表現(xiàn)的表格效果可以在網(wǎng)頁中顯示，就需要HTML中的表格標記。表格標記不僅僅用于表現(xiàn)表格中的效果，還可以

2、用表格來給網(wǎng)頁布局，布局中的表格是不需要表格中的邊框的，故需要對表格進行設(shè)置。 表格是HTML常用的標簽，代表在網(wǎng)頁中插入一張表格。表格是用table標簽對表示的標簽對，其他語法形式如下： 這只是表示一張表格而已，但表格常常是有行和列的，那么，如何在表格內(nèi)表示行和列呢？這又要另外二個代碼，標簽對表示表行，每出現(xiàn)一個代表表格的一行；標簽對表示表頭，表頭是在表格上顯示下面列的；標簽對表示表元，表元就是在表格中顯示的每一方格。,8.2 跨多行、多列表元,當表格中的單元格有相同的或者需要設(shè)置相同的內(nèi)容時，需要設(shè)置單元格合并，合并可以為不同行的單元格，也可以為不同列的單元格，在網(wǎng)頁中可以來設(shè)置不同的單元

3、格合并，所表現(xiàn)的效果與Word中的表格一樣。 在表格中有時會合并單元格，所以對表格要進行跨行或跨列處理，使多個表元合成一個單元格?？绫碓挚缍嘈泻涂缍嗔校绫眍^th和表元td，跨行用rowspan表示，同理，跨列用colspan表示，下面分別對它們作詳細介紹。,8.2.1 跨多行表元,跨多行表元應(yīng)用在合并多行單元格時，跨多行表元語法在th和td上加rowspan表示，rowspan后面的值是數(shù)字，數(shù)字表示跨多少行表元，如跨3行表元表示如下： 或者如下表示： 這就表示跨越三行顯示，為了表達出效果是跨行的，從多行多列表格中實踐跨多行表元用法。,8.2.2 跨多列表元,與跨多行一樣，跨多列也放在

4、td和th中，表示在一行中跨多列表元。語法用colspan表示，完整語法如下： 或 表示跨多列，相應(yīng)的有多少列占用多少個單元格。,8.3 設(shè)置表格大小,表格可以設(shè)置寬度和高度，因為默認的是沒邊框的（邊框為0），邊框也可以設(shè)置寬度，本節(jié)首先介紹邊框?qū)傩?，然后又介紹了表格的高度和寬度。,8.3.1 設(shè)置表格邊框,邊框是用border表示嵌入在table標記里面的屬性，表示表格邊框的寬度，在學習表格大小前還對表格的邊框研究，表格邊框在表格標記里用border表示，語法形式如下。 標記border后面的值是寬度值，表示對象的邊框?qū)挾?，?shù)值越大，寬度就越大，代碼8.4是用實例表示表格邊框?qū)挾鹊摹?8.3

5、.2 設(shè)置表格高度和寬度,除了對表格邊框設(shè)置大小外，對整個表格也可以設(shè)置其大小，與其他參數(shù)一樣，只在標記table中，設(shè)置寬度用width表示，而高度用height表示。在網(wǎng)頁中的表格按設(shè)置的值來顯示，如下代碼表示設(shè)置表格的高和寬，即在表格標記中，設(shè)置width為300，設(shè)置height為200，默認單位值為像素，如代碼8.5所示。,8.4 表格內(nèi)文字對齊,在表格內(nèi)，文字對齊有在tr、th和td中對齊，在tr設(shè)置對齊方式后，tr內(nèi)的th和td都按設(shè)置的要求對齊，同理在多行中可以設(shè)置不同的tr對齊方式，th和td都可以設(shè)置其里面的文字或圖片的對齊。 對齊語法用align表示，后面接的值是left

6、、center和right，分別代表向左、居中和向右對齊，語法形式如下： 上面代表對齊在tr、th和td中，#表示align后面接的值，即left 、center和 right中的一個。,8.5 表格在網(wǎng)頁中對齊,表格是有大小的，有時在網(wǎng)頁中需要調(diào)節(jié)表格位置，如放在網(wǎng)頁中間或網(wǎng)頁右邊，需要對表格進行設(shè)置，設(shè)置表格在網(wǎng)頁中的對齊與上一節(jié)一樣，都會用到align語法，但不同的是在標簽對中，下面是表格在網(wǎng)頁中的對齊形式。 #表示與上一節(jié)也相同，就是left、center和right。代碼8.7表示表格在網(wǎng)頁的右邊顯示。,8.6 表格實例手把手,表格標記（table）在網(wǎng)頁中用來表示一張表格，其內(nèi)可以

7、用來布局，也可以用來顯示表格中的內(nèi)容。插入表格的方法為在標記對中放表格標記對，其中表格標記對中，還需要用一些標記表示表格中的內(nèi)容，如用th表示表頭，td表示表元等，這些標記都被包含在表格標記中。 本實例用表格做一張課程表，通過表格知識來實踐網(wǎng)頁中的表格表示，首先選取確定表格中的行和列數(shù)，然后確定有沒有必要做表頭，請看下面步驟。,8.6.1 表格中嵌入表格,確定表格行和列數(shù)并寫上表頭。課程在一星期中只有五天，確定有五列，如果按一天上四節(jié)課，分上午和下午，則確定有四行，如代碼8.8所示。,8.6.2 設(shè)置跨行和跨列,上一節(jié)設(shè)置了表格并添加表格中的課程，在多行和多列的表格中，需要對相同的課程進行合并，即所謂的對部分重復的課程跨行或跨列，這就需要對這些表元進行跨行和跨列，如代碼8.9所示。,8.7 小結(jié),本章講解了表格的應(yīng)用，首先從表格基本知識上，