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

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

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

“center”

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

“middle”

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