<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. Canny边缘检测算法的实现

    图像边缘信息主要集中在高频段,通常说图像锐化或检测边缘,实质就是高频滤波.我们知道微分运算是求信号的变化率,具有加强高频分量的作用.在空域运算中来说,对图像的锐化就是计算微分.由于数字图像的离散信号, ...

  2. 获取app崩溃信息的途径 iOS

    获取崩溃日志的几种方法: 1.当用户抱怨闪退时,你可以要求他让设备与iTunes同步,设备与电脑上的iTunes Store同步后,会将崩溃日志保存在电脑上(路径:Mac OS X:~/Library ...

  3. 关于JavaScript中的escape、encodeURI和encodeURIComponent

    此文内容与关于JavaScript中的编码和解码函数 关联 escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被 ...

  4. 小机器人自动回复(python,可扩展开发微信公众号的小机器人)

    api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...

  5. React 国际化

    前言 React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等.知道这个库了,那让我们开始使用它 组件用法 为了和Reac ...

  6. Monit:开源服务器监控工具

    Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不依赖任何第三方程序 ...

  7. 2017年2月16日-----------乱码新手自学.net 之MVC模型

    第二篇博文,最近学习的内容还是回到了正题:ASP.NET MVC5之上.虽然EF学了个一知半解,但是用这点知识,看MVC5的MODEL部分应该还是够了.尽管周末还要恶补一下EF才行. (一)MVC简述 ...

  8. android列表停止滚动,加载图片,较为通用的一种办法

    在Adapter的itemView里面,判断列表是否在滚动中,其实是比较麻烦的,可能耦合性会比较严重. 所以考虑了下,是否能在itemView里面,检测列表的滚动状态,并监听停止状态加载图片,实现it ...

  9. C# 控制台倒计时

    年前经常聊天的大佬群里有人写了窗体的倒计时来计算下班时间和放假时间:) 简直就是在嘲讽我这种没有工作的人,哈哈哈 窗体的倒计时相当的没有技术含量,主要是不够炫酷,不能够体现我们程序员的身份. 那什么才 ...

  10. iOS开发学习路径的一些建议

    结合自己情况聊下iOS学习建议,这里不讲大道理,说说具体怎么做.欢迎大家拍砖. 1.第一点要求 ,能比较顺畅的阅读官方的文档 如果你连官方的文档读起来都非常困难,那你还谈什么提高和进阶,咱们学习iOS ...