<table width="100" height="50" border="1" bgcolor="blue">
<caption>我是表头</caption>
<tr>
<th>哈哈1</th>
<th>哈哈2</th>
<th>哈哈3</th>
</tr>
<tr> <td bgcolor="red">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr> <td colspan="3">2</td>
<!-- <td>2</td>
<td>3</td> -->
</tr>
</table>

2

-->

我是表头
哈哈1 哈哈2 哈哈3
4 5 6
2 3

table 中可以直接设置表格的宽 高 背景色 边框长度

caption标签为表头,不占用表格空间。

tr代表行,th/td代表单元格,单元格内可设置colspan=“x”实现跨多列,rowspan实现跨多行  也可以设置此单元格的背景色。

表格内文字对齐   通过设置align=“left、right、center” 实现。

以前接触前端的时候就是从table学起,当时感觉很有意思,短短几行代码就可以实现一个表格的功能,现在感觉table太low了,都懒得写。

当然table布局还是有一定缺点的:

  (1)table布局会占用更多的字节,影响加载速度。

  (2)table布局编写起来麻烦耗时,既不利于设计思维,影响开发者阅读体验。

  (3)不利于浏览器的顺序渲染。

HTML中的table布局的更多相关文章

  1. html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)

    DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...

  2. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

  3. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

  4. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  5. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. 关于table布局的推荐使用原因

    一.关于table布局的性能 1.table标签比其他html标签占用更多字节,导致下载时间延迟,占用服务器更多的流量资源: 2.table会阻碍浏览器渲染引擎的渲染顺序,导致页面生成的延迟,造成不良 ...

  7. html页面布局之table布局:

    table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...

  8. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

  9. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

随机推荐

  1. iOS深入学习之Weak关键字介绍

    iOS深入学习之Weak关键字介绍 前言 从大二的开始接触OC就用到了weak属性修饰词,但是当时只是知道如何去用这个关键字:防止循环引用.根本没有深入地去了解它. 在刚来北京的时候面试过程中也常常考 ...

  2. <C++Primer>第四版 阅读笔记 第二部分 “容器和算法”

    泛型算法中,所谓"泛型(generic)"指的是两个方面:这些算法可作用于各种不同的容器类型,而这些容器又可以容纳多种不同类型的元素. 第九章 顺序容器 顺序容器的元素排列次序与元 ...

  3. Omi教程-组件

    组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 ...

  4. mybatis 关于时间的问题与技巧

    oracle:     此执行是在oracle下! 关于日期和时间的问题,date只有日期   timestamp 带有时分秒 一  #号取值     1.date         insert in ...

  5. win8下 msvcr100d.dll文件缺失解决方法

    一.如果在运行某软件或编译程序时提示缺少.找不到msvcp100d.dll等类似提示,您可将从载来的msvcp100d.dll拷贝到指定目录即可(一般是system系统目录或放到软件同级目录里面),或 ...

  6. Extjs 数据代理

    Ext.data.proxy.Proxy 代理类的根类 客户端代理: 1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端 要使用代理, ...

  7. java中使用正则表达式匹配字符串

    在Java中使用正则表达式去匹配相应的字符串: String importFileRole = "(import)\\s*[a-zA-Z0-9_<>.]+\\;";// ...

  8. 字符串查找算法总结(暴力匹配、KMP 算法、Boyer-Moore 算法和 Sunday 算法)

    字符串匹配是字符串的一种基本操作:给定一个长度为 M 的文本和一个长度为 N 的模式串,在文本中找到一个和该模式相符的子字符串,并返回该字字符串在文本中的位置. KMP 算法,全称是 Knuth-Mo ...

  9. angular : ngModel 内部流程

    angular 1.5 beta link NgModelController provides API for the ngModel directive. The controller conta ...

  10. 使用PHP生成二维码(PHPQRCode)

    关于什么是二维码,可以阅读 http://baike.baidu.com/view/132241.htm 这里就不多讲了,二维码的应用非常广泛,似乎一夜之间渗透到我们生活的方方面面,地铁广告.报纸.火 ...