html-table标签属性总结

最新推荐文章于 2024-07-31 17:23:18 发布
最新推荐文章于 2024-07-31 17:23:18 发布
阅读量2.5k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzxv587/article/details/90697571
版权

table标签属性

table标签

border

border标签属性：设定围绕表格的边框的宽度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
	</head>
	<body border="1px">
		<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>
  1. border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框
  2. 实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现，如下代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		<!--样式属性-->
		<style>
			table{
				border: 1px solid black;
			}
			
			td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body border="1px">
		<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>

结果
在这里插入图片描述

width

由于这里表格过于紧凑，所以可以设置table的宽度,在样式属性中添加width设置为50%

<style>
			table{
				width: 50%;
				border: 1px solid black;
			}
			
			td{
				border: 1px solid black;
			}
</style>

结果
在这里插入图片描述

border-spacing

上面的表格中存在每个单元格和外面的边框是分离的，这样实现不太美观。
可以使用border-spcing属性把这两个边框的距离设置为0。

<style>
			table{
				border-spacing: 0;
				width: 50%;
				border: 1px solid black;
			}
			
			td{
				border: 1px solid black;
			}
	</style>

结果
在这里插入图片描述

border-collapse

这里设置了border-spacing为0之后表格边框是里面单元格和外面边框的宽度之和，可以使用border-collapse来设置

<style>
			table{
				border-collapse: collapse;
				border-spacing: 0;
				width: 50%;
				border: 1px solid black;
			}
			
			td{
				border: 1px solid black;
			}
</style>

结果
在这里插入图片描述

margin

上面的表格默认实在页面的左上角的所以这里可以使用margin属性把table表格设置居中

<style>
		table{
			margin: 0 auto;
			border-collapse: collapse;
			border-spacing: 0;
			width: 50%;
			border: 1px solid black;
		}
		
		td{
			border: 1px solid black;
		}
<style>

结果
在这里插入图片描述

tr标签

height

可以设置一行的高度

<style>
		table{
			border: 1px solid black;
			width: 50%;
			margin: 0 auto;
			border-spacing: 0;
			border-collapse: collapse;
			
		}
		
		tr{
			height: 50px;
		}
		
		td{
			border: 1px solid black;
		}
</style>

结果
在这里插入图片描述

background-color

设置一行的背景颜色

<style>
		table{
			border: 1px solid black;
			width: 50%;
			margin: 0 auto;
			border-spacing: 0;
			border-collapse: collapse;
			
		}
		
		tr{
			height: 50px;
			background-color:aquamarine ;
		}
		
		td{
			border: 1px solid black;
		}
</style>

结果
在这里插入图片描述

text-align

设置表格每行的对其方式

<style>
		table{
			border: 1px solid black;
			width: 50%;
			margin: 0 auto;
			border-spacing: 0;
			border-collapse: collapse;
			
		}
		
		tr{
			height: 50px;
			background-color:aquamarine ;
			text-align: center;
		}
		
		td{
			border: 1px solid black;
		}
</style>

结果
在这里插入图片描述

vertical-align

设置了高度之后，可以设置文本的位置

<style>
		table{
			border: 1px solid black;
			width: 50%;
			margin: 0 auto;
			border-spacing: 0;
			border-collapse: collapse;
			
		}
		
		tr{
			height: 50px;
			background-color:red ;
			text-align: center;
			vertical-align: top;
		}
		
		td{
			border: 1px solid black;
		}
</style>

结果
在这里插入图片描述

td标签

和tr标签类似

合并单元格

合并行单元格rowspan

合并第二行和第三行的第一列单元格

<body>
	<table>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td rowspan="2">1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>
</body>

结果
在这里插入图片描述

合并列单元格colspan

合并第一行的三列单元格

<body>
	<table>
		<tr>在这里插入图片描述
			<td colspan="3">1</td>
		</tr>
		<tr>
			<td rowspan="2">1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
		</tr>
	</table>
</body>

结果
在这里插入图片描述

唱给你听、
关注
html之table属性
Jerry_0728的博客
10-27 2万+
目标： 1，table属性 2，tr属性 3，td属性
bootstrap-table插件使用总结
ypy02784的博客
10-12 478
学习过程中，遇到的情况汇总，不定期更新 table字段自动排序失效 有时在table标签中设置了 data-sortable="true"或者在js中设置了sortable: true,表格列的排序功能还是用不了。有些网友说要编写后台代码，重新排序后在回传，感觉应该这个插件没这么low。找了半天，找到了原因，只需要把分页选项注释掉，即data-side-pagination这个选项不添加即可。...
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
最新发布
JustWantToFly的博客
07-31 526
Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应
HTML中的table标签属性
a1k2l45k的博客
06-19 2264
和和和
使用HTML开发商业网站-tr标签属性课件.pptx
07-10
总结来说，`<tr>`标签是HTML表格的重要组成部分，通过合理运用其属性，可以实现多样化的表格布局和样式。然而，随着HTML5的普及，一些传统的属性如`align`、`valign`和`bgcolor`已经不再推荐使用，开发者应逐渐转向...
使用HTML开发商业网站-th标签属性课件.pptx
07-10
### 使用HTML开发商业网站——`<th>`标签属性详解 #### 一、引言 在当今互联网时代，网站已经成为企业和组织展示自身形象、传递信息的重要平台。HTML（HyperText Markup Language）作为构建网页的基础语言之一，其...
html-table:作业-3
05-30
在本作业"html-table:作业-3"中，我们将探讨HTML中的一个重要元素——表格（Table）。HTML表格用于组织和展示数据，是网页设计的基础部分。在这个任务中，你可能需要学习如何创建、格式化以及控制HTML表格的行为。...
HTML基本标签属性总结
10-30
HTML基本标签属性总结 部分内容如下：（下载可看全文） <meta http-equiv="content-type" content="text/html" charset="gb2312"> 4种块结构：div-ul(ol)-li 导航菜单 div-dl-dt-dd 图文混编 table-tr-td 规整...
html table相关标签
weixin_34405354的博客
07-18 191
html table相关标签 标签意义 <table></table> 表格开始和结束。表格的基本标签之一。示例 <tr></tr> 表格的行。表格的基本标签之一。示例 <td></td> 单元格。表格的基本标签之一。示例 <th></th> 表头单元格...
HTML中Table标签的属性及应用
m0_58514898的博客
06-02 800
html table的表格属性： 1、 属性 1.width：设置表格宽度 2.height：设置表格高度 3.align：设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right 4.border：边框,边框宽度，以px为单位的数值，px可以省略 ...
html与表格（table）相关的属性
weixin_34365417的博客
07-12 623
&lt;table&gt; 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 table标签除了具有html元素中通用的属性外，还含有自己...
table标签属性
zyt1204732670的博客
07-13 551
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>new</title> <style> table{/*为页面中所有table标签添加样式*/ width:720px;/*设置table宽度*/ margin: 0 auto;/*设置table水平居中*/ border-spacing:0px;/*去掉tab.
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
朝阳39的博客
07-05 1151
html 中的表格<table>由行<tr>组成，每行由单元格<td>组成。所以表格是由行组成（行由列组成），而不是由行和列组成。table 标签，属于块级元素。
HTML <table> 标签
Java交流
03-24 1500
定义和用法 &lt;table&gt; 标签可定义表格。在 &lt;table&gt; 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。 HTML 与 XHTML 之间的差异 在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。 在 XHTML 1.0 Strict DTD，table 元素的 "...
HTML table表单代码属性介绍
ginger_mr的博客
03-02 235
HTML table代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- border:表单实线话 algin:表单位置 b...
html中table标签及属性
m0_45272038的博客
07-07 5935
table表格 HTML表格由table标签以及多个tr、th和td标签组成 table表示表格，整个表格要包含在<table></table>标签中 tr表示表格中的行，是单元格的容器，一行可以包括多个单元格 th表示表格中的单元格，我理解为列,th放在tr内表示这一行为标题行，其中的字体会默认粗体居中显示 td表示表格中的单元格，我理解为列，td也要放在tr内，可以理解为内容行 tfoot表示表格最后一行 <table>是<tr的上层标签 <tr>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值