网页布局——table布局

最新推荐文章于 2024-09-26 08:40:46 发布

weixin_30802171

最新推荐文章于 2024-09-26 08:40:46 发布

阅读量1.7k

点赞数 1

原文链接：http://www.cnblogs.com/jing-tian/p/10984346.html

版权

table布局因其自动居中等特性在早期网页设计中广泛应用，但其占字节多、影响渲染速度的缺点也逐渐显现。尽管如此，在某些特定场景下，table布局仍能提供有效的解决方案。本文将通过实例介绍table布局的基本用法，包括colspan属性的使用以及文字对齐方式。

摘要由CSDN通过智能技术生成

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式

而且也加入了 display：table;dispaly:table-cell 来支持 teble 布局。

但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)，但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。
table 布局是最简单的布局方式了，下面我们来看一个简单的例子

1.简单布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table布局</title>
 6     <style>
 7         table{
    
 8                 border-collapse: collapse;    /*用于合并表格边框*/
 9             }
10 
11     </style>
12 </head>
13 <body>
14     <table align="center" width="500" height="400" border=1 bordercolor