HTML学习13：div和表格布局
文章目录
- 1、div布局
- 2、table布局
- 3、各优缺点
在网页中，可以使用div或表格布局，各有哪些优劣呢？
1、div布局
在网页中可以使用很多个 div，使用 div 可以将网页中的任何元素布局到网页中的任何位置。
<div style="样式设置"></div>
如下所示：
<div style="width:100%;border:1px solid red"><div style="background-color:pink">泸职院</div><div style="background-color:skyblue">泸职院</div>
</div>
2、table布局
<table style="width:100%;border:1px solid red" cellspacing="0"><tr><td style="background-color:pink">泸职院</td></tr><tr><td style="background-color:skyblue">泸职院</td></tr>
</table>
两个布局的最终效果如下：
同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。
3、各优缺点
div元素布局
优点
- 符合 W3C 标准。
- 搜索引擎更加友好。
- 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
- 节省代宽，代码冗余度低。
- 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
table元素布局
优点
- 理解比较简单。
- 不同的浏览器看到的效果一般相同。
缺点 - 一个页面可能会有大量的 table 元素，代码冗余度高。
- 增加带宽。
- 搜索引擎不喜欢这样的布局。
- 布局的时候灵活度不高。
- 显示样式和数据绑定在一起。
HTML学习13：div和表格布局相关推荐
- 关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局 表格布局 导航 推荐文章 一个猴子成长史 你看个毛线 我就瞅你咋地 村里出了个半边天 一个猴子的成长 ...
- HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局 常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
- html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
- div与表格应用实例——计算器布局
样式 代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...
- Android学习笔记 2.2.1 线性布局 2.2.2 表格布局
Android学习笔记 疯狂Android讲义 文章目录 Android学习笔记 疯狂Android讲义 第2章 Android 应用的界面编程 2.2 第1组 UI组件:布局管理器 2.2.1 线性 ...
- html表格自动分列,[css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情--多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
- html div转换表格,Dreamweaver页面布局：表格与Div的相互转换
我们在Dreamweaver中使用AP Div定位网页中的内容比用表格定位网页中的内容更方便.因为AP Div可以随意移动.所以可以先用AP Div制作网页,然后再按照需要将AP Div转化为表格. ...
- Android学习|布局——TableLayout 表格布局
Android学习|布局--TableLayout 表格布局 一.概述 二.常见属性 4.子控件设置属性 三.Demo 1.android:collapseColumns 2.android:stre ...
- Android学习|布局——GridLayout 表格布局_(可行、列合并)
Android学习|布局--GridLayout 表格布局 一.GridLayout 行.列 都可以进行合并 二.常见属性 三.子控件属性 四.Demo 1.常见属性Demo 2.子控件属性Demo ...
最新文章
- ＜input＞属性为number,maxlength不起作用的解决方案
- 科普文丨Java 单元测试相关概念理清
- vba数组下标越界_VBA编程知识点（7）——数组基本知识
- python中的是干什么用的_python主要用来干什么？
- JavaScript算法（实例三）数组排序--冒泡排序 / sort() / reverse() / 比较函数
- JS Statements var / let / const
- 查看linux可用磁盘空间_如何在Linux中检查可用磁盘空间
- ftk学习记（list篇）
- 省选专练 【BZOJ4773】负环
- 语言模型总结（待完善）
- IEEE 1588 Sync报文单步时间戳
- C语言基础丨（六）程序结构——顺序结构【1】
- 使用Python自动化管理Exchange邮箱
- contest1 CF1084 div2 oooxx oooxo ooooo
- 阿拉伯数字转换成大写的数字
- bitset简单用法
- 【毕业设计】基于微信小程序的购物商城系统 开题报告
- 解放军军官军衔(不含士兵军衔)分为3等10级
- linux守护进程编程,Linux守护进程的编程实现
- 群晖我的计算机不支持此格式化,群晖常见问题解决如何使用 cloud station 在我的 pc...