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

Web開發(fā)基礎(chǔ)第二章表格與頁面布局本章目標(biāo)網(wǎng)頁設(shè)計注意事項什么是表格？為什么需要表格？如何創(chuàng)建表格？表格如何使用？網(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ù)目的行和列組成球員得分籃板姚明278麥克格雷迪312海耶斯815巴蒂爾75阿爾斯通23表格應(yīng)用示例什么是表格？表格的作用：用于顯示數(shù)據(jù)，便于理解、分析組織網(wǎng)頁版面信息

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

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

“center”

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

“middle”

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