2024年-DW網(wǎng)頁設(shè)計-第章表格學(xué)習(xí)課件

第8章表格沒有CSS之前，表格是最流行的布局頁面的方式。它表示一種布局頁面的方法，而不僅僅只是指單元格組成的表格，不過那已經(jīng)是很久以前的事情了?，F(xiàn)在談?wù)揥eb設(shè)計的時候，再說到“表格”，那么它就是一個普通的由單元格組成的表格。12024/5/158.1理解頁面中的表格表格看上去雖然只是一個一個的小格子組成的，但是，談及在HTML中制作表格，遠(yuǎn)遠(yuǎn)不是看上去的那么直接。表格涉及的屬性很多，因為人們在表述表格的時候，不是說“某某表格左上角的那個格子”，而是通過描述某一行和某一列來定位某個單元格的位置，這里就已經(jīng)描述了3個屬性了。22024/5/158.2普通表格的應(yīng)用這種表格常見于類似于課程表、出勤表、或者價目表這種形式的表格，被使用的頻率很高。因此，如果只是針對于簡單的文本內(nèi)容，僅僅是希望這些內(nèi)容橫排或者豎排，那么表格是一個比較好的方法。32024/5/158.2.1制作普通表格表格屬于結(jié)構(gòu)性標(biāo)簽，使用<table>標(biāo)簽來進(jìn)行創(chuàng)建。一個最簡單的表格也需要具備表頭、行、列的信息。所以它的代碼是這樣的。42024/5/158.2.1制作普通表格<table><tr><th>Head1</th><th>Head2</th></tr><tr><td>row1,cell1</td><td>row1,cell2</td></tr><tr><td>row2,cell1</td><td>row2,cell2</td></tr></table>52024/5/158.2.1制作普通表格這樣看代碼真的很難想象這個表格是什么樣子，如果用表格的形式去表達(dá)這段代碼，則下圖8所示。62024/5/158.2.1制作普通表格當(dāng)然，表格的代碼也可能寫成如下代碼。<table><tr><th>Head1</th><td>row1，cell2</th></tr><tr><th>Head2</th><td>row2,cell2</td></tr><tr><th>Head3</th><td>row3,cell2</td></tr></table>72024/5/158.2.1制作普通表格這是以列為表頭的表格，其結(jié)果如下圖所示。82024/5/158.2.1制作普通表格或者也可以寫成如下代碼，將第一組的<tr>標(biāo)簽內(nèi)的對象全部定義為表頭。此后每一組<tr>標(biāo)簽內(nèi)的第一個標(biāo)簽定義為<th>標(biāo)簽，即之后的每一行的第一個單元格表示為表頭。這樣就是分別以行和列的第一個單元格作為表頭。92024/5/158.2.1制作普通表格<table><tr><th>Head1</th><th>HEAD1</th></tr><tr><th>Head2</th><td>row1,cell2</td></tr><tr><th>Head3</th><td>row23,cell2</td></tr></table>102024/5/158.2.2表格的基本屬性表格的基本屬性就是指表格的行、列和單元格，但并不是每一個表格的單元格都是統(tǒng)一大小，所以這就需要設(shè)計者通過一些屬性參數(shù)去修改表格的樣子，讓它們可以變得更多樣性一些。112024/5/151．行高HEIGHT屬性默認(rèn)情況下，一個空白表格的單元格是平均分配的，所以如果需要自定義行高，可以使用height屬性來設(shè)置每一行單元格的行高?？梢允褂肅SS樣式表先定義table，然后定義th或者tr。若想改變表格的表頭行高，則樣式表應(yīng)該寫為：<styletype="text/css">table{height:185px;}tableth{height:32px;}</style>122024/5/151．行高HEIGHT屬性當(dāng)使用這個CSS時，結(jié)果如下圖所示。132024/5/152．寬度WIDTH屬性如果只是需要修改表格列的寬度，則只使用width屬性就可以了。但是不同于行高的是，表格中的寬度是針對整個表格或者每一個單元格的，所以像下面這樣的寫法是錯誤的。table{width:400px;}tableth{width:100px;}142024/5/153．單元格大小屬性HEIGHT和WIDTH單元格的大小其實就是由高和寬兩個因素組成的。所以如果要準(zhǔn)確定位一個單元格的具體大小，這兩個因素是缺一不可的，必須要同時具備，這樣才能定位每個單元格的大小。152024/5/158.2.3合并單元格合并同行單元格使用colsplan屬性。在需要修改的那一行中，先刪除多余的單元格，這是重要的一步，如果刪錯了單元格，很可能最后呈現(xiàn)的表格會面目全非。這之后再定義合并的單元格。合并同列的單元格使用rowspan屬性，這里介紹一種合并單元格的方法。162024/5/158.2.4表格標(biāo)題表格標(biāo)題是一個表格的內(nèi)容的總結(jié)，通常被居中顯示在表格的上方。<caption>標(biāo)簽是用來定義表格的標(biāo)題的，它必須緊隨<table>標(biāo)簽之后，并且每個表格只能定義一個標(biāo)題。其語法結(jié)構(gòu)如下：<table><caption>表格的名字</caption>…<caption>表示標(biāo)簽添加的標(biāo)題，默認(rèn)情況下在表格上方居中的位置，它會根據(jù)不同表格的寬度來改變位置。172024/5/158.2.5拆分表格為了便于將表格定位給CSS樣式表，有時候不希望代碼中一直都是<tr>標(biāo)簽，可以使用thead、tfoot、tbody來拆分表格。thead定義了表格的首行，tfoot定義了表格的尾行，tbody定義了表格的主體部分。這里有意思的是，如果使用了其中一個，那么全部元素都要用上。而且它們的出現(xiàn)次序是thead、tbody、tfoot，如以下代碼所示。182024/5/158.2.5拆分表格<thead>

<tr><td>thead</td>

</tr>

</theadt><tbody>

<tr><td>tbody</td></tr></tbody><tfoot>

<tr><td>tfoot</td></tr></tfoot>192024/5/158.2.6設(shè)置表格的列雖然HTML頁面中表格是按照一行一行這樣的概念建立起來的，但是可以使用<colgroup>定義表格列的分組。這個標(biāo)簽常和其他2個標(biāo)簽配合用，一個是<col>標(biāo)簽，一個是<span>標(biāo)簽。<col>標(biāo)簽表示為表格中一個或多個列定義屬性值，是僅包含屬性的空元素，只能在表格或colgroup中使用此元素。202024/5/158.3修飾單元格當(dāng)了解了表格的構(gòu)建原理之后，進(jìn)一步該討論的就是如何使設(shè)計的表格更美觀一些。表格是由一個一個的單元格組成，美化表格的要點就在于如何去美化這些單元格。談到修飾，最好的方法還是使用樣式表。設(shè)計者可以利用很多優(yōu)秀的屬性徹底改變表格的樣式。212024/5/158.3.1通過CSS修飾單元格的邊框修改邊框可以使用border屬性，其不僅僅可以修改邊框的粗細(xì)，也能修改邊框的顏色和樣式。默認(rèn)情況下，邊框的值是0，即沒有邊框。邊框顏色和文本顏色默認(rèn)情況下是相同的。一個標(biāo)準(zhǔn)的邊框定義在樣式表中可以寫成這樣：border:2pxsolidred;222024/5/158.3.2合并相鄰單元格<table>標(biāo)簽制定的表格，會在所有的單元格之外，再框上一個“四邊形”，而每一個單元格又是獨立存在的。所以單元格和單元格之間總像是有一條縫隙，有一種方式可以消除這條縫隙，就是使用“邊框擠壓”的屬性border-collapse，如下代碼所示。

{

border-collapse:collapse;}232024/5/158.4編輯單元格中的內(nèi)容表格是由許多個單元格組成，而這些單元格中又可以放入多種類型的頁面內(nèi)容，諸如文本、圖像或者超鏈接等，甚至可以再放入新的表格。這種表格的嵌套曾經(jīng)是非常流行的布局頁面的方法，只是這種方法太過繁瑣。通過樣式表來修飾表格中的內(nèi)容就容易多了。242024/5/158.4.1單元格中文本與單元格大小單元格的大小會隨著格內(nèi)文本的長度自行縮放。雖然通過數(shù)值可以固定單元格的大小，但是如果文本的長度超過所設(shè)置的單元格長度，那么依然會根據(jù)文本的長度來做決定。使用table-layout屬性可以限制單元格隨文本長度而改變，如下代碼所示。{table-layout:fixed;}252024/5/158.4.2修飾單元格中的內(nèi)容通過CSS定義單元格中的文本時，可以專門地指定某一行、某一列，或者是整個表格，比如文本顏色、背景、背景圖片等。例如：td{text-align:center;font:.7em幼圓;color:#334542;background-color:#ddd;}樣式表中可放入的屬性有很多，也有一些是專門的屬于表格的樣式表，如下表所示，有興趣的讀者可以嘗試一下效果。262024/5/158.4.2修飾單元格中的內(nèi)容

272024/5/158.5案例：制作球賽積分表足球是一項非常有魅力的比賽，每當(dāng)大賽來臨，都能吸引一大批狂熱的球迷，每每看到大賽的時間表、積分表都顯得特別有活力。下面的例子中將介紹如何用表格制作出一