当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷。因此,过去的前端工作者曾利用<table>以实现“表格布局”。因为表格中同一行的单元格行高总是一致的,所以“表格布局”可以避免“浮动布局”时出现的“底部对不齐”情况,下面是经典的利用<table>实现“双栏布局”的框架:

<table>
<tr>
<td>
<!--左侧栏内容-->
</td> <td>
<!--右侧栏内容-->
</td>
</tr>
</table>

  但是随着HTML5的到来,HTML标签越来越强调“语义化”,即合理使用HTML标记以及其特有的属性去格式化文档内容。因此,利用<table>来实现“表格布局”是不推荐的,因为此时<table>中的内容并不是一个真的“表格”,不符合“语义化”的追求。那么,在追求语义化的时代,该如何实现传统的“表格布局”呢?那就是借助CSS来实现。

  利用CSS来实现“表格布局”很简单,第一步是把传统<table>布局中的<table>、<tr>、<td>改为合适的、符合“语义化”的标签,比如说上面的“双栏布局”改成这样:

<main>
<section>
<aside>
<!--左侧栏内容-->
</aside> <article>
<!--右侧栏内容-->
</article>
</section>
</main>

  然后为这些标签添加对应的display属性:

<main style="display:table">
<section style="display:table-row">
<aside style="display:table-cell">
<!--左侧栏内容-->
</aside> <article style="display:table-cell">
<!--右侧栏内容-->
</article>
</section>
</main>

  其实将上述代码与传统<table>布局的代码一对比,可以看出,变化之处就是:

  替换掉<table>的<main>有了一个“display:table”样式

  替换掉<tr>的<section>有了一个“display:table-row”样式

  替换掉<td>的<aside>和<article>分别有了一个“display:table-cell”样式。

  用CSS来替代<table>进行“表格布局”的思路是基本一致的,只是进一步将页面的结构与表现分离开来,这样做最大的好处就是可以使HTML标签尽量做到“语义化”。

用CSS实现“表格布局”的更多相关文章

  1. html/css 表格元素以及表格布局

    一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...

  2. 3月23.CSS表格布局

    360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...

  3. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 浅谈分析表格布局与Div+CSS布局的区别

    (1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...

  5. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  6. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  7. 【CSS】创建布局

    随着对分离HTML元素的语义重要性与其表现的影响的不断强调,CSS在HTML5元素布局方面的作用越来越重要. 1. 定位内容 控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式. ...

  8. PHP.3-DIV+CSS标准网页布局准备工作(上)

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  9. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

随机推荐

  1. thinkinginjava学习笔记02_对象

    对象 1. 对象通过一个引用来操作,但是java中的对象是按值传递的,基本上可以在操作中认为对象本身,在内部结构中仍然要记得是对象实体的引用:如:String s = "abcd" ...

  2. 01-Java基础及面向对象

    JAVA基础知识 Java 是SUN(Stanford University Network,斯坦福大学网络公司)1995年推出的一门面向 Internet 的高级编程语言. Java 虚拟机(JVM ...

  3. Python模块学习------ 正则表达式

    import re #f = open('data.txt','r') #for eachline in f.readlines(): #print re.split('\s\s+', eachlin ...

  4. COM学习(一)——COM基础思想

    概述 学习微软技术COM是绕不开的一道坎,最近做项目的时候发现有许多功能需要用到COM中的内容,虽然只是简单的使用COM中封装好的内容,但是许多代码仍然只知其然,不知其所以然,所以我决定从头开始好好学 ...

  5. hook键盘驱动中的分发函数实现键盘输入数据的拦截

    我自己在看<寒江独钓>这本书的时候,书中除了给出了利用过滤的方式来拦截键盘数据之外,也提到了另外一种方法,就是hook键盘分发函数,将它替换成我们自己的,然后再自己的分发函数中获取这个数据 ...

  6. console报错类型

    常见 console报错 Error 错误 EvalError 全局错误 RangeError 引用(范围)错误 ReferenceError 参数(参考)错误 SyntaxError 语法错误 ty ...

  7. .NET Core:使用ImageSharp跨平台处理图像

    一.简述 ImageSharp是一个新的跨平台2D图形API,旨在处理图像而不使用System.Drawing. 二.安装 目前ImageSharp还是处于alpha版本,所以我们需要在nuget中添 ...

  8. Effecvtive Java Note

    代码应该被重用,而不是被拷贝 同大多数学科一样,学习编程的艺术首先要学会基本的规则,然后才能知道什么时候可以打破这些规则   创建和销毁对象 1.考虑用静态工厂方法代替构造器. 优势:有名称.不必再每 ...

  9. Linux ssh双向免密认证

    一.实现原理 使用一种被称为"公私钥"认证的方式来进行ssh登录."公私钥"认证方式简单的解释是: 首先在客户端上创建一对公私钥(公钥文件:~/.ssh/id_ ...

  10. 【批处理学习笔记】第十一课:常用DOS命令(1)

    [ 文件夹管理 ]cd 显示当前目录名或改变当前目录.md 创建目录.rd 删除一个目录.dir 显示目录中的文件和子目录列表.tree 以图形显示驱动器或路径的文件夹结构.path 为可执行文件显示 ...