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

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

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

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

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