HTML表格
表格标签
表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
tr: table row
th: table head
td: table data
行、列、单元格 单元格特点：同行等高、同列等宽
表格的基本语法：
创建一个3行3列的表格：
<table border="1px" width="300px">
<tr><!--tr: table row-->
<td>11</td><!--td: table data-->
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
效果如下：
单元格中内容的填充间距通过cellpadding(默认1px)属性来设置；
单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。
设置单元格的填充间距为10，单元格之间的间距为0，红色边框
<!--
合并边框：style="border-collapse:collapse;"
cellpadding：单元格内容的填充间距
cellspacing：单元格间距
bordercolor：边框颜色
-->
<table border="1px" width="300px" cellpadding="10"
cellspacing="0" bordercolor="red"
style="border-collapse: collapse;">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
效果如下：
一般表格的第一行是标题，并且是文本居中、加粗，将td换成th。
而某些数据需要居中，但不希望加粗，可以给td添加align="center"
<table border="1px" width="300px" cellpadding="10"
cellspacing="0" bordercolor="red"
style="border-collapse: collapse;">
<tr>
<!-- 第一行通常放th: table head常，表示表头(标题)-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<!-- 单元格文本居中 -->
<td align="center">赵四</td>
<td align="center">男</td>
<td align="center">40</td>
</tr>
<tr>
<td>贾玲</td>
<td>女</td>
<td>32</td>
</tr>
</table>
效果如下：
表格的跨行跨列
有时，表格的结构并没有那么简单，可能会存在跨行和跨列的情况：
跨行：
跨列：
跨行、跨列并存：
这个问题看似很复杂，其实很简单，在制作跨行和跨列的表格时，只需按照如下步骤就可以轻松搞定！：
首先做一个完整的表格：注意虚线部分，最终去掉这些虚线就是我们要的效果
找出最左上角那个“侵占”其他单元格的单元格，如下图标注数字的位置
观察这个单元格“侵占”的是行还是列，算上自己总共是几个？(行数用r表示，列数用c表示)：
如果是行：在这个单元格上添加 rowspan="r"
如果是列：在这个单元格上添加 colspan="c"
如果既有行又有列：在这个单元格上添加 rowspan="r" colspan="c"
把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！
按以上步骤完成一个跨行跨列的表格：
<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
<tr>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2" colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
展示效果：