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

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

什么是表格？行列列標題在HTML文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像單元格表格標題如何創(chuàng)建表格?表格用<table>表示一個表格可以有很多行，用<tr>表示每行可以分為多個單元格，用<td>表示演示：一行一列一行三列兩行三列<table>標簽及其屬性border屬性表格邊框演示：不顯示邊框的表格演示：顯示邊框的表格align表格對齊演示：居左，居中，居右對齊排版：新浪表格背景bgcolor background顏色表示的3種方法注：align、bgcolor屬性不贊成使用，應使用css控制<table>標簽及其屬性表格寬度width高度height單位設置像素(px)百分比(%)演示設置寬度，高度避免出現(xiàn)水平滾動條一般不設置高度(自適應)cellspacing，cellpadding屬性cellspacing設置單元格間距cellpadding設置單元格邊沿和其內(nèi)容之間的距離table的常用屬性<tr>標簽及其屬性align屬性屬性值：“l(fā)eft”

、“center”、“right”注意區(qū)別<table>的align屬性valign屬性屬性值：“top”、“middle”、“bottom”bgcolor屬性背景顏色設置考慮設置優(yōu)先級的問題<td>標簽及其屬性align屬性屬性值：”left”

“center”

“right”注意區(qū)別<table>的align屬性valign屬性屬性值：”top”

“middle”

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