表格标签可以对数据进行格式化,使数据显示更加清晰
<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>