4.表格table

最新推荐文章于 2023-07-05 21:22:01 发布
最新推荐文章于 2023-07-05 21:22:01 发布
阅读量120 收藏
点赞数
分类专栏： 前端基础 文章标签： 表格 table html 创建 属性 单元格 合并单元格 标题 使用 表格划分结构 总结 基础 tr td tbody
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112172487
版权

文章目录

1. 重点提炼

  • 表格
    • 基本结构组成
    • 合并单元格
  • 列表
  • 表单
  • 利用表格、列表和表单完成注册页面的综合案例

在这里插入图片描述


2. 表格 table(会使用)

在这里插入图片描述

表格作用：

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。

因为它可以让数据显示的非常的规整，可读性非常好。

特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

在这里插入图片描述


3. 创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释 =>

  1. table用于定义一个表格标签。

  2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。

  3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

  4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

在这里插入图片描述

总结：

  • 表格的主要目的是用来显示特殊数据的
  • 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
  • <tr></tr>中只能嵌套<td></td>类的单元格，不能放其他标签
  • <td></td>标签，他就像一个容器，可以容纳所有的元素，如div

3.1 example01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table>
		<tr> 
			<td>姓名</td>  
			<td>年龄</td>  
			<td>性别</td>  
		</tr>
		<tr> 
			<td>张三</td>  
			<td>18</td>  
			<td>男</td>  
		</tr>
		<tr> 
			<td>张三丰</td>  
			<td>99</td>  
			<td>女</td>  
		</tr>
		<tr> 
			<td>张三疯子</td>  
			<td>199</td>  
			<td>未知</td>  
		</tr>
	</table>
</body>
</html>

image-20210101175553551

参考：https://github.com/6xiaoDi/blog-html/tree/a0.13
Branch： branch01

commit description：a0.13（example01—创建表格）

tag：a0.13


4. 表格属性

表格有部分属性不常用，这里重点记住 cellspacing 、 cellpadding。

在这里插入图片描述

经常有个说法，是三参为0， 平时开发的这三个参数 border cellpadding cellspacing 为 0

案例1：

在这里插入图片描述

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1">
		<tr> 
			<td>姓名</td>  
			<td>年龄</td>  
			<td>性别</td>  
		</tr>
		<tr> 
			<td>张三</td>  
			<td>18</td>  
			<td>男</td>  
		</tr>
		<tr> 
			<td>张三丰</td>  
			<td>99</td>  
			<td>女</td>  
		</tr>
		<tr> 
			<td>张三疯子</td>  
			<td>199</td>  
			<td>未知</td>  
		</tr>
	</table>
</body>
</html>

image-20210101180303156

表格过于紧凑可以设置尺寸

<table border="1" width="500" height="200">

image-20210101180408558

设置表格（相对于页面）居中对齐，默认是left

image-20210101180551855

<table border="1" width="500" height="200" align="center">

image-20210101180621960

设置单元格和单元格之间的距离 => 外边距，一般都设置为0

<table border="1" width="500" height="200" align="center" cellspacing="10">

image-20210101180820791

<table border="1" width="500" height="200" align="center" cellspacing="0">

image-20210101210900895

cellpadding => 控制边框与字的间距

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">

image-20210101213134900

参考：https://github.com/6xiaoDi/blog-html/tree/a0.14
Branch： branch01

commit description：a0.14（表格属性）

tag：a0.14


5. 表头单元格标签th

  • 作用：
    • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
  • 语法：
    • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

在这里插入图片描述

​ 效果图

在这里插入图片描述

​ 代码：

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
	</table>

ps：th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
		<tr> 
			<th>姓名</th>  
			<th>年龄</th>  
			<th>性别</th>  
		</tr>
		<tr> 
			<td>张三</td>  
			<td>18</td>  
			<td>男</td>  
		</tr>
		<tr> 
			<td>张三丰</td>  
			<td>99</td>  
			<td>女</td>  
		</tr>
		<tr> 
			<td>张三疯子</td>  
			<td>199</td>  
			<td>未知</td>  
		</tr>
	</table>
</body>
</html>

image-20210101223321660

参考：https://github.com/6xiaoDi/blog-html/tree/a0.15
Branch： branch01

commit description：a0.15（表头单元格标签th）

tag：a0.15


6. 表格标题caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

注意：

  1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上，会随着表格走，表格如何对齐，它就在其上居住对齐。
  2. caption 标签必须紧随 table 标签之后。
  3. 这个标签只存在 表格里面才有意义。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
		<caption>个人信息表</caption>
		<tr> 
			<th>姓名</th>  
			<th>年龄</th>  
			<th>性别</th>  
		</tr>
		<tr> 
			<td>张三</td>  
			<td>18</td>  
			<td>男</td>  
		</tr>
		<tr> 
			<td>张三丰</td>  
			<td>99</td>  
			<td>女</td>  
		</tr>
		<tr> 
			<td>张三疯子</td>  
			<td>199</td>  
			<td>未知</td>  
		</tr>
	</table>
</body>
</html>

image-20210101225320096

参考：https://github.com/6xiaoDi/blog-html/tree/a0.16
Branch： branch01

commit description：a0.16（表格标题caption）

tag：a0.16


6.1 example02

chui

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小说排行榜</title>
</head>
<body>
	<table border="1" cellspacing="0" width="500" height="249" align="center">
		<caption> <h3>小说排行榜</h3> </caption>
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/down.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
	</table>
</body>
</html>

image-20210101230436046

参考：https://github.com/6xiaoDi/blog-html/tree/a0.17
Branch： branch01

commit description：a0.17（example02——小说排行榜）

tag：a0.17


7. 合并单元格(难点)

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

在这里插入图片描述


7.1 合并单元格2种方式

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

在这里插入图片描述


7.2 合并单元格顺序

**合并的顺序我们按照 先上 后下 先左 后右 的顺序 **

跟我们以前学习汉字的书写顺序完全一致。


7.3 合并单元格三步曲

  1. 先确定是跨行还是跨列合并
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>
  3. 删除多余的单元格 单元格

7.4 example03

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="500" height="240" align="center" cellspacing="0">
		<caption> 个人简历 </caption>
		<tr>
			<td>刘德华</td>
			<td>男</td>
			<td>18</td>
			<!-- 目标单元格  先上后下 -->
			<td rowspan="2">照片</td>
		</tr>
		<tr>
			<td>身高 180</td>
			<td>汉族</td>
			<td>已婚</td>
			<!-- <td>照片</td> 这个单元格是多余的 -->
		</tr>
		<tr>
			<td>个人作品</td>
			<!-- 第二个单元格是目标单元格 -->
			<td colspan="3">个人作品</td>
			
		</tr>
		<tr>
			<td>个人简历</td>
			<td colspan="3">个人简历</td>
		</tr>
	</table>
</body>
</html>

image-20210102102338908

参考：https://github.com/6xiaoDi/blog-html/tree/a0.18
Branch： branch01

commit description：a0.18（example03——合并单元格）

tag：a0.18


8. 总结表格

标签名定义说明
<table></table>表格标签就是一个四方的盒子
<tr></tr>表格行标签行标签要再table标签内部才有意义
<td></td>单元格标签单元格标签是个容器级元素，可以放任何东西
<th></th>表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>表格标题标签表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan合并属性用来合并单元格的
  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素，列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观，那是CSS 的作用。

9. 拓展阅读@

9.1 表格划分结构（了解）

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：

题头、正文和脚注。

而这三部分分别用：thead，tbody，tfoot来标注， 这样更好的分清表格结构。

image-20210102103622911

注意：

  1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead>内部必须拥有 <tr> 标签！
  2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
  3. <tfoot></tfoot>：放表格的脚注之类。
  4. 以上标签都是放到table标签中。

9.2 example04

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="0" align="center" width="500">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>刘德华</td>
				<td>男</td>
				<td>55</td>
			</tr>
			<tr>
				<td>刘若英</td>
				<td>女</td>
				<td>35</td>
			</tr>
			<tr>
				<td>刘晓庆</td>
				<td>女</td>
				<td>65</td>
			</tr>
			<tr>
				<td>刘三姐</td>
				<td>女</td>
				<td>15</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>信息地址</td>
				<td colspan="2"> 北京市五棵松体育场举办演唱会</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

image-20210102110217140

参考：https://github.com/6xiaoDi/blog-html/tree/a0.19
Branch： branch01

commit description：a0.19（example04——表格划分结构）

tag：a0.19




（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Table动态表头 数据合并行或列
weixin_43652669的博客
02-16 1481
效果如图： 功能描述： 1.根据选择时间，找出某月的第一天到最后一天，并对应星期，动态生成表头； 2. 数据中姓名、时间、名称相同的合并行 实现： <template> <div> <Divider orientation="left"> <DatePicker v-model="theMonth" type="month" @on-change="changeDate" placeholder="请选择年月" st
论element-ui表格的合并行和列（巨细节）
热门推荐
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
vue2+elementUI表格实现实现多列动态合并
最新发布
四岁爱上了她的博客
07-05 1267
elementUI表格的多列合并
elementui table表格动态生成多级表头
kurcp的博客
02-22 7643
动态生成多级表头
vue 封装table的多级表头的实现
ivan_jq的博客
10-20 3254
开发中总是会遇到各种UI设计的图表，最近也一直“沉浸”在负责的两个专门做数据可视化的项目中，其中有个表格很好玩，效果如下图：（也不知道会不会压缩） 本项目主要使用VUE、Echarts、Element UI，来吧，直接开始了。 第一步：咱们需要重新封装table组件。 <el-table :data="tableData"> <el-table-column v-for="(item, index) of tableColumns" :key="index"
layui数据表格 table.render 报错的解决方法
10-16
今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui.table表格渲染后判断checkbox多选控件是否可用
02-21
该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用，当然done下还可以做其他逻辑判定，附上源码，绝对可用。
quilljs-table:quilljs 的表格功能
05-30
使用容器在 QuillJS 中创建TABLE功能的测试实验室。 quill 代码包含在项目中，因此我们可以在测试中轻松使用它。 跑步 尝试在浏览器中打开quilljs-table/index.html 。 本项目的目的 虽然此时代码或多或少被黑客...
bootstrap table表格使用方法详解
11-29
2.加载成功，根据$table.bootstrapTable({options})显示表格样式。 感觉还是挺漂亮的哈，OK，下面贴代码解释功能。  开始之前，当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /&...
表格标签table深入了解
10-30
表格（table）是一直以来长期被大家使用的标签，直到现在还是在用，不过呢因为现在的网站重构，建议大家不要表格（table）来布局而很多朋友误以为用表格（table）就是所谓的不标准了，其实不然，表格（table）是一个...
vxe-tablevue表格解决方案 v2.10.10
01-12
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vue之table表格的合并
weixin_47409897的博客
10-09 6942
目录vue之table表格的合并 vue之table表格的合并 转载于：https://blog.csdn.net/qq_43563070/article/details/105545923 <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%" >
vue+el-table实现展开与折叠
weixin_46054723的博客
04-10 2761
本文会提到两种实现方法，之前我使用的是第一种，后来加了固定列，发现展开与折叠失效，故而出现了第二种方法。
vue表格合并行的一个实例
weixin_30492047的博客
05-12 56
一、element控件实现 在平常的应用中，需要用到合并单元格的操作，在Excel中，这种操作很好实现，但在实际项目中，常常需要借助element控件来实现。 下面是element中的一个实例： 实现的代码如下： <template> <div> <el-table :...
7.表格标签
potato123232的博客
03-11 3499
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
前端学习之HTML——表格
Jane_xxxxxy的博客
07-26 602
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 表格不是用来布局页面的,而是用来展示数据的。 表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>
表格标签
花&败
01-27 1569
1.简介 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2.创建表格 table、tr、td，他们是创建表格的基本标签，缺一不可 table用于定义一个表格标签。 tr标签 用于定义表格中的行，必须嵌套在 table标签中。 td 用于定义表格中的单元格，必须嵌套在<tr...
HTML表格标签
司天宏的博客
01-11 888
基本表格 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/hea
app.UITable.ColumnWidth让表格等宽
05-26
是的，`app.UITable.ColumnWidth` 可以让...table.addRow(["Data 4", "Data 5", "Data 6"]) # 显示表格 table.present() ``` 在此示例中，我们将表格的每列宽度设置为 `100`，以使其等宽。你可以根据需要更改列宽。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值