HTML表格基础学习

文章目录

1.创建表格
2.表格属性
3.表头标签
4.表格结构
5.表格标题
6.合并单元格

注意：表格的存在不是用来布局的，是用来处理大批量的表格式数据的。例如网页的中的股市行情

1.创建表格

在HTML网页中想要创建表格，就需要使用表格相关的标签。创建表格的基本语法如下：

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

标签解释：注意没有列标签

<table></table> 表格标签
<tr></tr> 行标签
<td></td> 单元格标签

注意，这种格式是固定的，table标签里面只能是tr标签，tr里面只能是td标签，但是td像是一个容器，可以容纳所有元素。

姓名	年龄	班级
张三	18	1802
李四	19	1802
王五	3	1802

2.表格属性

属性名	含义	常用属性值
border	设置表格的边框，默认border="0"无边框	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值，默认2px
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值，默认1px
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

代码示例：

<body><table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center"><tr><td>姓名</td><td>年龄</td><td>班级</td></tr><tr><td>张三</td><td>18</td><td>01</td></tr><tr><td>李四</td><td>19</td><td>02</td></tr><tr><td>王五</td><td>3</td><td>03</td></tr></table>
</body>

3.表头标签

表头一般是位于表格的第一行或者第一列，其文本加粗居中。表头设置方式：使用<th></th> 标签替代相应的单元格标签<td></td> .

<table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center"><tr><th>姓名</th><th>年龄</th><th>学号</th></tr><tr><th>张三</th>><td>18</td><td>01</td></tr><tr><th>李四</th><td>12</td><td>02</td></tr><tr><th>王五</th><td>3</td><td>03</td></tr>
</table>

4.表格结构

整个表格可以划分成两个部分：表格头部和表格主体。我们分别使用<thead></thead> 和<tbody></tbody 分别将两个部分包裹起来，注意这里只是为了划分两个结构部分，并不会显示出什么效果，所以可以使用。

<table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center"><thead><tr><th>姓名</th><th>年龄</th><th>学号</th></tr></thead><tbody><tr><th>张三</th>><td>18</td><td>01</td></tr><tr><th>李四</th><td>12</td><td>02</td></tr><tr><th>王五</th><td>3</td><td>03</td></tr></tbody>
</table>

5.表格标题

使用标签：<caption></caption> 这个标签一定要紧随table标签之后，只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。

<table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center"><caption>这里是表格的标题</caption><thead><tr><th>姓名</th><th>年龄</th><th>学号</th></tr></thead><tbody><tr><th>张三</th>><td>18</td><td>01</td></tr><tr><th>李四</th><td>12</td><td>02</td></tr><tr><th>王五</th><td>3</td><td>03</td></tr></tbody>
</table>

6.合并单元格

跨行合并：rowspan

跨列合并：colspan

<table border="1" cellspacing="0" cellpadding="5" width="500" height="200" align="center"><thead><tr><th>姓名</th><th>年龄</th><th>学号</th></tr></thead><tbody><tr><th>张三</th>><td>18</td><td rowspan="2">实现跨行合并之后的单元格</td></tr><tr><th>李四</th><td>12</td></tr><tr><th>王五</th><td colspan="2">跨列合并之后的单元格</td></tr></tbody>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxmZVPUE-1571215457033)(F:\研究生\前端学习\黑马39\2019年最新传智播客黑马39期前端视频教程\HTML+CSS\HTML+CSS\合并单元格.png)]