标签：spl com splay 通过 网页 居中 info order 技术
表格有三大元素<table>,<tr>,<td>
实例1
| Admin | 男 | 123 |
| 张三 | 男 | 123 |
| 李四 | 男 | 123 |
<table>
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
</table>
使用上述代码就可以得到图1的网页效果。
图1
使用html得到的第一行，但是看起来不明显，这里使用border属性。如图2.
<table border="1px"><!--px的意思是像素-->
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
</table>
图2
还可以是使用align元素。用来居中表格。效果如图3所示。
<table border="1px" align="center">
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
</table>
图3
图4
实例2
| 用户名 | 性别 | 密码 |
| Admin | 男 | 123 |
| 张三 | 男 | 123 |
| 李四 | 男 | 123 |
为实现这个效果可以通过再添加一行来实现，如图5，但是还是有所区别。因为最上面一行是属于标题，不属于表格的内容。
<table border="1px" align="center">
<tr>
<td>用户名</td>
<td>性别</td>
<td>密码</td>
</tr><!--一行的单元格-->
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>张三</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>李四</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
</table>
图5
th元素。效果就是加粗和居中。
<table border="1px" align="center">
<tr>
<th>用户名</th>
<th>性别</th>
<th>密码</th>
</tr><!--一行的单元格-->
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>张三</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>李四</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
</table>
图5
表头和表脚thead和tfoot，效果如图6所示：
<table border="1px" align="center">
<thead><!--表头-->
<tr>
<th>用户名</th>
<th>性别</th>
<th>密码</th>
</tr><!--一行的单元格-->
</thead>
<tr>
<td>Admin</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>张三</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tr>
<td>李四</td>
<td>男</td>
<td>123</td>
</tr><!--一行的单元格-->
<tfoot><!--表脚-->
<tr>
<td>用户名</td>
<td>性别</td>
<td>密码</td>
</tr><!--一行的单元格-->
</tfoot>
</table>
图6
单元格合并，如图7位合并列单元格，图8为合并行单元格
<table border="1px" align="center"><!--不规则的表格的列合并-->
<tr>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<td>aaa</td>
<td colspan="2">aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
图7
<table border="1px" align="center"><!--不规则的表格的行合并-->
<tr>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="2">aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
图8
标签：spl com splay 通过 网页 居中 info order 技术
原文地址：https://www.cnblogs.com/--Destroyer--/p/13353531.html
