html常用元素之表格元素

最新推荐文章于 2024-02-16 23:45:17 发布
最新推荐文章于 2024-02-16 23:45:17 发布
阅读量7.9k 收藏 9
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yin_991/article/details/78345340
版权

1.th元素：为表格添加标题行，是tr的子元素，必须放在tr标签里

<p>
		1.th元素：为表格添加标题行，是tr的子元素，必须放在tr标签里
	</p>
	<table border="1" bgcolor="#8FBC8B">
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>
	<p>

示例：



2.colspan元素：横向合并单元格，属性值为正整数

<p>
		2.colspan元素：横向合并单元格，属性值为正整数，比如我把第一行的3个标题单元格弄成一个单元格，那么colspan的值就是3，colspan表示合并的单元格的数量		
	</p>
	<table border="1" bgcolor="#C0C0C0">
		<tr>
			<th colspan="3">标题</th>
			<!-- <th>标题</th>
			<th>标题</th> -->
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>

示例：



3.rowspan元素：纵向合并单元格，属性值为正整数

	<p>
		3.rowspan元素：纵向合并单元格，属性值为正整数		
	</p>
	<table border="1" bgcolor="#5F9EA0">
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
		<tr>
			<td rowspan="3">单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<!-- <td>单元格</td> -->
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<!-- <td>单元格</td> -->
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>
示例：



4.caption为表格添加标题，用来制定表格的标题或者说明，是table的子元素，必须放在table中使用Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理

<p>
		4.caption为表格添加表的名字,用来制定表格的标题或者说明，是table的子元素，必须放在table中使用
Caption的align属性可以设置标题的位置，但是在html5中已被废弃，现在一般用css样式来处理	
	</p>
	<table border="1" bgcolor="#E0FFFF">
		<caption>这是表格名</caption>
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
		<tr>
			<td>单元格</td>
			<td>单元格</td>
			<td>单元格</td>
		</tr>
	</table>
示例：



5.thead、tfoot、tbody元素：

thead表格的表头

tfoot元素：表格的页脚

tbody元素：表格的主题，表格的规范写法应该包含这三部分，这个主要结合css、js来使用

<p>
		5.thead、tfoot、tbody元素,把这些元素应用到table里，效果没有改变，但是这几个元素有很大的作用，也就是它们起到保证表头、表的内容、和表脚的位置不改变，无论thead、tbody、tfoot元素写在哪里，只要是在table元素里面，那么thead相应的表头位置、tbody相应的表的内容的位置、tfoot相应的表脚的位置，在实际效果中都不改变
	</p>
	<table border="1" bgcolor="#DEB887">
		<tfoot>
			<tr>
				<td>备注：</td>
				<td colspan="2">**</td>
			</tr>	
		</tfoot>
		<caption>这是表格名</caption>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tbody>
		<thead>
			<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
		</thead>
	</table>
示例：



6.(1)colgroup元素：

Colgroup元素用来组合列，它的span属性可以设置组合列的数目，它可以包含一个字元素col,colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。
 

<p>
		6.(1)colgroup元素,colgroup元素用来组合列，它的span属性可以设置组合列的数目，它可以包含一个子元素col,colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。
	</p>


	<table border="1">
		<caption>这是表格名</caption>
		<!-- 这条语句表示前三列用了一个宽度为400像素，单元格背景颜色为#5F9EA0的样式 -->
		<colgroup span="3" style="width: 400px;background-color: #5F9EA0;"></colgroup>
		<thead>
			<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
			</tr>	
		</thead>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>	
		</tbody>
		<tfoot>
			<tr>
				<td>备注：</td>
				<td colspan="2">**</td>
				<td>单元格</td>
			</tr>	
		</tfoot>
		
	</table>
示例：



6.(2)col元素：

Col元素用来设定列的属性，它可以使用span属性

Col元素一般作为colgroup元素的子元素配合使用

<p>
	6.(2)col元素：col元素用来设定列的属性，它可以使用span属性;col元素一般作为colgroup元素的子元素配合使用	
	</p>	
	<table border="1" bgcolor="">
		<caption>这是表格名</caption>
		<colgroup>
			<!-- 这条表示前1列用了背景颜色为#F5F5F5;宽度为300px的样式 -->
			<col span="1" style="background-color: #F5F5F5;width: 300px;">
			<!-- 这条表示中间2列用了背景颜色为#5F9EA0;宽度为100px的样式 -->
			<col span="2" style="background-color: #5F9EA0;width: 100px;">
			<!-- 这条表示最后1列用了背景颜色为#F5F5F5;宽度为200px的样式 -->
			<col span="1" style="background-color: #2F4F4F;width: 200px">
		</colgroup>
		<thead>
			<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
			</tr>	
		</thead>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
				<td>单元格</td>
			</tr>	
		</tbody>
		<tfoot>
			<tr>
				<td>备注：</td>
				<td colspan="2">**</td>
				<td>单元格</td>
			</tr>	
		</tfoot>
	</table>
示例：


yin_991
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML常用标签大全及html标签的特点
12-14
2.一般是成对出现的，由开始标签类似“元素内容”，左边标签一边叫开始标签，右边</ >叫结束标签，有始有终，除了一些个别是单闭合标签的 先记一些个别例外的单闭合标签，例如： <meta /> 设置页面信息...
HTML的表格元素
yuanYW7556的博客
04-22 623
|用table进行表格标签定义,border表示边框宽度，cellpadding表示内边框的大小，cellspacing表示设置外边距的大小| 用tr将表格每行分成若干单元格 | |–用caption进行表格标题定义|用td定义标签，如表示单元格的表头，用th| <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"content="text/html;charset=utf-8">
Html实用型基础标签——列表、表格元素
qq_41890177的博客
07-14 2442
一、列表 分为无序列表，有序列表，定义列表 1、无序列表 <ul> <li></li> <li></li> </ul> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> 可以注意到...
【HTML】如何使用html制作一个简易的表格？
最新发布
萌萌白白的博客
02-16 3606
如何使用html制作一个简易的表格
html表格元素
weixin_30354675的博客
04-19 68
1常规表格 表格描述 <table> 定义表格 <caption> 定义表格标题。 <th> 定义表格的表头。 <tr> 定义表格的行。 <td> 定义表格单元。 <thead> 定义表格的页眉。 <tbody> 定...
HTML 表格元素
xiaoxiaobukuang的专栏
10-09 1897
学习要点 表格元素汇总 构建表格解析 一、表格元素汇总表格的基本构成最少需要三个元素：< table >、< tr >、< td >，其他的一些作为可选铺助存在。 元素名称 说明 table 表示表格
html5学习15：表格元素
八十岁老将的博客
02-07 2203
1、基本的表格 有三个元素是每个表格都必须要有的: table、tr和td。元素table，是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。 1.1 table元素 属性：border 包含：caption,colgroup,thead,tbody,tfoot,tr,th,td 1.2 tr元素 父元素：table,thead,tfoot,tbody 内容：td,th 1.3 td元素 属性：colspan,rowspan,headers <table> <tr
html body标签详解与html常用的控制标记
12-14
用于标记网页的主体，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 1.body标签中可用的属性：bgcolor="颜色值"：设置整个网页的背景颜色text="颜色值"：设置文字的颜色色link="颜色值...
jquery调整表格行tr上下顺序实例讲解
11-27
表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能，分享给大家供大家参考，具体内容如下 代码实例如下: <html> <head> <meta ...
jQuery实现的调整表格行tr上下顺序
11-27
表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &...
HTML基本标签详细介绍PDF
01-18
html——基本标签 ※，HTML（HyperText Markup Language）是用于创建网页的标准标记语言...在这篇文章中，我们将介绍HTML中常用的标签，包括文本标签、链接标签、图像标签、表格标签、表单标签等，并且提供示例和解释。
HTML表格及元素
成长日记的博客
06-25 726
标签 <table>...完整代码见示例</table> 作用 布局，呈现需要表格布局的内容 1.表格标签是块级元素 2.全页布局的作用已经退出舞台了 3.专注于自己应该专注的布局领域 4.表格样式 <!DOCTYPE html> <html lang="en"> <head> <meta chars...
html中表格元素属性
python183360的博客
05-10 710
table标签定义html表格。简单的html表格由table元素以及一个或多个tr th 或td元素组成 tr行th表头td元素单元格 table 标签属性 align：规定表格相对周围的对齐方式，left/center/right border:变宽宽度单位为px width :px或% frame:规定表格外侧的哪个部分见 取值如下 void 不显示外侧边框 above 显示上部的外侧边框 ...
HTML笔记（HTML元素-表格与列表）
banmao8461的博客
07-09 165
1 HTML表格 1.1 HTML创建表格 表格是由<table>元素来定义的，内含<tr>以及<td>元素，<tr>元素负责行，<td>为单元格。而表格的表头用<th>来定义，多数浏览器会将其显示为粗体字。 它的具体操作就与CSS中的表格布局差不多，要多结合理解哦。 使用&l...
HTML表格元素
Changkaix的博客
03-22 481
HTML表格元素
前端HTML中表格元素介绍
金鳞踏雨
11-29 365
随着前端技术的发展，HTML原有的很多写法渐渐被CSS或JavaScript替代，在这里介绍的表格元素也是如此（div）。 此篇博文仅为本人学完HTML中的table标签的学习总结，若有错误望在评论区提出，本人很菜，勿喷2333~~~ <table> 定义表格 <tr> 定义表格的行 <th> 定义表格的表头 <td&g...
【HTML5】->表格元素讲解
欢迎来到新世界
02-21 717
表格元素Ⅰ 前言Ⅱ 表格三大元素Ⅲ 表头，表身，表尾Ⅳ 如何合并单元格 Ⅰ 前言 让我们在回顾一下HTML5的“元素周期表”。 这篇文章我就来讲解一下最右边的表格元素。 下面我们通过这三个表格来逐个讲解表格元素???? （一） （二） （三） Ⅱ 表格三大元素 <table>,<tr>,<td> 这三个元素就是表格的三大元素，通过这三个元素我们来构建第一个表...
HTML表格元素汇总
tangtian_yes的博客
03-26 380
HTML—表格 1、表格的基本结构 <table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。 border属性表示给表格添加边框，它的值5表示边框的宽度为5px。 2、表格的属性——宽、高 使用width和height来定义表格的宽和高，width和hegiht单位是px，可加可不加。width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。 3、表格的属性——cellpadding 属性cellpadd
html表格上下居中
08-14
### 回答1： 要使HTML表格中的内容上下居中，可以在相应的单元格（<td>或<th>）中使用CSS样式vertical-align并将其值设置为middle，如下所示： ``` <td style="vertical-align: middle;">内容</td> ``` 如果要将整个表格的内容都上下居中，则可以将CSS样式应用于表格元素（<table>）并设置其display属性为table-cell。 ``` table { display: table-cell; vertical-align: middle; } ``` ### 回答2： 要使HTML表格上下居中，你可以使用垂直居中的CSS属性。以下是一种方法可以做到这一点： 1. 首先，在HTML文件中定义一个包含表格的容器元素，例如<div class="table-container">。</div>。将此容器元素定义为一个相对定位的元素，以便在垂直居中时使用。 2. 在样式表中为容器元素添加以下样式代码： .table-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; } 这将使用flexbox布局将表格容器元素的内容水平和垂直都居中对齐，并且使容器元素的最小高度占满整个视口高度(min-height: 100vh;)，以保证在内容不满一屏时也能垂直居中。 3. 在表格中添加必要的HTML代码，如<th>和<td>等。确保这些元素都被包含在上述的表格容器元素内。 这样，你的HTML表格就会在垂直方向上居中了。根据实际需要，你可以调整表格容器元素的样式代码以适应你的设计需求，比如设置容器的宽度、添加背景颜色等。 ### 回答3： 要让HTML表格在垂直方向上居中，可以使用CSS来实现。有几种方法可以实现这个效果： 方法一：使用表格属性 在table标签中添加属性`align="center"`，可以将表格水平对齐到中间。然后使用CSS的`vertical-align`属性将表格的单元格内容垂直居中。例如： ```html <table align="center" style="vertical-align: middle"> <!-- 表格内容 --> </table> ``` 方法二：使用CSS定位属性 使用CSS的定位属性可以将表格容器相对于父元素进行定位，从而实现居中效果。在父元素上设置`position: relative`，然后使用`display: flex`和`align-items: center`将表格容器垂直居中。例如： ```html <div style="position: relative;"> <table style="display: flex; align-items: center; margin: 0 auto;"> <!-- 表格内容 --> </table> </div> ``` 方法三：使用CSS的表格布局 使用CSS的表格布局可以轻松实现表格的上下居中效果。将表格容器的`display`属性设置为`table`，然后使用`margin:auto`属性将表格水平居中，使用`vertical-align: middle`属性将表格的单元格内容垂直居中。例如： ```html <div style="display: table; margin: 0 auto;"> <table style="vertical-align: middle;"> <!-- 表格内容 --> </table> </div> ``` 以上是三种常用的方法，通过设置CSS属性可以实现HTML表格的上下居中效果。可以根据实际情况选择适合自己的方法来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值