HTML表格基础学习

最新推荐文章于 2021-08-03 20:19:33 发布

Milly_Liu

最新推荐文章于 2021-08-03 20:19:33 发布

阅读量264

点赞数

分类专栏：前端初级H5+C3

本文链接：https://blog.csdn.net/qq_38148024/article/details/102588410

版权

前端初级H5+C3 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文章目录

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

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

姓名	年龄	班级
张三	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>