深入了解html中表格的结构和属性

最新推荐文章于 2024-06-19 10:23:02 发布
最新推荐文章于 2024-06-19 10:23:02 发布
阅读量527 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44484756/article/details/86756723
版权

深入了解html中表格的结构和属性

   在了解表格属性之前先来了解一下表格的结构，thead是头部，tbody是身体部分即内容，tfoot是脚部。

  • 表格的完整结构：
  <!--table表示表格（整体）-->
<table>  
	<caption>表格的标题</caption>
	<thead>
	      <!--tr表示行-->
		<tr>   
			<th>表头</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		  <!--td表示单元格（列）-->
			<td>单元格内容</td> 
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>脚部</td>
		</tr>
	</tfoot>
</table>
  • 表格的基本结构：
<table>
	<tr>
		<th>表头</th>
	</tr>
	<tr>
		<td>单元格内容</td>
	</tr>
	<tr>
		<td>脚部</td>
	</tr>
</table>

注：在上面的结构中thead、tbody、tfoot可以省略不写，不写时，则默认为tbody；th标签有字体加粗文本居中的样式。

         好了，了解了表格的结构，接下来来了解一下表格的属性，其实表格的大多数属性都被html5废弃了，在css出现之前，html4之后，常用table表格来布局页面。

  • table的属性：
属性名含义属性值
width设置表格的宽度像素(px)或者百分比(%)，默认为像素
height设置表格的高度像素(px)或者百分比(%)，默认为像素
cellpadding单元格的边框与内容之间的距离像素(px)或者百分比(%)，默认为1px
cellspacing单元格之间的间隔像素(px)或者百分比(%)，默认为2px
align设置表格水平对齐left 、center、right
frame设置表格外边框的线viod、box、border、above、below、hsides、lhs、rhs、vsides
rules设置表格内边框的线none、rows、cols、all
border设置表格边框的粗细默认为0
bordercolor设置表格边框的颜色
bgcolor设置表格背景颜色
backgroung设置表格的背景
  • tr的属性：
属性名含义属性值
align设置单格中的内容水平对齐left、center、right
valign设置单格中的内容垂直对齐top、middle、bottom 、baseline(基线对齐)
bgcolor设置表格行的背景颜色
  • td的属性：
属性名含义属性值
width设置单元格的宽度像素(px)或者百分比(%)，默认为像素
height设置单元格的高度像素(px)或者百分比(%)，默认为像素
align设置单元格中的内容水平对齐left、center、right
valign设置单元格中的内容垂直对齐top、middle、bottom 、baseline(基线对齐)
rowspan设置跨行(纵向)合并单元格数
colspan设置跨列(横向)合并单元格数
bgcolor设置单元格背景颜色
backgroung设置单元格的背景

了解一下frame和rules属性值：

frame的属性值含义
viod不显示外边框
box显示四周的外边框
border显示四周的外边框
above显示上边的外边框
below显示下边的外边框
hsides显示上下的外边框
lhs显示左边的外边框
rhs显示右边的外边框
rhs显示左右的外边框
rules的属性值含义
none不显示内边框 (默认值)
rows在行之间显示内边框
cols在列之间显示内边框
all显示四周的内边框

好了，了解完表格的结构和表格的属性之后，让我们来看一下例子：
效果图：
在这里插入图片描述
代码的写法： 设置1px的边框，宽度为450px，高度为400px，去掉单元格之间的间隔，单元格内容与边框的距离为6，边框的颜色为绿色，加上背景图片。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高中课程表</title>
</head>

<body>
	<table border="1" width="450" height="400"  cellspacing="0" 
	cellpadding="6" bordercolor="#5FD9ED" background="_20181219072322.jpg" >
		<caption>高中课程表</caption>
		<tr>
			<th>星期</th>
			<th>一</th>
			<th>二</th>
			<th>三</th>
			<th>四</th>
			<th>五</th>
			<th>六</th>
			<th>日</th>
		</tr>
       <!--align="center" 设置tr标签里面的内容相对于单元格居中-->
		<tr align="center">
			<td>早读</td>
			<td>语文</td>
			<td>英语</td>
			<td>语文</td>
			<td>英语</td>
			<td>生物</td>
			<td>地理</td>
			<td>历史</td>
		</tr>
		<tr align="center">
          <!--rowspan="4" 纵向合并四个单元格-->
			<td rowspan="4">上午</td>
			<td>语文</td>
			<td>地理</td>
			<td>数学</td>
			<td>英语</td>
			<td>物理</td>
			<td>数学</td>
			<td rowspan="4">自习</td>
		</tr>
		<tr align="center">
			<td>英语</td>
			<td>地理</td>
			<td>化学</td>
			<td>英语</td>
			<td>生物</td>
			<td>地理</td>
		</tr>
		<tr align="center">
			<td>地理</td>
			<td>英语</td>
			<td>地理</td>
			<td>化学</td>
			<td>生物</td>
			<td>语文</td>
		</tr>
		<tr align="center">
			<td>数学</td>
			<td>英语</td>
			<td>语文</td>
			<td>英语</td>
			<td>物理</td>
			<td>生物</td>
		</tr>
		<tr align="center">
			<td>午读</td>
			<td>生物</td>
			<td>地理</td>
			<td>历史</td>
			<td>地理</td>
			<td>化学</td>
			<td>物理</td>
			<td rowspan="4">休息</td>
		</tr>
		<tr align="center">
			<td rowspan="3">下午</td>
			<td>物理</td>
			<td>地理</td>
			<td>数学</td>
			<td>英语</td>
			<td>物理</td>
			<td>化学</td>
		</tr>
		<tr align="center">
			<td>体育</td>
			<td>英语</td>
			<td>语文</td>
			<td>英语</td>
			<td>物理</td>
			<td>英语</td>
		</tr>
		<tr align="center">
			<td>生物</td>
			<td>英语</td>
			<td>地理</td>
			<td>英语</td>
			<td>语文</td>
			<td>休息</td>
		</tr>
		<tr align="center">
			<td>晚读</td>
			<td>生物</td>
			<td>地理</td>
			<td>历史</td>
			<td>地理</td>
			<td>历史</td>
			<td>物理</td>
			<td>语文</td>
		</tr>
		<tr align="center">
			<td>晚自修</td>
           <!--colspan="7" 横向合并七个单元格-->
			<td colspan="7" align="center">自习</td>
		</tr>
	</table>
</body>
</html>

今天就分享到这里，您可以设置您喜欢的表格，如有问题请留言！

玖.儿
关注
浅谈Html网页表格结构化标记的应用
09-28
在本文中，我们将深入探讨HTML表格的结构化标记，包括表格的组成部分、标题的设置以及直列化格式的应用。 首先，HTML表格的结构化标记主要涉及三个部分：`<thead>`（表头）、`<tbody>`（表体）和`<tfoot>`（表尾）...
HTML标记标签
卷王工作室
02-12 518
html标记所含的标签大全
HTML常用标签详解
weixin_65875490的博客
01-16 1870
概念：用特定的标签，去表达特定的含义。原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。优势：代码结构清晰可读性强。有利于 SEO（搜索引擎优化）。方便设备解析（如屏幕阅读器、盲人阅读器等）。alt 属性的作用：搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。当图片无法展示时候，有些浏览器会呈现 alt 属性的值。盲人阅读器会朗读 alt 属性的值。#尽量不调整图片的宽度和高度，会导致
HTML中的table标签属性
最新发布
a1k2l45k的博客
06-19 1783
和和和
html页面foot,html tfoot标签是什么意思？这里有html tfoot标签的定义和用法实例
weixin_34170028的博客
06-04 1438
本篇文章主要的介绍了关于HTML tfoot标签的定义和详细的使用方法实例，让大家都能一下就能看出来HTML tfoot标签的具体的用法，大家可以跟着上面的说的去实践，所有的软件方面的能力都是需要不断的敲代码练习出来的。好了，说多了，开始我们今天的这篇文章吧。html tfoot标签的定义和用法：在html中，标签是用来组合html表格的页脚内容，通常与标签和标签一起使用，分别用来规定表格的页脚、...
html页面foot,HTML tfoot用法及代码示例
weixin_39870238的博客
06-04 711
HTML中的标记用于提供页脚内容组。此标记在带有标题和正文的HTML表中使用，称为“thead”和“tbody”。 标记是表的子标记，是和的父标记。用法: // Table footer contents... 属性：标记包含HTML4.1支持但HTML5不支持的许多属性。align:设置文本内容的对齐方式。valign:它用于设置文本内容的垂直对齐方式。char:将标题单元格中的内容与字符对齐。...
HTML表格
king220022的博客
02-24 138
和标记着行的开始和结束，在表格中包含几组和标记着单元格的开始和结束。、和这三个标签分别表示表头、表身、表脚。、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以没有，但是这3者必须要有。标准单元格1标准单元格1
HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
12-04
本教程将深入讲解如何使用HTML的WIDTH和HEIGHT属性来手动设定表头的宽度和高度。 默认情况下，HTML表格的各部分会根据它们的内容自动调整大小，以适应显示的数据。然而，开发人员有时需要对表格或特定单元格进行更...
HTML表格标记教程(6):暗边框色属性BORDERCOLORDARK
12-10
HTML表格是网页设计中不可或缺的一部分，它用于组织和展示数据。在HTML中，表格通过`<TABLE>`元素创建，可以通过各种属性来定制其外观和样式。本教程将深入讲解一个特殊的表格属性——`BORDERCOLORDARK`，该属性允许...
深入解析HTML的table表格标签与相关的换行问题
09-28
`<thead>`, `<tfoot>`, 和`<tbody>`是HTML表格的分组标签，它们分别用于定义表格的头部、尾部和主体。这些标签有助于提高表格的可读性和可维护性，特别是在长表格中。`<thead>`和`<tfoot>`可以在表格数据未完全加载...
HTML表格标记教程(38):表头的边框色属性BORDERCOLOR
12-04
本教程将深入讲解如何使用`BORDERCOLOR`属性为HTML表格的表头（TH）设定不同的边框颜色，以此增强表格的视觉效果。 `<TH>`标签用于创建表格的表头单元格，它提供了比普通单元格`<TD>`更多的样式控制选项。`...
html中foot怎么定义,html中如何使用tfoot标签
weixin_35893552的博客
06-27 1454
html中如何使用tfoot标签发布时间：2020-09-24 10:58:00来源：亿速云阅读：112作者：小新这篇文章将为大家详细讲解有关html中如何使用tfoot标签，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。html tfoot标签定义表格的页脚(脚注或表注)，用于组合 HTML 表格的页脚内容。tfoot 元素应该与 thead 和 tbody 元...
HTML基础知识2
weixin_45607495的博客
06-26 202
1、表格：为了展示数据 <table>....</table>用于定义表格标签 <tr>...</tr>用于定义表格中的行，必须嵌套到table中 <td>....</td>用于定义表格中的列，必须嵌套到tr中 注意：table,tr,td之间都要缩进一个单元格，这是为了代码的规范化 2、表格属性 border:表示表格边框 width，height，表示表格的宽度和高度(像素值，一般都是几百） align:表格对齐
html table脚注,html 表格进阶
weixin_29688535的博客
06-10 268
表格进阶(TABLE ADVANCED) 表格的色彩表元的背景色彩和背景图象#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, AquaFoodDrinkSweetABFoo...
【自学HTML笔记第2篇】HTML中的表格标签
m0_64231944的博客
10-21 729
HTML中的table标签
HTML---表格table标签中thead、tbody、tfoot的作用
热门推荐
weixin_45729253的博客
04-17 1万+
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。 tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂...
html5常见用法,HTML5 笔记之 HTML5 的常见用法介绍
weixin_30239869的博客
06-25 289
阅读目录一、网页标题、文章标题、文章段落代码：这是网页标题这是文章标题这是文章的标题这是一个段落运行结果为：这是文章标题这是文章的标题这是一个段落注意：这里看不到网页标题，网页标题会显示在浏览器的网页标签上文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种二、字体大小、字体颜色、字体类型、字体位置、背景颜色代码：这是网页标题改变字体的大小改变字体的颜色改变字体的类型改变字体的位置...
html table 表格脚,HTML表格table
weixin_29503445的博客
06-14 409
一个表格，包含多个行，行内又包含多个列，如下，通过定义一个表格，通过定义表格中的行，通过定义表格中的列，可以设置border(边框)，width(宽度)属性姓名语文分数数学分数总分小明10080180小红8090170效果如下：姓名语文分数数学分数总分小明10080180小红8090170td－colspan属性／rowspan属性在excel中有合并单元格，HTML表格中，同样可以实现colsp...
html表格有什么属性,一篇文章带你了解HTML表格及其主要属性介绍
weixin_42637593的博客
06-07 2066
一、定义一个HTML表格使用标签定义HTML表格。标签定义表中的每一行使用。使用标签定义表头。默认情况下，表标题是粗体和居中的。一个表的数据/单元使用 标签定义。FirstnameLastnameAgeJillSmith50EveJackson94> 注意: 元素是表的数据容器。它们可以包含所有的HTML元素; 文本、图像、列表、其他表格等。1. HTML表格 - 添加边框如果不指定表的边框...
Html表格结构化标记：分块编辑与标题设置
本文深入剖析了HTML表格的结构化标记，包括如何组织表头、表体和表尾，设置表格标题，以及利用colgroup控制列样式，这些都是Web开发中构建高效、灵活且易于维护的表格布局的关键技术。理解并掌握这些技术，对于编写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值