HTML 表格
表格在我們?nèi)粘Ｉ钪泻艹Ｒ姡窃觞N在我們網(wǎng)頁中輸出表格呢？
<table> 標(biāo)籤定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr #元素定義表格行，##th 元素定義表頭，td 元素定義表格單元。
讓我們做個最簡單的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <tr> <td>1月份</td> <td>￥100</td> </tr> <tr> <td>二月份</td> <td>￥200</td> </tr> </table> </body> </html>程式運行結(jié)果：
cellspacing，單元格之間的距離
cellpadding
，文字和儲存格邊框的距離都是以像素為單位
border ?給文字加邊框? 將border設(shè)定成?border=0?表格將不顯示邊框
上面的三個屬性值是可以自己設(shè)的，根據(jù)自己的要求來設(shè)定#HTML 表格表頭
大多數(shù)瀏覽器會把表格頭顯示為粗體居中的文字：
#實例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<th>月份</th>
<th>金額</th>
<tr>
<td>1月份</td>
<td>￥100</td>
</tr>
<tr>
<td>二月份</td>
<td>￥200</td>
</tr>
</table>
</body>
</html>
程式運行結(jié)果：
colspan和rowspan
#透過給<td>標(biāo)籤增加colspan和rowspan兩個屬性，可以在橫向和縱向合併單元格############實例#############沒合併之前###
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td>單元格</td> <td>單元格</td> <td>單元格</td> </tr> <tr> <td>單元格</td> <td>單元格</td> <td>單元格</td> </tr> <tr> <td>單元格</td> <td>單元格</td> <td>單元格</td> </tr> </table> </body> </html>###程式運行結(jié)果：## ################合併之後###
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td colspan="2">單元格</td> <td>單元格</td> </tr> <tr> <td rowspan="2">單元格</td> <td>單元格</td> <td rowspan="2">單元格</td> </tr> <tr> <td>單元格</td> </tr> </table> </body> </html>######再看程式碼運行結(jié)果：#######
找找規(guī)律吧
更多重實例
本例示範(fàn)一個沒有邊框的表格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h4>這個表格沒有邊框:</h4> <table> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> <h4>這個表格沒有邊框:</h4> <table border="0"> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> </body> </html>
程式執(zhí)行結(jié)果：
#實例
##本例示範(fàn)如何顯示在不同的元素內(nèi)顯示元素。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <table border="1"> <tr> <td> <p>這是一個段落</p> <p>這是另一個段落</p> </td> <td>這個單元格包含一個表格: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個單元格包含一個列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>程式碼執(zhí)行結(jié)果：
#HTML 表格標(biāo)籤
| HTML 表格標(biāo)籤 | ? ? ? | #標(biāo)籤
| #? ? ? | 說明 |
| ? ? ?<caption> | #? ? ?定義表格標(biāo)題 |
| ? ? ?<colgroup>的組 | |
| ? ? ?定義用於表格列的屬性 | |
| ? ? ?定義表格的頁眉 | |
| ? ? ?定義表格的主體 |
| ? ? ?定義表格的頁腳 |
