详述table标签

最新推荐文章于 2024-07-12 00:07:26 发布

肥胖的企鹅

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量3.2k

点赞数 1

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43457668/article/details/101299822

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML中的表格

我们常常会使用到Excle表格，可以非常直观的建立、操作、删除表格数据（如下图）。

那么如何在html文件中创建一个表格呢？

HTML表格由table标签以及一个或多个tr、th或td标签组成：

table标签用来定义表格，整个表格包含在<table>和</table>标签中
tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示
td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示（th即为tableHead代表表格头，th即为tableData代表表格内数据），具体的表格内容放置在这一对td标签或th标签之中（注意：th标签中的内容默认以粗体、居中的方式显示）

例如：

<table>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

知道了上面的数据，那么下面我们开始创作一个和上面一样的学生信息表格吧，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<title></title>
	<style></style>
    </head>
    <body>
	<table>
	    <tr>
		<th>序号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>手机号</th>
	    </tr>
	    <tr>
		<td>1</td>
		<td>小王</td>
		<td>18</td>
		<td>17752846322</td>
	    </tr>
	    <tr>
		<td>2</td>
		<td>小丽</td>
		<td>17</td>
		<td>15964712254</td>
	    </tr>	
	</table>
    </body>
</html>

下面我们来运行一下，看看浏览器的显示效果：

！！！为什么我们创建的“表格”没有边框呢？

其实是这样的，我们的的确确把这些数据按照“行和列”存放到了一个看不见的表格当中了，但是其实表格的边框是属于表格中<tr>\<th>\<td>标签的属性border，因此需要我们手动去设置边框的类型、粗细、颜色等。

关于边框的border标签属性语法如下：

/*语法*/
border: 颜色 粗细 虚线/实线;

/*示例*/
border: black 1px solid;/*设定黑色、粗细为1px像素的实线边框*/

下面我们来实战一下：

我们将border属性标签写到<head>标签的<style>标签中，但要注意的是，我们不能直接把这个边框属性加到<table>标签上，因为这样仅仅是将整个表格用一圈线包裹起来（如下图）

因此需要同时将border属性写入<table>、<th>、<td>标签，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<title></title>
	<style>
            table{
	        border: black 1px solid;
            }
	    th{
		border: black 1px solid;
	    }
	    td{
		border: black 1px solid;
	    }
        </style>
    </head>
    <body>
	<table>
	    <tr>
		<th>序号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>手机号</th>
	    </tr>
	    <tr>
		<td>1</td>
		<td>小王</td>
		<td>18</td>
		<td>17752846322</td>
	    </tr>
	    <tr>
		<td>2</td>
		<td>小丽</td>
		<td>17</td>
		<td>15964712254</td>
	    </tr>	
	</table>
    </body>
</html>

在浏览器的预览如下图：

在上图中可以看出我们做出的边框并不美观，那么如何仅显示一条线呢。

实际上需要如下另外两个标签属性：

border-spacing设置单元格之间的间距
border-collapse设置边框是否重合，属性值有：separate（分开）、collapse（合并）

修改后的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
	<title></title>
	<style>
            table{
	        border: black 1px solid;
                border-spacing: 0;
		border-collapse: collapse;
            }
	    th{
		border: black 1px solid;
	    }
	    td{
		border: black 1px solid;
	    }
        </style>
    </head>
    <body>
	<table>
	    <tr>
		<th>序号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>手机号</th>
	    </tr>
	    <tr>
		<td>1</td>
		<td>小王</td>
		<td>18</td>
		<td>17752846322</td>
	    </tr>
	    <tr>
		<td>2</td>
		<td>小丽</td>
		<td>17</td>
		<td>15964712254</td>
	    </tr>	
	</table>
    </body>
</html>

预览如下图：

至此，我们已经成功在HTML中创建了一个与Excel一模一样的表格！

其它

解决了边框问题后，针对表格其它属性调整，可由以下几个标签属性实现：

width设置表格大小或占页面百分比
height设置单元格大小
align设置单元格内容水平对齐方式，属性值有：left（左对齐）、right（右对齐）、center（）居中对齐
valign设置单元格内容的垂直对齐方式，属性值有：top（对内容进行上对齐）、middle（对内容进行居中对齐（默认值））、bottom（对内容进行下对齐）、baseline（与基线对齐）

进阶：如何合并单元格

如要合并列：

合并列需要使用标签属性colspan语法格式如下：

colspan="合并列数"

需要注意的是，合并列后，该列之后的单元格就不必再创建！

如要合并行：

合并列需要使用标签属性rowspan语法格式如下：

rowspan="合并行数"

同样，合并行后，该行下的行中对应单元格就不必再创建！

实例：

使用HTML分别实现如下效果

设计代码如下：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    table{
		border: black 1px solid;
		border-spacing: 0;
		border-collapse: collapse;
	    }
	    th{
		height: 40px;/*规定表格高度*/
		border: black 1px solid;
		text-align: center;
	    }
	    td{
		height: 20px;
		border: black 1px solid;
		text-align: center;
	    }
        </style>
    </head>
    <body>
	<table>
	    <tr>
		<td colspan="9">2013年图书销售统计</td>
	    </tr>
	    <tr>
		<td rowspan="2">图书分类</td>
		<td colspan="2">一季度</td>
		<td colspan="2">二季度</th>
		<td colspan="2">三季度</td>
		<td colspan="2">四季度</td>
	    </tr>
	    <tr>
		<th>销售量</th>
		<th>销售额</th>
		<th>销售量</th>
		<th>销售额</th>
		<th>销售量</th>
		<th>销售额</th>
		<th>销售量</th>
		<th>销售额</th>
	    </tr>
	    <tr>
		<td>小说</td>
		<td>23521</td>
		<td>￥559，940.00</td>
		<td>18423</td>
		<td>￥44，841.00</td>
		<td>32125</td>
		<td>￥829，870.00</td>
		<td>25188</td>
		<td>￥586,564.00</td>
	    </tr>
	</table>
    </body>
</html>