HTML之表格标签

最新推荐文章于 2024-04-26 15:36:17 发布
最新推荐文章于 2024-04-26 15:36:17 发布
阅读量2.9k 收藏 5
点赞数 6
分类专栏： HTML 文章标签： table 表格标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carson0408/article/details/79587251
版权

        在网页制作之中，表格标签是常用的标签之一，比如制作表格，或者利用表格的整齐性来设置页面布局。

<table></table>来用来制作表格，所以制作表格的语句在其之间；<tr></tr>则修饰表格行；而<td></td>修饰表格数据，这包含在<tr></tr>中。

        其中table有不少属性，比如：border,bordercolor,cellspacing,width,height,bgcolor。boder表示外框边线的粗细，bodercolor表示边线的颜色，cellspacing表示单元格之间的空隙,width表示表格的宽，height表示表格的高，bgcolor表示背景色。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
	
		<tr align="center">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下网页：


现在给表格设置个标题，这个有两种，一个是设置在表格内，一个设置表格外，首先是设置表格外的：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<caption>个人信息</caption>
		<tr align="center">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下网页：


接下来展示标题在表格内，这时候需要用到colspan属性值，表示合并列；与之相对应的是rowspan，表示行合并。 

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<td colspan="3" align="center">个人信息</td>
		<tr align="center">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下结果：


三个人都是24岁，接下来使用rowspan合并三个年龄值为一个单元格。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<td colspan="3" align="center">个人信息</td>
		<tr align="center">
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td rowspan="3">24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
		</tr>
		
	</table>
</body>
</html>

得到如下网页：


carson0408
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
7.表格标签
potato123232的博客
03-11 3517
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
html表格（详解网页表格的制作）
最新发布
百赢出品，必属精品
04-26 1871
HTML 表格由 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题。tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。
如何使用HTML做一个表格
2301_76390945的博客
09-13 1248
`元素来定义表头单元格的内容。在接下来的两个`<tr>`元素中，我们使用`<td>`元素来定义普通单元格的内容。在上面的示例中，我们使用`<table>`元素来创建一个表格。`<tr>`元素表示表格的行，`<th>`元素表示表头单元格，`<td>`元素表示普通单元格。<title>表格示例</title><th>姓名</th><th>年龄</th><th>性别张三</td><td>李四</td><td>男</td><td>女
Web前端-HTML（表格与表单）
apple_73204060的博客
12-14 1625
表格与表单
HTML表格与表单标签
sun12345678_的博客
07-18 543
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始。每个自定义列表项以开始。每个自定义列表项的定义以开始。< h2 > 减肥运动排行榜 < dl > < dt > 1、壁球 < dd > 每半小时消耗热量三百卡。可锻炼两腿灵活性，可增加速度能力。但心肺功能较差者不宜。 < dl > < dt id = " th1 " > 2、跳绳 < dd > 每半小时消耗热量四百卡。
HTML基础重点_一般标签、常用标签和表格
09-28
本文将深入讲解HTML的一些基础重点，包括一般标签、常用标签以及表格的使用。 首先，HTML文档的基本结构由`<html>`标签包裹，分为`<head>`和`<body>`两部分。`<head>`包含网页的元数据，如`<title>`标签用于设定...
表格标签.html
09-17
表格标签
HTML中table表格标签的基础学习教程
09-28
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. ...表格结构标签：加载一部分 显示一部分 更加便利. 划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局 　<caption>...</caption>
前端学习笔记一一HTML表格标签（table）(2)，零基础学习web前端
2201_75294326的博客
04-05 382
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。所以看完之后，还是多多行动起来吧！
前端学习之HTML——表格
Jane_xxxxxy的博客
07-26 602
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。 表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>
html中的table标签
weixin_43665686的博客
06-23 1874
html中table标签, table标签的行合并和列合并
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
HTML之如何创建表格？
花果山的和尚的博客
06-19 2万+
表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小...
html的表格的简单操作
全场梦游c的博客
03-11 1978
关于html的表格的简单操作，以及一些其他的基本操作。总的来说是练习了一下如何使用html编写一个表格。定义和用法&lt;table&gt; 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup...
深入了解表格的属性
weixin_30295091的博客
04-18 276
表格是网页制作时最常使用的元素了，可以说，大部分的网页都是由表格支撑的，没有表格的网页绝对是不完美的，也不可能做的非常漂亮。但是长期以来，表格的使用可以说都没有发挥它的最大作用，这是因为大家对表格的属性了解还不够透彻。看完下面的介绍，原来一直困扰你的问题也许一下子就非常简单地解决了，最起码可以使你制作时更加方便...... 一、表格的常用属性基本属性有：width（宽度）、height（高度）、b...
在HTML中表示表格的标签是,在html中，表格的标签是（）。
weixin_29230773的博客
06-17 446
_下面几种说法中错误的是()A．2a表示两个a相加B．平行四边形一定是轴对称图形C．从6：00到8：00，时针旋转了60°D下列分子或离子中，能形成分子内氢键的有______；不能形成分子间氢键的有______。 ①NH3，②H2O，③HNO3，(2004)2岁男孩。因智能低下查染色体核型为46,XY,－14,＋t(14q21q)，查其母为平衡易位染色体携带者，核用简便方法计算8.16＋5.49＋...
【HTML】HTML实现简单表单（不含验证）
A Lucky Boy的博客
02-19 4753
<!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"> <title>这是.
html表格标签怎么使用
05-19
HTML表格标签用于在网页中创建表格。以下是一些常用的HTML表格标签： 1. `<table>` 标签：用于定义表格。 2. `<tr>` 标签：用于定义表格中的行。 3. `<th>` 标签：用于定义表格中的表头单元格。 4. `<td>` 标签：用于定义表格中的数据单元格。 下面是一个简单的HTML表格示例： ``` <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>18</td> </tr> </table> ``` 以上代码会创建一个包含两行三列的表格，第一行为表头，第二行和第三行分别为数据行，每个数据行都包含三个数据单元格，分别显示姓名、性别和年龄。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值