表格标签
分为行(tr)和列(td),行及列都可以进行合并操作
table:定义表格
tr:定义行
td:定义列 //先有行,后有列
th:多用于表头,定义表格中头部(加粗)
border: 边框大小
bordercolor:边框的颜色
cellpadding:内容文本与单元格之间距离
cellspacing:单元格与单元格之间距离
示例:
<body>
<h1 align="center">员工表</h1>
<hr width="90px" color="red" />
<table border="1px"
align="center"
bordercolor="blue"
cellpadding="20px"
cellspacing="0px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>工作</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>jack</td>
<td>男</td>
<td>后端开发</td>
<td>8000</td>
<td><a href="#">查询个人信息,这是个链接</a></td>
</tr>
<tr>
<td>rose</td>
<td>女</td>
<td>前端开发</td>
<td>7000</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>yiyan</td>
<td>女</td>
<td>小秘</td>
<td>10000</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</body>
跨行跨列
rowspan跨行
原表格
<body>
<h1 align="center"></h1>
<hr width="90px" color="red" />
<table border="1px" cellspacing="0px"
cellpadding="20px" align="center"
width="700px">
<tr>
<th>姓名</th>
<th>联系方式</th>
</tr>
<tr>
<td>jack</td>
<td>0371-6666</td>
</tr>
<tr>
<td>jack</td>
<td>0371-8888</td>
</tr>
</table>
</body>
实现跨行
<!-- 实现跨行 -->
<table border="1px" cellspacing="0px"
cellpadding="20px" align="center"
width="700px">
<tr align="center">
<th>姓名</th>
<th>联系方式</th>
</tr>
<tr align="center">
<!-- 跨行 -->
<td rowspan="2">jack</td>
<td>0371-6666</td>
</tr>
<tr align="center">
<td>0371-8888</td>
</tr>
</table>
colspan跨列
原表格
<!-- 原始table表 -->
<table border="1px" cellspacing="0px"
cellpadding="20px" align="center"
width="600px">
<tr>
<td>姓名</td>
<td>联系方式</td>
<td>联系方式</td>
</tr>
<tr>
<td>rose</td>
<td>0371-8888</td>
<td>0371-9999</td>
</tr>
</table>
实现跨列
<!-- colspan 实现跨列 -->
<table border="1px" cellspacing="0px"
cellpadding="20px"
align="center"
width="600px">
<tr align="center">
<td>姓名</td>
<!-- colspan 实现跨列 -->
<td colspan="2">联系方式</td>
</tr>
<tr align="center">
<td>rose</td>
<td>0371-8888</td>
<td>0371-9999</td>
</tr>
</table>