html表格标签＜table＞

最新推荐文章于 2024-07-05 22:38:16 发布
最新推荐文章于 2024-07-05 22:38:16 发布
阅读量393 收藏 3
点赞数 2
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isfor_you/article/details/108985202
版权

文章目录

一、使用到的标签用法介绍

1. 整体表格结构说明

<table border="1px" cellspacing="0">
	<col width="200px">
	<tr align="center">...</tr> 
	<td>...</td>
</table>
  1. table标签定义 HTML 表格。
    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
  2. tr元素定义表格行，th元素定义表头，td元素定义表格单元。
  3. 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
  4. < col width=“200px”>表示一列单元格的宽度为200像素
  5. border="1px"为边框属性，cellspacing使用单元格间距增加单元格之间的距离，align="center"为文字居中对齐

2. 针对table的属性说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<col width="200px">
			<col width="200px">
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
		<br>
		<table border="2px" cellspacing="1">
			<col width="200px">
			<col width="200px">
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

对比table1和table2，区别border和cellspacing属性

  • table1中border值为1px，则其表格边框像素为1，cellspacing属性值为0，则此表格中各单元格之间间隙为0
  • table2中border值为2px，则其表格边框像素为2，cellspacing属性值为1，则此表格中各单元格之间存在间隙为1像素

二、表格制作简单代码实现

制作大小为5*5的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>前端技术阶段划分标准</h3>
		<table border="1px" cellspacing="0">
			<thead>标准表</thead>
			<tbody>
			<col width="200px"><!--每列的宽度-->
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<tr align="center">
				<td></td>
				<td>初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr align="center">
				<td>标准</td>
				<td>被产品怼的不像话</td>
				<td>跟产品互怼不相上下</td>
				<td>怼的产品没话说</td>
				<td>直接将其怼辞职</td>
			</tr>
			<tr align="center">
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户B</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>用户C</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			</tbody>
			<tfoot>
				表1
			</tfoot>
		</table>
	</body>
</html>

三、输出结果示例

在这里插入图片描述

四、其他table属性标签

1.标签介绍

  • 表格整体框架：
<table>
	<thead>表格页眉</thead>
	<tbody>表格主体</tbody>
	<tfoot>表格页脚</tfoot>
</table>
  • 表示单元格前六列的宽度：
<colgroup span="6" width="200px">
  • 合并单元格

< th colspan=“7”>…< /th>
colspan 设置单元格可横跨的列数。

2.制作简单个人简历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<tbody>
				<colgroup span="7" width="100px">
					<tr height="40px" align="center">
						<th colspan="7">个人简历</th>
					</tr>
					<tr height="40px" align="center">
						<td>姓名</td>
						<td></td>
						<td>性别</td>
						<td></td>
						<td>年龄</td>
						<td></td>
						<td rowspan="4">照片</td>
					</tr>
					<tr height="40px" align="center">
						<td>学历</td>
						<td></td>
						<td>籍贯</td>
						<td colspan="3"></td>
					</tr>
					<tr height="40px" align="center">
						<td>电话</td>
						<td></td>
						<td>政治面貌</td>
						<td colspan="3"></td>
					</tr>
					<tr height="40px" align="center">
						<td>毕业院校</td>
						<td colspan="5"></td>
					</tr>
					<tr height="40px" align="center">
						<td>求职意向</td>
						<td colspan="6"></td>
					</tr>
				</colroup>
			</tbody>
		</table>
	</body>
</html>

3.结果显示

在这里插入图片描述

一枚小棋子
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜table＞表单
qq_50646296的博客
05-26 1647
2.<table>表格 2.1 <table>-----------用来定义一个表格 <thead>----------用来定义表格的头部 <tbody>----------用来定义表格的主体 <tr>---------------用来定义表格的一行 <td>-------------用来定义一行内的每一列（定义行内的元素） <th>-------------与<td>类似，但会加粗元素 <
<table>
立业的博客
12-14 514
■ 定义 <table>为表格标签，用来定义网页中的表格 ■ 使用说明 表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，使其可读性好 表格不是用来布局页面的，是用来展示数据的 ■ 示例 <table align="center" border="1" cellpadding="1" cellspacing="0" width="100" height="50...
html table 表格标签
小白前端
08-16 269
刚开始学习前端的,看老师非常轻而易举的就能写出一个表格的架构,然后对表格的边框、间距、背景色等进行非常熟练的操作。自己羡慕的同时,翻阅html的文档,刚开始也看的云里雾里。但后面自己多加练习也能做到了得心应手的地步,特此记录下各个标签的用法: 首先我们看下html文档对<table> 标签定义 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 更复杂的 HTML ...
table
wenyuel的博客
08-30 184
table td的宽度可以可以设置，但是如果内容超过宽度，会加大宽度。 在表格td中，有两个属性控制居中显示： align——表示左右居中——left，center，right valign——控制上下居中——left，center，right cellspacing：设置单元格之间的距离 cellspadding的效果：随着cellpadding的值的变化，单元格中的内容会不断的与边...
＜table＞标签
qq_70005642的博客
07-07 182
table标签
HTML中table表格标签的基础学习教程
12-14
表格的标签组成HTML中的表格是由<table>为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类，设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于...
表格(TABLE)标记(TAGS)详细介绍
12-13
通过正确使用`<table>`、`<tr>`、`<th>`和`<td>`等标签以及相关的属性，我们可以创建各种复杂和定制化的表格。这些属性包括但不限于边框宽度（border）、表格尺寸（width和height）、表元间距（cellspacing）和内部...
深入解析HTML的table表格标签与相关的换行问题
09-28
`<thead>`, `<tfoot>`, 和`<tbody>`是HTML表格的分组标签，它们分别用于定义表格的头部、尾部和主体。这些标签有助于提高表格的可读性和可维护性，特别是在长表格中。`<thead>`和`<tfoot>`可以在表格数据未完全加载...
浅谈html table 标签
12-11
复制代码代码如下: <table> <tr><th></th></tr> <tr><td><td></tr> </table> 2)一个标题，可能是行标题，也可能是列标题，如何区分？需要使用scope属性scope=row/col。 复制代码代码如下: <table>
用标准dl,dt,dd标签抛弃table列表
12-09
然而，对于数据展示，尤其是表格形式的数据，人们常常会纠结于是否应该使用传统的`<table>`标签。本文将探讨如何利用`<dl>`, `<dt>`, `<dd>`标签替代`<table>`来创建数据列表，以实现更简洁、更语义化的代码。 首先...
html表格<table></table>
06-07
html表格 <table border="1"> <tr > <td rowspan="2"> </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> <tr > <td colspan="2" align="center"> 第二行的单元格 </td> </tr> <tr > <td> 第一行的单元格 </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> </table>
HTML <table> 标签
wood的博客
10-03 1007
table 标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。1、简单表格<table border="1"> <tr> <td>姓名</td> <td>语文</td> <td>数学</td> <td>英语
table标签
qq_50931436的博客
05-30 7642
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
HTML_table标签
zhongmingyu
08-07 103
table <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格标签</title> </head> <body> <table border="1px" width="1000px" cellpaddi...
HTML: <header>标签：定义文档的页眉（介绍信息）
weixin_30872499的博客
05-12 1245
IE8以及更早的版本不支持<header>标签 <header>是HTML5中的新标签 转载于:https://www.cnblogs.com/carolina/p/5487103.html
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
最新发布
朝阳39的博客
07-05 631
html 中的表格<table>由行<tr>组成，每行由单元格<td>组成。所以表格是由行组成（行由列组成），而不是由行和列组成。table 标签，属于块级元素。
html table标签
qq_34707150的博客
11-17 6224
table为表格标签 tr为行，td为列，th为每一个数据的表头。 注意：将th写在与tr平级效果如上图，为每一列的表头。将th写在与td平级效果如下图，为每一行表头。 一个小技巧： table[border=$].item$#item$*3>tr*3>td*4>{$$} 创建的是border从1到3,class从1到3,id从1到3,3行4列,数据为两位数字的3个表格。
html(七)：table标签
白骨梦儿
06-13 795
一、表格标签：<table> <table border="1px" cellpadding="10px" cellspacing="5px"> <thead> <tr> <th>name</th> <th>id</th&...
HTML——表格标签＜table＞与表格实现
qq_51869518的博客
06-25 5055
表格标签的实际应用和表格属性colspan和rowspan的详细解释与使用的实例和规则，以及不同形式的表格的实现；课程表、日历和的代码实现。欢迎大家能有更好的建议。
HTML基础知识：插入表格<table>详解
HTML表格的基本结构由`<table>`、`<tr>`和`<td>`标签组成。`<table>`是表格的容器，`<tr>`表示表格行，而`<td>`则代表表格单元格。例如： ```html <table> <tr> <td>数据1</td> <td>数据2</td> </tr> </...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值