HTML设计显示表格

最新推荐文章于 2024-04-26 15:36:17 发布

量变决定质变

最新推荐文章于 2024-04-26 15:36:17 发布

阅读量2.9k

点赞数 2

分类专栏： ————HTML

本文链接：https://blog.csdn.net/nangeali/article/details/52754277

版权

————HTML 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

HTML设计显示表格

表格在最初的HTML中，仅仅是用于存放各种数据的，因此，表格有很多与数据相关的标记，非常方便。

<span style="font-size:24px;"><html>
	<head>
		<title>
			年度收入
		</title>
		<style>
		<!--
		-->
		</style>
	</head>
	
	<body>
		<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
			<caption>年度收入 2004-2007</caption>
			<tr>
				<th></th>
				<th scope="col">2004</th>
				<th scope="col">2005</th>
				<th scope="col">2006</th>
				<th scope="col">2007</th>
			</tr>
			<tr>
				<th scope="row">捐款</th>
				<td>11.980</td>
				<td>12.650</td>
				<td>9.700</td>
				<td>10.600</td>
			</tr>
			<tr>
				<th scope="row">拨款</th>
				<td>11.980</td>
				<td>12.650</td>
				<td>9.700</td>
				<td>10.600</td>
			</tr>
			<tr>
				<th scope="row">投资</th>
				<td>11.980</td>
				<td>12.650</td>
				<td>9.700</td>
				<td>10.600</td>
			</tr>
			<tr>
				<th scope="row">募捐</th>
				<td>11.980</td>
				<td>12.650</td>
				<td>9.700</td>
				<td>10.600</td>
			</tr>
			<tr>
				<th scope="row">销售</th>
				<td>11.980</td>
				<td>12.650</td>
				<td>9.700</td>
				<td>10.600</td>
			</tr>
		</table>
	</body>
</html>
</span>

代码如上，在<table>标记中，使用border属性设置了表格的外框，summary属性，该属性的值用于概括表格的内容，注意，在浏览器页面中它是不可见的，但是，随意搜索引擎非常重要。

<caption>标记的作用就是设置表格的大标题，该标记可以放在<table>与</table>之间的任意位置，不过通常放在第一行。

此外，如果设置表格标题的位置，添加CSS属性就可以实现，但是，<caption>标记有专门的属性caption-side，用于调整表格标题的位置，但是，该属性只在Firefox中有效，IE不支持。

<span style="font-size:24px;">table{
		caption-side:bottom;
}</span>

<th>标记设置表格中，行或者列的名称，其中，<th>标记的scope属性是用来区分行名称和列名称的，分别设置scope的值为row或者col即可。

在HTML页面中应该尽量遵循表格的标准标记，养成良好的习惯，并适当地利用tab、空格和空行来提高代码的可读性，降低后期的维护成本。

量变决定质变

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML设计显示表格

HTML设计显示表格表格在最初的HTML中，仅仅是用于存放各种数据的，因此，表格有很多与数据相关的标记，非常方便。年度收入  年度收入 2004-2007 2004 2005 2006 2007 捐款
复制链接

扫一扫