HTML5前端頁面開發(fā)基礎(chǔ)表格

1、Web 開發(fā)基礎(chǔ)第二章 表格與頁面布局 本章目標(biāo)本章目標(biāo)網(wǎng)頁設(shè)計注意事項什么是表格？為什么需要表格？如何創(chuàng)建表格？表格如何使用？網(wǎng)頁設(shè)計注意事項網(wǎng)頁設(shè)計注意事項多瀏覽器支持樣式與風(fēng)格統(tǒng)一網(wǎng)站結(jié)構(gòu)、文件命名頁面尺寸與屏幕分辨率圖片文件命名、大小尺寸限制相對路徑的應(yīng)用頁面內(nèi)容（title、meta、alt、tbody等屬性的應(yīng)用）什么是表格？什么是表格？表格是html高級構(gòu)件之一，它表示數(shù)據(jù)之間的關(guān)系，使對比分析更容易理解。表格由特定數(shù)目的行和列組成球員得分 籃板 姚明27 8 麥克格雷迪 31 2 海耶斯 8 15 巴蒂爾 7 5 阿爾斯通 2 3 表格應(yīng)用示例表格應(yīng)用示例什么是表格？什么是表格

2、？表格的作用： 用于顯示數(shù)據(jù)，便于理解、分析 組織網(wǎng)頁版面信息什么是表格？什么是表格？行行列列列標(biāo)題在在 HTML 文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像單元格單元格表格標(biāo)題如何創(chuàng)建表格如何創(chuàng)建表格? ?表格用表示一個表格可以有很多行，用表示每行可以分為多個單元格，用表示 演示： 一行一列 一行三列 兩行三列 標(biāo)簽及其屬性標(biāo)簽及其屬性border 屬性 表格邊框 演示：不顯示邊框的表格 演示：顯示邊框的表格align 表格對齊 演示：居左，居中，居右對齊 排版：新浪 表格背景 bgcolor background 顏色表示的3種方法 注：注：a

3、lignalign、bgcolorbgcolor屬性不贊成使用，應(yīng)使用屬性不贊成使用，應(yīng)使用csscss控制控制 標(biāo)簽及其屬性標(biāo)簽及其屬性表格寬度 width 高度 height 單位設(shè)置 像素 (px) 百分比 ( %) 演示 設(shè)置寬度，高度 避免出現(xiàn)水平滾動條 一般不設(shè)置高度(自適應(yīng))cellspacing，cellpadding 屬性 cellspacing 設(shè)置單元格間距 cellpadding 設(shè)置單元格邊沿和其內(nèi)容之間的距離tabletable的常用屬性的常用屬性標(biāo)簽及其屬性標(biāo)簽及其屬性align 屬性 屬性值：“l(fā)eft” 、“center”、“right” 注意區(qū)別的align

4、屬性valign 屬性 屬性值：“top”、“middle”、“bottom”bgcolor 屬性 背景顏色設(shè)置 考慮設(shè)置優(yōu)先級的問題標(biāo)簽及其屬性標(biāo)簽及其屬性align 屬性 屬性值：”left” “center” “right” 注意區(qū)別的align屬性valign 屬性 屬性值：”top” “middle” “bottom”bgcolor 屬性 background 屬性 bgcolor 背景顏色設(shè)置 background 背景圖片設(shè)置 考慮設(shè)置優(yōu)先級的問題標(biāo)簽及其屬性標(biāo)簽及其屬性width屬性 height屬性 注意：同行或者同列單元格將受影響rowspan屬性 colspan屬性 rowspan屬性 將一個表格單元格擴展為幾行。 colspan屬性 將一個表格單元格擴展為幾列 演示 項目實戰(zhàn)利用rowspan和colspan屬性合并單元格其它表格標(biāo)簽其它表格標(biāo)簽 標(biāo)簽 作用：用來說明表格內(nèi)容的標(biāo)題 屬性：align， valign標(biāo)簽 作用：同標(biāo)簽 不同點:用粗體樣式標(biāo)記的文本表頭，對齊方式也不一樣 標(biāo)簽用表格進行頁面排版用表格進行頁面排版表格進行頁面排版 簡單，便捷 結(jié)構(gòu)清晰 表格嵌套使用演示表格排版注意事項：表格排版注意事項：表格嵌套層次不要太多整個頁面的排版不要用一個table，影響瀏覽器對頁面的顯示效率表格的行列排版要整齊td中沒有內(nèi)容時