html-表格標簽
阿新 • • 發佈：2018-10-31
spa 人員 cells colspan 顏色 cin rowspan pan div
表格標簽可以對數據進行格式化，使數據顯示更加清晰
<table></table>：表示表格的範圍
- border：表格線
- bordercolor：表格線的顏色
- cellspacing：單元格之間的距離
- width：表格的寬度
- height：表格的高度
** 在table裏面：<tr></tr>
- 設置顯示方式 aligh：left、center、right
** 在tr裏面：<td></td>
- 設置顯示方式 aligh：left、center、right
** 使用th也可以實現居中和加粗
* 代碼
<table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
** 表格的標題
<caption></caption>
*分析表格的寫法
- 首先定義一個表格的範圍使用table
- 定義一行使用tr
- 定義一個單元格使用 td
** 操作技巧
- 首先數有多少行（tr），數每行裏面有多少個單元格（td）
** 合並單元格
- rowspan：跨行
- colspan：跨列
完整代碼：
<html> <head> <title>World</title> </head> <body> <!-- 實現3行四列的表格 --> <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100"> <caption>公司職員信息表</caption> <tr align="center"> <td>姓名</td> <td>性別</td> <td>年齡</td> <td>職位</td> </tr> <tr align="center"> <td>栗子殼</td> <td>男</td> <td>20</td> <td>老總</td> </tr> <tr> <th>栗子米</th> <th>女</th> <th>19</th> <th>秘書</th> </tr> </table> </body> </html>
<html> <head> <title>World</title> </head> <body> <!-- 測試跨列 第一行：1 第二行到第四行：3 --> <table border="1" cellspacing="0" bordercolor="blue" width="200"> <tr> <td colspan="3" align="center">人員信息</td> </tr> <tr> <td>嶽不群</td> <td>女</td> <td>40</td> </tr> <tr> <td>令狐沖</td> <td>男</td> <td>25</td> </tr> <tr> <td>東方不敗</td> <td>女</td> <td>24</td> </tr> </table> <hr/> <!-- 測試跨行 第一行：3 第二行到第三行：2 --> <table border="1" cellspacing="0" bordercolor="blue" width="200"> <tr> <td>嶽不群</td> <td>女</td> <td rowspan="3" align="center">40</td> </tr> <tr> <td>令狐沖</td> <td>男</td> </tr> <tr> <td>東方不敗</td> <td>女</td> </tr> </table> </body> </html>
html-表格標簽