Table布局
时间:2022-07-24
本文章向大家介绍Table布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Table布局
<table>
最常用的也是最正确的使用方法是制作表格,由于其对占据的空间有着划分的作用,便可以使用<table>
来布局。
实例
实现一个简单的布局,将表格的border
、cellpadding
、cellspacing
全部设置为0
,表格的边框和间距就不占有页面空间,它只起到划分空间的作用,如果布局复杂,可以在单元格中再嵌套表格,单元格中的元素或者嵌套的表格用align
和valign
设置对齐方式。要注意的是,在HTML5
标准中,<table>
的align
、bgcolor
、cellpadding
、cellspacing
、frame
、rules
、summary
、width
属性皆已不再支持,由CSS
设置相关属性来呈现效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TABLE布局</title>
</head>
<body>
<table border="0" style="width: 100%;">
<tr>
<td style="width: 200px;">导航栏</td>
<td>内容</th>
</tr>
</table>
</body>
</html>
问题
使用<table>
来布局绝对不是一个好的解决方案,对于布局方案首选Flex
布局,稍微复杂的布局可以选择Grid
布局方案,<table>
本身是为呈现表格化的数据而设计的,如果使用<table>
来呈现数据表格是完全没有问题的。
-
<table>
要比其它html
标记占更多的字节,代码的复杂度会大大提升。 -
<table>
会阻塞浏览器渲染引擎的渲染顺序,<table>
是整体载入后才开始显示的,没有加载完毕前,<table>
为一片空白,而<div>
等标签可以逐行渲染,一边加载一边显示。 -
<table>
经常需要多个关口,因为<table>
可以影响在它们之前已经进入的DOM
元素的显示的元素。假设因为表格最后一个单元格的内容过宽而导致纵列大小完全改变,这会造成浏览器的回流从而引发渲染性能问题。 -
<table>
里显示图片时有可能需要你把单个、有逻辑性的图片切成多个图,这个主要看需求,<table>
中进行单元格合并操作也是可行的方案。 -
<table>
会影响其单元格内部的某些布局属性的生效。 -
<table>
的各种属性逐渐不受支持,需要使用CSS
控制显示相应效果。 -
<table>
的语义是数据表格,使用<table>
来布局不利于SEO
。 - 若布局较为复杂,则可能造成多层
<table>
嵌套,代码嵌套过多表现的过于复杂。
display
倘若需要类似于表格的布局,可以使用display: table;
来呈现,display
的table
属性值只是声明了某些元素在浏览器中的样式,其并不包含语义,他的属性基本能够对应<table>
系列标签,并且还能将缺少的表格元素会被浏览器以匿名方式创建,CSS2.1
规范中写道:CSS2.1
表格模型中的元素,可能不会全部包含在除HTML
之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table
对象,使其符合table/inline-table
、table-row
、table-cell
的三层嵌套关系。
-
table
类似<table>
:此元素会作为块级表格来显示,表格前后带有换行符。 -
inline-table
类似<table>
:此元素会作为内联表格来显示,表格前后没有换行符。 -
table-header-group
类似<thead>
:此元素会作为一个或多个行的分组来显示。 -
table-footer-group
类似<tfoot>
:此元素会作为一个或多个行的分组来显示。 -
table-row
类似<tr>
:此元素会作为一个表格行显示。 -
table-row-group
类似<tbody>
:此元素会作为一个或多个行的分组来显示。 -
table-column
类似<col>
:此元素会作为一个单元格列显示。 -
table-column-group
类似<colgroup>
:此元素会作为一个或多个列的分组来显示。 -
table-cell
类似<td>
和<th>
:此元素会作为一个表格单元格显示。 -
table-caption
类似<caption>
:此元素会作为一个表格标题显示。
参考
https://www.cnblogs.com/mguo/p/3414118.html
https://www.cnblogs.com/cowboybusy/p/10530547.html
https://www.html5tricks.com/why-not-table-layout.html
- JAVA JPA - 示例用法
- Rest-assured 写日志到 log4j
- 人工智能摘草莓?AI解决农业劳动力短缺?发达国家这样玩!
- mac上如何卸载oracle jdk 1.7
- python自动化测试(六)yaml文件管理数据
- java: ant 脚本示例
- mysql 删表引出的问题
- 修改chrome插件
- cron和crontab
- jboss上的soap web service开发示例
- 微信小程序与新零售相结合引流又出新方法啦!
- JAVA CDI 学习(2) - Scope 生命周期
- JAVA CDI 学习(3) - @Produces及@Disposes
- 3分钟带你学会git向github推送!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PostgreSQL Pgbouncer 到底怎么使用,疗效有多大
- 微信练手小程序源码 - 日历(含各种功能组件)
- Redis 5.0.8安装
- Redis 主从搭建
- Redis 5.0.8 主从+哨兵的搭建
- ammo.js-bullet物理引擎碰撞检测
- TKE上动态部署jenkins slaves
- CVE-2017-0261及利用样本分析
- 流水的NLP铁打的NER:命名实体识别实践与探索
- Spring Boot入门系列(十七)Mybatis创建自定义mapper 实现多表关联查询!
- 让你笑的七个linux命令
- GPU并行计算之向量和
- ShardingJdbc分库分表实战案例解析(下)
- 分布式链路追踪Skywalking Skywalking 存储客户端设计
- Kubernetes 的新武器:层级命名空间