簡單的html表格，由table元素以及一個或多個tr,th,td元素組成。
tr:定義表格行
th:定義表格頭
td:定義表格單元
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
可選屬性：
align:
- left 字體靠左，右，居中
- center 字體靠右
- right 字體靠居中
bqcolor：表格背景色
- rgb(x,x,x)
- #xxxxxx
- colorname
border:表格邊框的寬度
cellpadding:單元格邊緣與其內容之間的距離
- pixels
- %
cellspacing:單元格之間的空白
- pixels
- %
示例代碼：
<body>
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>第一列</th>
<th align="left">第二列</th>
<th bgcolor="aqua">第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td>row2 col1</td>
<td>row2 col2</td>
<td>row2 col3</td>
</tr>
<tr>
<td>row3 col1</td>
<td>row3 col2</td>
<td>row3 col3</td>
</tr>
</tbody>
</table>
</body>
上圖看看：
效果怎么樣呢？
再看看邊框屬性吧：
fram:外側邊框哪個可見
- void 外邊框四邊不見了
- above 僅上邊框可見
- below 僅下邊框可見
- hsides 僅上下邊框可見
- lhs 僅左邊框可見
- rhs 僅右邊框可見
- vsides 僅左右邊框可見
- box 四邊均可見
- border 單元格邊框可見
rules:內側邊框哪個可見
- none 無內側邊框
- groups 僅上邊框可見
- rows 僅行間邊框可見
- cols 僅列間邊框可見
- all 內邊框均可見
表格的概要與寬度
summary：表格的概要
width：表格的寬度
- %
- pixels
再看看其它表格效果吧：
上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" cellpadding="10" width="800px" bgcolor="#5f9ea0"> <tr> <th>機型</th> <th>CPU</th> <th>內存</th> <th colspan="2">描述信息</th> </tr> <tr> <th rowspan="2">DELL2950</th> <td>2.4GHZ</td> <td>16GB</td> <td> <p>CPU壞了一顆</p> <p>工程師明上午來修</p> </td> <td> <table border="1"> <tr> <th>姓名</th> <th>電話</th> </tr> <tr> <td>孔扎根</td> <td>15211089765</td> </tr> </table> </td> </tr> <tr> <td>2.4GHZ*2</td> <td>16GB</td> <td> <ul> <p>花費詳單</p> <li>服務器5800塊</li> <li>兩顆CUP共1萬塊</li> <li>內存花了4000塊</li> </ul> </td> <td>200GB</td> </tr> <tr> <th>DELL5800</th> <td>2.4GHZ*2</td> <td>32GB</td> <td>800GB</td> <td>800GB</td> </tr> <tr> <th>DELL9700</th> <td>2.4GHZ*8</td> <td>128GB</td> <td>2TB</td> <td>2TB</td> </tr> </table> </body> </html>
解釋圖：
最終效果圖：
