（中職）Web前端設計基礎 項目三-1電子課件

1、YCF正版可修改PPT（中職）Web前端設計基礎 項目三-1電子課件網(wǎng)頁中的表格項目三授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結(jié)6.技能訓練一 項目描述本項目學習要點表格的基本結(jié)構(gòu)；編輯表格；CSS屬性設置。完整的表格標簽；二 知識準備表格基本結(jié)構(gòu)；編輯表格；完整的表格標簽。表格基本結(jié)構(gòu)在HTML文檔中，使用表格可以清晰地排列數(shù)據(jù)和布局，但不建議使用表格布局，在web2.0時代，表格定位已經(jīng)過時了，現(xiàn)在使用的是“DIV+CSS”模式。表格一般由行、列和單元格組成，如圖所示。行列單元格表格基本結(jié)構(gòu)表格由 標簽來定義。每個表格均有若

2、干行（由 標簽定義），每行被分割為若干單元格（由 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。在HTML5中，用于創(chuàng)建表格的標簽如表所示。標簽說明注意事項用于標記一個表格對象的開始一個表格中，只允許出現(xiàn)一對標簽用于標記一個表格對象的結(jié)束用于標記表格一行的開始表格內(nèi)有多少對標簽，就表示有多少行用于標記表格一行的結(jié)束用于標記表格某行中的一個單元格的開始標簽應寫在標簽內(nèi)，一對標簽內(nèi)有多少對標簽，就表示有多少個單元格用于標記表格某行中的一個單元格的結(jié)束表格基本結(jié)構(gòu)在Sublime中創(chuàng)建表格的快速輸入方

3、法是輸入【table】后按Tab鍵可以生成一對標簽，但不能構(gòu)成一個有行有列的表格，最基本的表格必須包含一對標簽、一對或幾對標簽以及一對或幾對標簽。例如在Sublime編輯器中輸入【tabletr*2td*2】后按Tab鍵可以生成一個2行2列的表格代碼，如圖所示。表格的行高和列寬會根據(jù)表格內(nèi)容發(fā)生變化，如果想控制表格的行高和列寬，需要在和標簽中用width和height來定義行高和列寬。表格基本結(jié)構(gòu)例3-1創(chuàng)建一個4行3列的表格，網(wǎng)頁主體代碼如下所示（示例文件3-1.html）。圖書統(tǒng)計表序號名稱出版社1Web前端設計基礎北京理工大學出版社2Photoshop CS5圖像處理項目教程北京理工大學

4、出版社3計算機應用基礎北京理工大學出版社border用來設置表格邊框，默認情況下表格是沒有邊框的，加入邊框是讓讀者更清楚地看到表格結(jié)構(gòu)，如值為0則表格無邊框，如值為1表格邊框為1像素；cellpadding用來設置單元格內(nèi)容與其邊框之間的距離；cellspacing用來設置單元格之間的距離。height用來設置表格行的高度。width用來設置表格行寬。表格基本結(jié)構(gòu)例3-1創(chuàng)建一個4行3列的表格，網(wǎng)頁主體代碼如下所示（示例文件3-1.html）。圖書統(tǒng)計表序號名稱出版社1Web前端設計基礎北京理工大學出版社2Photoshop CS5圖像處理項目教程北京理工大學出版社3計算機應用基礎北京理工大學

5、出版社在chrome瀏覽器中預覽表格基本結(jié)構(gòu)表格一般都有一個標題，表格標題使用標簽，表格的標題一般位于整個表格的第1行，一個表格只能含有一個表格標題。標簽和在本質(zhì)上都是單元格，但是不能互換使用，兩者根本區(qū)別在于語義上。th（table header）為表頭單元格，td（table data cell）為單元格。對于表頭，可以用td標簽代替th標簽，但是不建議這樣做。為了清楚地表示表格中數(shù)據(jù)類別，需要使用表格的表頭。表頭是單元格的一種變體，它的本質(zhì)還是一種單元格，一般位于第一行或列，用來表明這一行或列的內(nèi)容類別。表頭有一種默認樣式，瀏覽器會以粗體和居中的樣式顯示元素中的內(nèi)容。表格基本結(jié)構(gòu)例3-2

6、創(chuàng)建一個帶有標題和表頭的表格（示例文件3-2.html）。銷量表銷量一季度二季度三季度華北657868西北989792華南1009593表格基本結(jié)構(gòu)例3-2創(chuàng)建一個帶有標題和表頭的表格（示例文件3-2.html）。銷量表銷量一季度二季度三季度華北657868西北989792華南1009593在chrome瀏覽器中預覽編輯表格1.合并單元格在實際應用中并非所有的表格都是規(guī)范的幾行幾列，而是需要將某些單元格進行合并，以符合某種內(nèi)容上的需求。在HTML中合并的方向有兩種，一種是上下合并，一種是左右合并，這兩種合并只需要使用td標簽的colspan和rowspan兩個屬性即可。要合并左右單元格使用td

7、標簽的colspan屬性來實現(xiàn)，格式如下：單元格內(nèi)容其中colspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個單元格進行左右合并。要合并上下單元格使用td標簽的rowspan屬性來實現(xiàn)，格式如下：單元格內(nèi)容其中rowspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個單元格進行上下合并。編輯表格1.合并單元格【例3-3】創(chuàng)建如圖所示報名表（示例文件3-3.html）。上圖中的“姓名”、“學?！薄ⅰ鞍嗉墶?、“創(chuàng)作說明”后的單元格進行了左右合并，使用了colspan；“參賽項目”單元格進行了上下合并，使用了rowspan。編輯表格1.合并單元格參賽報名表姓名 性別出生年月學校班級參賽項目征文大賽中學組小學組繪

8、畫大賽中學組小學組創(chuàng)作說明編輯表格1.合并單元格合并單元格以后，相應的單元格標簽就應該減少，例如上面例題中的表格應有7列，代碼的第11-16行，共有6個列標簽，其中第12行列標簽中colspan的值為2，說明在此左右合并了兩個單元格，減少了1個列標簽；第19-22行的代碼中，第20行和22行分別進行了2列和3列的左右合并，減少了3個列標簽。減少了的單元格就應該丟掉，否則單元格就會多出來一個，并且后面的單元格依次向右位移。通過上面對左右單元格和上下單元格合并的操作，合并單元格就是減少某些單元格。對于左右合并，就是以左側(cè)為準，將右側(cè)要合并的單元格減少；對于上下合并，就是以上方為準，將下方要合并的單

9、元格減少。編輯表格1.合并單元格【例3-4】將上例中的報名表修改為如圖所示，“參賽項目”單元格既進行了左右合并又進行了上下合并（示例文件3-4.html）。編輯表格1.合并單元格修改上例代碼的第24-32行，如圖所示。編輯表格2.設置表格、單元格背景創(chuàng)建好表格后，為了美觀還可以設置表格、單元格背景。如為表格、單元格添加背景顏色及定義背景圖片等。背景顏色用bgcolor=”顏色”來表示，設置表格背景顏色時bgcolor放在table標簽中，設置行背景顏色時bgcolor放在tr標簽中，設置單元格背景顏色時放在td標簽中。在HTML中顏色有3中表示方式，最常用的是6位16進制的代碼表示法。如bgc

10、olor=#ff0000，其中#表示使用6位16進制的顏色代碼聲明顏色，代碼的頭兩位表示三原色中的紅色，中間兩位表示綠色，最后兩位表示藍色，范圍是16進制的00ff，00表示沒有顏色，ff表示顏色最強。所以000000表示黑色，ffffff表示白色，同樣ff0000表示純紅色，00ff00表示純綠色，0000ff表示純藍色。編輯表格2.設置表格、單元格背景顏色還可以用rgb(r,g,b)表示，括號中的r、g、b分別用0-255的十進制數(shù)或百分比表示紅綠藍，例如rgb(255,0,0)以及rgb(100%,0%,0%)都表示紅色，在HTML5中也使用rgba來表示顏色，a表示前面rgb所顯示顏色

11、的透明度，取值范圍在0-1之間，不可為負值。如圖所示。編輯表格2.設置表格、單元格背景顏色的表示還可以用顏色的關鍵字表示，共16個，如表所示。關鍵字顏色16進制值關鍵字顏色16進制值black黑色#000000silver銀色#C0C0C0maroon深褐色#800000red紅色#FF0000green綠色#008000lime酸橙色#00FF00olive橄欖色#808000yellow黃色#FFFF00navy海軍藍#000080blue藍色#0000FFpurple紫色#800080fuchsia品紅#FF00FFteal水鴨綠#008080aqua水藍#00FFFFgray灰色#80

12、8080white白色#FFFFFF編輯表格2.設置表格、單元格背景【例3-5】設置表格、單元格背景（示例文件3-5.html），效果如圖所示。編輯表格2.設置表格、單元格背景表格結(jié)構(gòu)標簽說明table表格caption標題thead表頭（語義劃分）tbody表身（語義劃分）tfoot表尾（語義劃分）tr行th表頭單元格td表格單元格這一行使用background=images/tablebg.jpg顯示背景圖片完整的表格標簽按照表格結(jié)構(gòu)，可以把表格的行分組，稱為“行組”。不同的行組具有不同的意義。行組分為3類：表頭、主體和腳注，三者相應的HTML標簽依次為、 和 。完整的表格標簽【例3-6】完整表格標記制作的銷量表（3-6.html），效果如圖所示。完整的表格標簽銷量表（單位：萬元）銷量一季度二季度三季度總計889085華北667870西北989792華南1009593是代碼的內(nèi)容，雖然把這段代碼放在了表格第一行（表頭行）的后