HTML-9.1-表格标签

最新推荐文章于 2025-01-21 17:07:12 发布
原创 最新推荐文章于 2025-01-21 17:07:12 发布 · 431 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML表格 #行 #单元格

本文详细介绍了HTML表格的创建方法，包括表格的基本结构、属性设置、标题、行与单元格的管理，以及thead、tbody、tfoot标签的使用技巧。

HTML-9.1-表格标签

  • 表格标签用<table>表示
  • 一个表格<table>是由每行<tr>组成的，每行<tr>是由每个单元格<td>组成的
  • 注意
    • 一个表格是由行组成的（行是由单元格组成的），而不是由行和列组成的

一：表格属性

  • border
    • 设置边框是否显示，单位为像素
  • style=“border-collapse:collapse;”
    • 单元格的线和表格的边框合并一起（表格的两边框合并为一条）
  • width
    • 宽度，单位为像素
  • height
    • 高度，单位为像素
  • bordercolor
    • 表格的边框颜色
  • align
    • 表格的水平对齐方式，left, right, center
    • 要设置内容的对齐方式，要对单元格标签<td>进行设置
  • cellpading
    • 设置表格当中的内容距离边框间距，单位为像素
  • cellspacing
    • 设置表格和单元格之间的间距
  • bgcolor=“red”
    • 表格的背景颜色
  • background=“路径src/…”
    • 背景图片
    • 背景图片的优先级大于背景颜色
  • bordercolorlight
    • 表格的上、左边框，以及单元格的右、下边框的颜色
  • bordercolordark
    • 表格的右、下边框，以及单元格的上、左的边框颜色
    • 目的是为了设置3D的效果
  • dir
    • 共有属性，单元格内容的排列顺序
      • ltr：从左到右（left to right，默认）
      • rtl：从右到左（right to left）
  • colspan
    • 在<td>中设置
    • 横向合并单元格
  • rowspan
    • 在<td>中设置
    • 纵向合并单元格
<body>
	<!-- 
		border：设置边框，默认无
		style="border-collapse: collapse;"：单元格与表格的边框合并
		background：表格的背景图片
		bordercolor：表格的边框颜色
		dir：单元格内容的排列顺序
	-->
	<table border="5px" style="border-collapse: collapse;"  
	background="../zxc/backgroud.jpg" bordercolor="blue" dir="ltr">
		<!-- caption设置表格的标题 -->
		<caption>表格标题</caption>
		<tr>
			<!-- 横向合并单元格 -->
			<td colspan="2" align="center">第一行第一列</td>
			
			<td>第一行第三列</td>
		</tr>
		<tr>
			<!-- 纵向合并单元格 -->
			<td rowspan="2">第二行第一列</td>
			<td>第二行第二列</td>
			<td>第二行第三列</td>
		</tr>
		<tr>
			<td>第三行第二列</td>
			<td>第三行第三列</td>
		</tr>
	</table>
</body>


<body>
	<!-- 
		version1.0
		style="border-collapse: collapse;"：单元格与表格边框合并
		边框颜色只有表格的上、左边框，以及单元格的右、下边框
	 -->
<table border="10" style="border-collapse: collapse;" 
bordercolor="blue">
			
	<caption align="center">这是表格标题</caption>>

	<thead>
	<tr bgcolor="blue">
		<td>我是第一行第一列</td>
		<td>我是第一行第二列</td>
		<td>我是第一行第三列</td>
	</tr>
	</thead>
			
	<tbody>
	<tr>
		<td>我是第二行第一列</td>
		<td>我是第二行第二列</td>
		<td>我是第二行第三列</td>
	</tr>
	</tbody>
			
	<tfoot>
	<tr>
		<td>我是第三行第一列</td>
		<td>我是第三行第二列</td>
		<td>我是第三行第三列</td>
	</tr>
	</tfoot>>

</table>
</body>

<body>
	<!-- 
		version2.0
		cellspacing="0"：设置表格与单元格之间的距离
		表格边框呈现3D效果
	 -->
<table border="10"   cellspacing="0" bordercolor="blue">
			
	<caption align="center">这是表格标题</caption>>

	<thead>
	<tr bgcolor="blue">
		<td>我是第一行第一列</td>
		<td>我是第一行第二列</td>
		<td>我是第一行第三列</td>
	</tr>
	</thead>
			
	<tbody>
	<tr>
		<td>我是第二行第一列</td>
		<td>我是第二行第二列</td>
		<td>我是第二行第三列</td>
	</tr>
	</tbody>
			
	<tfoot>
	<tr>
		<td>我是第三行第一列</td>
		<td>我是第三行第二列</td>
		<td>我是第三行第三列</td>
	</tr>
	</tfoot>>

</table>
</body>

二：行

  • <tr></tr>
  • 一个表格就是一行一行组成的
  • 属性
    • dir
      • 共有属性，设置这一行单元格内容的排列顺序
      • ltr：从左到右(left to right)，默认
      • rtl：从右到左(right to left)
    • bgcolor
      • 设置这一行的单元格的背景色
      • 没有background属性，无法设置这一行的背景图片，可通过CSS设置
    • height
      • 一行的高度
    • align=“center”
      • 一行的内容水平居中
      • left, center, right
    • valign=“center”
      • 一行的内容垂直居中
      • top, middle, bottom
<body>
	<table border="1px" style="border-collapse: collapse">
	    <tr bgcolor="blue">
	        <td>第一行第一列</td>
	        <td>第一行第二列</td>
	        <td>第一行第三列</td>
	    </tr> 
	    <tr>
	        <td>第二行第一列</td>
	        <td>第二行第二列</td>
	        <td>第二行第三列</td>        
	    </tr>
	    <tr>
	        <td>第三行第一列</td>
	        <td>第三行第二列</td>
	        <td>第三行第三列</td>        
	    </tr>
	</table>
</body>

三：加粗的单元格

  • <td></td>

四：表格的标题

  • <caption>标题</caption>
  • 使用时同 tr 标签并列
  • 属性：
    • align：表示标题相对于表格的位置
      • 默认center
      • left, center, right, top, bottom
<table>
    <!-- 表格的标题 -->
    <caption align="center">这是表格的标题</caption>
    <tr>
        <td>我是第一行第一列</td>
        <td>我是第一行第二列</td>
    </tr>
    
    <tr>
        <tr>我是第二行第一列</tr>
        <tr>我是第二行第二列</tr>
    </tr>
</table>

五：<thead>标签、<tbody>标签、<tfood>标签

  • 如果写了，这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead, tbody, tfood的顺序依次来显示内容
    • 当表格非常大内容非常多的时候，数据可以便获取边显示
  • 如果不写thead, tbody, tfoot，那么浏览器解析并显示表格内容的时候时按照代码的上到下的顺序来显示
    • 必须等表格的内容全部从服务器获取才能显示出来
<table border="1" cellpadding="0" cellspacing="0">
			
	<caption align="center">这是表格标题</caption>>

	<thead>
	<tr bgcolor="blue">
		<td>我是第一行第一列</td>
		<td>我是第一行第二列</td>
		<td>我是第一行第三列</td>
	</tr>
	</thead>
			
	<tbody>
	<tr>
		<td>我是第二行第一列</td>
		<td>我是第二行第二列</td>
		<td>我是第二行第三列</td>
	</tr>
	</tbody>
			
	<tfoot>
	<tr>
		<td>我是第三行第一列</td>
		<td>我是第三行第二列</td>
		<td>我是第三行第三列</td>
	</tr>
	</tfoot>>

</table>
04 - 【HTML】- 常用标签（下篇）
weixin_43608968的博客
09-05 156
04 - 【HTML】- 常用标签（下篇）主要讲解表格、表单、列表等标签的使用和注意事项
表格标签
m0_57823924的博客
04-24 367
1. 创建表格 总结： 表格的主要目的是用来显示特殊数据的 一个完整的表格有表格标签(table)，行标签(tr)，单元格标签(td）组成，没有列的标签 <tr></tr>中只能嵌套<td></td> 类的单元格 <td></td>标签，他就像一个容器，可以容纳所有的元素 2. 表格属性 3. 表头单元格标签th 4. 表格标题caption 5. 合并单元格 5.1 合并...
html用于定义表格行的标签,HTML表格标签
weixin_39813009的博客
06-21 4625
1.表格的主要作用显示展示数据，表格不是用来布局页面的，而使用来展示数据的。2.表格的主要语法单元格的文字...(1)用来定义表格标签。(2)标签用于定义表格中的行，必须嵌套在标签中。(3)用于定义表格中的单元格，必须嵌套在中。(4)字母td指的是表格数据(table data),即数据单元格中的内容。3.表头单元格标签一般的表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容 加粗 居中...
前端学习之HTML——表格
Jane_xxxxxy的博客
07-26 732
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。 表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>
5、表格标签
qq_37917691的博客
04-28 144
表格合并：跨行，跨列
vue-入门实例9-1.html
虾米大王的学习历程
05-19 66
【代码】vue-入门实例9-1.html。
flowable 配置自定义表单_Flowable 6.6.0 BPMN用户指南 -9 表单 - 9.1 表单定义
weixin_33966205的博客
02-23 2677
《Flowable 6.6.0 BPMN用户指南》1. 入门2. 配置3 The Flowable API4 Flowable 6.6.0 BPMN用户指南 - (4)Spring集成5 Spring Boot6 部署7 BPMN 2.0简介8 BPMN 2.0的构造9 表单(Forms)9.1 表单定义9.2 表单属性9.3 外部表单渲染(External form rendering)有关Fl...
JS-part9.1-分页器分页渲染 / 下拉刷新分页渲染
晓葉斑比
07-11 551
JavaScript分页器分页渲染 分页器分页渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
flying-saucer生成pdf
04-03
另外，要检查HTML代码中的`<img>`标签是否完整，包括`src`属性和必要的尺寸属性。 2. **中文显示问题和CSS样式问题**： flying-saucer对中文字符的支持依赖于字体设置。如果PDF中出现乱码，可能是因为缺少支持中文...
HTML5标签速查表.pdf
04-14
**9.1 表格标签** **标签**: `<table>` **描述**: 定义表格。 **9.2 表格标题标签** **标签**: `<caption>` **描述**: 定义表格标题。 **9.3 表格头部标签** **标签**: `<th>` **描述**: 定义表格中的表头...
html学习笔记（3）
最新发布
m0_74370400的博客
01-21 824
strong><ins><del>前面的<em>标签bius就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而后面的strongeminsdel在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
antd table设置表格一个单元格的字体颜色_HTML表格应用
weixin_39900437的博客
11-27 1248
HTML表格表格标签表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。tr: table rowth: table headtd: table data行、列、单元格 单元格特点：同行等高、同列等宽表格的基本语法：创建一个3行3列的表格：<table border="1px" width="300px"><tr><!--tr:...
HTML表格标签详解
实泽有之，无泽虚之
03-26 9450
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-18 9382
一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 三、表头单元格标签 四、表格标题标签 五、合并单元格 1、合并单元格方式 2、合并单元格顺序 3、合并单元格流程 六、合并单元格示例 1、原始表格 2、跨行合并单元格 3、跨列合并单元格
Web前端学习html css（一）
qq_74114305的博客
10-19 2129
学习web前端
HTML thead tbody tfood
qq_35677589的博客
01-19 378
thead，tbody，tfoot的编写并不会影响html的代码，只是为了JS的编写过程能够更加方便。 效果：
HTML之表格标签
carson0408的博客
03-16 3045
        在网页制作之中，表格标签是常用的标签之一，比如制作表格，或者利用表格的整齐性来设置页面布局。&lt;table&gt;&lt;/table&gt;来用来制作表格，所以制作表格的语句在其之间；&lt;tr&gt;&lt;/tr&gt;则修饰表格行；而&lt;td&gt;&lt;/td&gt;修饰表格数据，这包含在&lt;tr&gt;&lt;/tr&gt;中。     
table、tr、td表格的行、单元格等属性说明
热门推荐
sning999
02-28 6万+
&lt;table&gt;标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元格。&lt;table&gt;标签常见的可选属性有：1. align：规定表格相对周围元素的对齐方式，取值有left、center、right；2. border：规定表格边框的宽度，取值为像素；3. width：规定表...
SAS高级编程教程9.1版本全面解析
标题、描述和标签都表明了这一点，而文件列表中仅包含了一个名为“SAS OnlineTutor 9.1 Advanced Programming.pdf”的PDF文件。根据这些信息，我们可以深入探讨关于SAS高级编程的知识点，这些知识点是SAS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值