HTML表格应用

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>

展示效果：