HTML学习笔记--表格

最新推荐文章于 2024-02-05 09:15:21 发布

PRCORANGE

最新推荐文章于 2024-02-05 09:15:21 发布

阅读量151

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/PRCORANGE/article/details/107548795

版权

表格

在html中创建表格。每个表格从一个 table 标签开始。每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。标题用 th标签表示。

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>

<body>
<p>这是一行一列</p>
<table border="1">
<tr>
	<td>100</td>
</tr>
</table>
<p>这是一行三列</p>
<table border="1">
<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
</tr>
</table>
<p>这是两行三列，并带有标题</p>
<table border="1">
<tr>
	<th>第一列</th>
	<th>第二列</th>
	<th>第三列</th>
</tr>
<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
</tr>
<tr>
	<td>400</td>
	<td>500</td>
	<td>600</td>
</tr>
</table>
</body>

</html>

在这里插入图片描述

HTML表格高度和宽度

在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

<table border = "1" width = "400" height = "150">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

HTML表格空间

有以下两个属性，用于调整HTML表格中单元格的空间：
cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离

<table border = "1" cellpadding="5" cellspacing="5">

HTML合并单元格

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>

<body>
<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>
</body>

</html>

在这里插入图片描述

HTML表格头部、主体、页脚

表格可以分为三个部分 - 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。
头部，主体和页脚的对应的三个标签是：
<thead> - 创建单独的表头。
<tbody> - 表示表格的主体。
<tfoot> - 创建一个单独的表页脚。
表可以包含多个<\tbody>元素以指示不同的页面。
但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		<table border = "1">
			<thead>
				<tr>
					<td colspan="4">这是表头</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="4">这是表页脚</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

HTML表格的嵌套

您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>
					<table border="1">
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
					</table>
				</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

PRCORANGE

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记--表格

表格在html中创建表格。每个表格从一个 table 标签开始。每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。标题用 th标签表示。<!doctype html><html><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body><p>这是一行一列</p><table b
复制链接

扫一扫