1.什么是table？
table是html中的表格，由tr、td、th元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
2.可选的属性
属性描述border定义表格的边框cellpadding单元格内内容与单元格边的间距cellspacing单元格与表格边框的间隔sumaary规定表格的摘要width规定表格的宽度
3.合并单元格
用到表格，那么无可避免的就会用到合并的单元格，例如要在表格的结尾要写总计，这时候就需要合并单元格。
合并单元格分为合并列、合并行。
rowspan 是合并列
colspan 是合并行
那么怎么实现呢
<table border="1px" cellpadding="10px">
<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>憨憨</td><td>21</td></tr>
<tr><td>2</td><td>哈哈</td><td>21</td></tr>
<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
<tr><td>4</td><td>芜湖</td><td>25</td></tr>
<tr><td>5</td><td>乌拉</td><td>25</td></tr>
<tr><td>总数</td><td>5</td><td> </td></tr>
</table>
上面的代码是一个表格运行如下，我们需要把红色部分合并
3.1实现单元格合并列
如果我们要合并列，那么就把要合并的第二个单元格②删掉，然后在第一个单元格①的属性中写上rowspan，并写上值。
代码如下：
<tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>
<tr><td>2</td><td>哈哈</td></tr>
3.1实现单元格合并行
如果 我们要合并列，那么就把要合并的第二个单元格④删掉，然后在第一个单元格③的属性中写上colspan，并写上值。
代码如下：
<tr><td>总数</td><td colspan="2">5</td></tr>
4.演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三课table标签</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="10">
<caption>姓名图</caption>
<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>憨憨</td><td>21</td></tr>
<tr><td>2</td><td>哈哈</td><td>22</td></tr>
</table>
<br />
<table border="1" cellpadding="10">
<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>
<tr><td>2</td><td>哈哈</td></tr>
<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
<tr><td>4</td><td>芜湖</td><td rowspan="2">25</td></tr>
<tr><td>5</td><td>乌拉</td></tr>
<tr><td>总数</td><td colspan="2">5</td></tr>
</table>
</body>
</html>
本文转载自: https://blog.csdn.net/qq_45823257/article/details/124623485
版权归原作者 憨憨BEEA 所有， 如有侵权，请联系我们删除。
版权归原作者 憨憨BEEA 所有， 如有侵权，请联系我们删除。