HTML 表格
表格在我們?nèi)粘Ｉ钪泻艹Ｒ?，但是怎么在我們網(wǎng)頁中輸出表格呢？
<table> 標簽定義 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 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數(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>標簽增加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ī)律吧
更多實例
本例演示一個沒有邊框的表格。
<!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>
程序運行結(jié)果：
實例
本例演示如何顯示在不同的元素內(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>
代碼運行結(jié)果：
HTML 表格標簽
| ? ? ?標簽 | ? ? ?描述 |
| ? ? ?<table> | ? ? ?定義表格 |
| ? ? ?<th> | ? ? ?定義表格的表頭 |
| ? ? ?<tr> | ? ? ?定義表格的行 |
| ? ? ?<td> | ? ? ?定義表格單元 |
| ? ? ?<caption> | ? ? ?定義表格標題 |
| ? ? ?<colgroup> | ? ? ?定義表格列的組 |
| ? ? ?<col> | ? ? ?定義用于表格列的屬性 |
| ? ? ?<thead> | ? ? ?定義表格的頁眉 |
| ? ? ?<tbody> | ? ? ?定義表格的主體 |
| ? ? ?<tfoot> | ? ? ?定義表格的頁腳 |
