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>