【Web前端】HTML—4.表格标签
一、表格的主要作用
表格主要用于显示、展示数据,可以让数据显示的非常规整,有条理,可读性非常好。特别是后台展示数据时候,能够熟练运用表格就显得很重要。
即:表格不是用来布局页面的,而是用来展示数据的。
二、表格的基本语法
<table><tr><td>单元格内的文字</td>```</tr>```
</table>
1、<table></table>是用于定义表格的标签。
2、<tr></tr>标签用于定义表格中的行,必须嵌套在<table></tr>标签中。
3、<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
4、字母td指表格数据(table data),即数据单元格的内容。
示例:
<table><tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr><tr><td>AAA</td> <td>男</td> <td>21</td></tr><tr><td>BBB</td> <td>男</td> <td>43</td></tr></table>
效果为:
姓名 | 性别 | 年龄 |
AAA | 男 | 21 |
BBB | 男 | 43 |
三、表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th>标签标示HTML表格的表头部分(tablehead的缩写)
<table><tr><th>姓名</th><td>单元格内的文字</td>```</tr>```
</table>
示例:
<table><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr><tr><td>AAA</td> <td>男</td> <td>21</td></tr><tr><td>BBB</td> <td>男</td> <td>43</td></tr></table>
效果为:
姓名 | 性别 | 年龄 |
---|---|---|
AAA | 男 | 21 |
BBB | 男 | 43 |
四、表格属性
表格标签这部分属性在实际开发中不常用,后面通过CSS来设置。
属性标签要写到table标签里面去。
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围因素的对齐方式 |
border | 1或“” | 规定表格单元是否拥有边框,默认设置为“”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容质检的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定单元格的宽度 |
五、表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
在表格标签中,分别用:
<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域
这样可以更好的分清表格结构。
六、合并单元格
1、合并单元格方式:
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
2.目标单元格:(写合并代码)
- 跨行:最上侧单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
3.合并单元格步骤
(1)先确定是跨行还是跨列合并
(2)找到目标单元格,写上“合并方式=合并的单元格数量”。
示例:<td colspan = “2”> </td>
(3)删除多余单元格
示例:
<!--合并单元格--><table width="500 " height="249 " border="1 " cellspacing="0 "><tr><td></td><td colspan="2 "></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
效果为:
【Web前端】HTML—4.表格标签相关推荐
- Web前端,HTML表格相关标签和属性,在网页中表格结构的显示
一.表格的基本标签 场景: 在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 代码 <!-- table 包含 tr, tr包含td --><table border=& ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- Web程序设计基础2021 表格标签—表格高级样式的设置 educoder实训
第1关:表格高级样式设置相关概念 任务描述 本关任务:完成一组表格高级样式设置的概念题. 相关知识 为了完成本关任务,你需要掌握:1.外边框线样式的设置,2.内部边框线的设置,3.单元格的合并. 外边 ...
- Web 前端学习之 表格
表格 1. 表格定义及属性设置 2. 表格行定义及属性设置 3. 表格单元格定义及属性设置 4. 表格单元格合并 结束语 1. 表格定义及属性设置 在HTML网页中,想创建表格,就需要使用与表格相关的 ...
- web前端复习系列[1]——标签
<h1>一般用于网站标题. 加入强调语气,使用<strong>和<em>标签.<em> 表示强调,<strong> 表示更强烈的强调.并且在 ...
- web前端基础(05htmlimg标签和滚动标签)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
- web前端——div和span标签
div和span标签都是用来帮助页面进行排版的,它们两个没有自己的语意. div:块级元素,所谓的块级元素,就是可以通过css设置宽高等一些大小的样式,这样的元素标签称为块级元素.块级元素的特点是自己 ...
- html取消图片选中效果,web前端:取消a标签在移动端点击时的背景颜色
背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间.因此,内容框与内边距都是元素背景的一部分,且边框画在背景上.css允许应用纯色作为背景,也允许使用背景 ...
- WEB前端之html img标签引用本地图片
我觉得语法大家都应该明白怎么写 <img src="img/demo.PNG">很简单 但是我在第一次写的时候总是出现图片加载不出来的情况 然后发现 只要把图片文件夹放 ...
- Web前端-el-table-column表格匹配字典数据
最近初步学习Vue开发web前端的table表格时,想通过字典中数据进行匹配展示,如下 <el-table v-loading="loading" :data="p ...
最新文章
- css盒子子类继承父类哪些,css不继承父类的属性有哪些
- 分布式系统开发的一些相关理论基础——CAP、ACID、BASE
- 【Android】17.2 Activity与Local Service的绑定
- CSS设置文字不能被选中
- Spring MVC 成员变量 request 线程安全问题的讨论
- 这几个行业会从物联网革命中获得最大利益
- 在线斯诺克html5,用HTML 5打造斯诺克桌球俱乐部
- java二分查找递归_java学习之—递归实现二分查找法
- LDD3 第15章 内存映射和DMA
- android 广播监听截屏,Android 应用监听截屏操作
- IEEE投稿完整流程——以IEEE Transactions on Cybernetics为例
- 【Java系列】:异常-Exception
- 二十年铸就未来视界 HKC让世界认可中国质造
- 计算机访问记录怎么查,电脑上微信有访客记录吗?我们要怎么查看访客?
- 程序员用学位证吗_如何成为没有学位或新兵训练的开发人员
- 个人博客后台管理系统
- 计算机网络—学习笔记
- PTA 1028 人口普查 (c语言)
- 基于51单片机的智能电子秤设计
- 【ERP】常见错误收集
热门文章
- 【elementui】走马灯自适应图片高度宽度 走马灯图片显示不全
- 【 FPGA 】稳态与亚稳态小结
- 计算机主机接电视机,电脑连接电视,详细教您电脑连接电视当显示器的方法
- php 微信 语音,PHP语言微信开发:微信录音临时转永久存储
- git小乌龟代码管理器常用指令
- Stay Hungry,Stay Foolish的解读
- python要安装文本编辑器吗_python安装后推荐的安装两款文本编辑器
- java中的Dao类,model类是什么意思
- Thumbnail 图片压缩
- 数据库 之数据库设计浅知识 -- 设计概述、概念结构设计(E-R模型概述)、逻辑结构设计(函数依赖和范式)、物理结构设计