html 表格的标签

最新推荐文章于 2023-07-10 14:44:03 发布
最新推荐文章于 2023-07-10 14:44:03 发布
阅读量241 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102558634
版权 
	**表格标签(设置表格的宽高不能限定每个单元格大小都一样):**
		<table>
			<tr>  //表示一行
				<th></th>    //表示一个单元格,一般用于表头格，默认居中加黑
				<td></td>    //表示一个单元格
				
 			</tr>
		</table>
		
	**table属性：**
			border
			加表格线和边框
				<table border="1px">
			width
			height
				<table border="1px" width="400px" height="200px"/>
			cellpadding
				内容距边框的距离
			cellspacing
				边框的宽度大小
				<table border="1px" cellpadding="10px" cellspacing="0px"/>
		    frame
		    	规定外侧边框的哪个部分是可见的
		    	void、above、below、hsides、lhs、rhs、vsides、box、border
		    rules
		    	规定内侧边框的哪个部分是可见的
		    	none、groups、rows、cols、all
		    	
	**table的css属性：**
	    table-layout: fixed;
	    	automatic 	默认。列宽度由单元格内容设定。
			fixed 	列宽由表格宽度和列宽度设定。更快
    	border-collapse: collapse;
    		separate 	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
			collapse 	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

	**设置单元格大小：**
		设置行的高度即单元格高度
			<tr 
				height="50px"
			    align='right、left、center、justify、char' 
				char='character' 	规定根据哪个字符来进行文本对齐。
				charoff='number' 	规定第一个对齐字符的偏移量。不支持
	、			valign='top、middle、bottom、baseline' 规定元素中内容的垂直对齐
			></tr>
		设置第一个单元格的宽度(即标题单元格)，即列宽已确定
				<th 
					width="200px"
					align='right、left、center、justify、char' 
		、			valign='top、middle、bottom、baseline' 规定元素中内容的垂直对齐
				>网易</th> 
				<th width="200px">qq</th>
				<th width="200px">咪咕</th>
				<th width="200px">酷狗</th>
	    设置普通单元格
	    		<td 
					width="200px"
					align='right、left、center、justify、char' 
		、			valign='top、middle、bottom、baseline' 规定元素中内容的垂直对齐
				>网易
				</td> 
	  
	**扩展标签**
		(1)分别用来对表头、表内容、表尾进行分组,内部都必须有tr标签
			thead、tbody、tfoot
			  <thead>
			    <tr>
			      <th>Month</th>
			      <th>Savings</th>
			    </tr>
			  </thead>
			标签属性：
				align：right、left、center、justify、char 定义元素中内容的对齐方式。
				char： 	character 	规定根据哪个字符来进行文本对齐。
				charoff： 	number 	规定第一个对齐字符的偏移量。不支持
	、			valign：top、middle、bottom、baseline 规定元素中内容的垂直对齐
		
		(2)对每列进行整体样式设置
			必须在tr元素内部规定td元素。
			方式一:colgroup(必须包含在table元素内,按个数从左往右设置每列样式)
				<table>
					<colgroup
						span='n'   当前colgroup同时设置几个列,不写,默认一个colgroup设置一个列
					    align='right、left、center、justify、char' 
						width='npx'  列的宽度
						char='character' 	规定根据哪个字符来进行文本对齐。
						charoff='number' 	规定第一个对齐字符的偏移量。不支持
			、			valign='top、middle、bottom、baseline' 规定元素中内容的垂直对齐
					>
					</colgroup>
				</table>
				
			方式二:col(必须包含在table或colgroup元素内,按个数从左往右设置每列样式)
			<table>
				<colgroup>
				  <col
			  		span='n'   当前colgroup同时设置几个列,不写,默认一个colgroup设置一个列
				    align='right、left、center、justify、char' 
					width='npx'  列的宽度
					char='character' 	规定根据哪个字符来进行文本对齐。
					charoff='number' 	规定第一个对齐字符的偏移量。不支持
		、			valign='top、middle、bottom、baseline' 规定元素中内容的垂直对齐
				  />
				  <col align="left" />
				  <col align="right" />
			    </colgroup>
			</table>
		
		(3)在表格上定义标题
			caption标签必须紧随 table 标签之后,默认居中
			<table border="1">
			  <caption
			  	align='right、left、top、bottom' 
			  >Monthly savings</caption>
			</table>

代码实例

	<html>
	<head>
		<title>表格标签学习</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		
	</head>
	<body>
		<h3 align="center">表格标签学习</h3>
		<hr size="30" color="aquamarine"/>
		
		<table border="1px" cellpadding="10px" cellspacing="0px"/>
			<tr height="50px"><!--一个tr表示一行-->
				<th width="200px">网易</th> <!--一个td声明了一个单元格-->
				<th width="200px">qq</th>
				<th width="200px">咪咕</th>
				<th width="200px">酷狗</th>
			</tr>   
			<tr height="50px">
				<td>云</td>
				<td>乐</td>
				<td>音</td>
				<td>dog</td>
			</tr>
			<tr height="50px">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格标签超级详细
zheng_qingyuan的博客
06-19 3960
表格是网页中十分重要的组成元素。表格包含表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列等内容。 标签。简单的 HTML 表格由 table 元素以及一个或多个 、 或 元素组成表格结构其中： 元素定义表格行， 元素定义表头， 元素定义表格单元。标记常用属性属性名说明align设置表格相对周围元素的对齐方式bgcolor设置表格的背景颜色background设置表格的背景图片border设置表格的边框wi......
HTML的表格标签
qianniao_yingmo的博客
03-30 3257
表格标签需要知道的的基础知识
html表格标签
weixin_44992737的博客
06-06 5292
html表格标签详解
HTML表格标签
weixin_52629158的博客
10-23 2123
HTML表格标签
HTML表格标签详解
实泽有之，无泽虚之
03-26 8919
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML 表格标签
qq_48516121的博客
09-28 1184
HTML 表格标签
HTML表格标签的案例
weixin_45904557的博客
02-26 2412
前言 上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; font-size: 24px
HTML系列之表格标签
老__L的博客
10-25 5977
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
html用于定义表格行的标签,HTML表格标签
weixin_39813009的博客
06-21 4409
1.表格的主要作用显示展示数据，表格不是用来布局页面的，而使用来展示数据的。2.表格的主要语法单元格的文字...(1)用来定义表格标签。(2)标签用于定义表格中的行，必须嵌套在标签中。(3)用于定义表格中的单元格，必须嵌套在中。(4)字母td指的是表格数据(table data),即数据单元格中的内容。3.表头单元格标签一般的表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容 加粗 居中...
html表格标题行边框,总结HTML 表格标签
weixin_32179097的博客
06-14 1284
一、概述HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中。二、table 标签1)border 设置 table 的边框宽度；border 取值为空字符串或 "1", 若为 "...
04-HTML表格标签.html
01-08
04-HTML表格标签.html
HTML基础重点_一般标签、常用标签和表格
09-28
本文将深入讲解HTML的一些基础重点，包括一般标签、常用标签以及表格的使用。 首先，HTML文档的基本结构由`<html>`标签包裹，分为`<head>`和`<body>`两部分。`<head>`包含网页的元数据，如`<title>`标签用于设定...
表格标签.html
09-17
表格标签
详解HTML表格|l-639642.pdf
11-20
HTML表格由`<table>`标签开始，用于定义表格整体。在`<table>`内部，通常包括`<tr>`（表格行）、`<td>`（表格数据单元格）和`<th>`（表格头单元格）。`<tr>`标签用于创建表格的每一行，而`<td>`和`<th>`则分别定义...
HTML特性（attribute）和DOM属性（property）
最新发布
weixin_43294560的博客
07-10 1258
是HTML标签上的某个属性，如 id、class、value 等以及自定义属性。
h5 输入提示框
weixin_43294560的博客
11-15 1154
输入框提示列表 input的list属性必须和datalist的id属性相同，才能有输入提示框 datalist中的内容将会被隐藏 代码示例: <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <...
html 表格合并案例、多个表格合并去除重边框
weixin_43294560的博客
10-15 1073
多个表格去除重边框 css代码： <table style="border-bottom:none;"></table> 去除下边框 <table style="border-top:none;"></table> 去除上边框 代码示例: <html> <head> <title>求职表格&l...
meta标签
weixin_43294560的博客
12-16 979
meta name = "robots" content = "none" > // 1.none:搜索引擎将忽略此网页,等价于noindex,nofollow。// 2.noindex:搜索引擎不索引此网页。// 3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。// 4.all:搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。// 5.index:搜索引擎索引此网页。// 6.follow:搜索引擎继续通过此网页的链接索引搜索其它的网页。
html 模拟百度和模拟360
weixin_43294560的博客
10-17 938
百度搜索java的url https://www.baidu.com/s?wd=java &rsv_spt=1&rsv_iqid=0x9f31aa5c00116d2b&issp=1&f=8 &rsv_bp=1&rsv_idx=2&ie=utf-8&tn=monline_3_dg &rsv_enter=1&rsv_dl=...
HTML表格标签符入门教程
"HTML入门学习，包括表格标签符的使用和基本HTML知识" 在HTML（超文本标记语言）中，学习基础知识至关重要，这包括了如何创建和测试网页，以及使用不同的标记符来影响网页内容的显示。HTML文件是独立于操作系统平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值