整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
这里设置的solid是定义实线。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
<html>
<head>
<style>
table.a {
width:100%;
border:5px solid #dfffdd;
}
table.a th, td {
padding:10px;
}
table.a th {
width:100px;
}
</style>
</head>
<body>
<table class="a">
<tr>
<th>
<img src="url" alt="Note" style="height:66px;width:66px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
<tr>
<th>
<img src="url" alt="Note" style="height:66px;width:66px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
HTML基础教程：使用表格的布局
希望以上可以解决你们心中的一些疑惑，其中可能会有不对的地方或是需要改进的地方，欢迎留言纠正。感觉还不错欢迎关注收藏转载哦 !!!!
页布局对网站的外观特别重要，布得好，留得住用户，增收流量；布不好，用户逃之夭夭，还顺道骂两句。大多数Web系统会借用杂志或报纸那样排版，至于为什么这样，我不说，你也懂的，就是产品经理吵架吵不过程序员时，常说的：用户教育成本低。
在HTML中，如果是数据集(像excel那种)的布局，常用<table>标签，如果是内容块(网站板块)的布局，则常用<div>标签。
表格由<table>标签来定义。每个表格均有若干行<tr>标签和列<td>标签组成。<td>数据单元格的内容可以包含文本、图片、水平线、表格等内容。表格头由<th>标签生成。<table>标签常用的属性是border，用来指定边框宽度。<th>和<td>的属性rowspan，可指定跨行数。
如果真的不理解表格的意义，那你打开excel，好好操作一翻，横向合并一下单元格就知道什么是跨行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第5个HTML-表格</title>
</head>
<body>
<table border="1">
<tr>
<th>序号</th>
<th>产品名称</th>
<th>编号</th>
<th>规格</th>
</tr>
<tr>
<td>1</td>
<td>平板电脑</td>
<td>P1010</td>
<td>9.7英尺</td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>C2111</td>
<td>15英尺</td>
</tr>
</table>
</body>
</html>输出结果
网站分块布局，常用<div>标签进行定义。常见网站布局为上中下，上放导航栏，中间放内容，底部放版权和友情链接，而它们的分割便是由<div>标签负责的。当然，用<div>布局，需要CSS的支持才行。同表格<td>标签一样，<div>标签中，也是可以嵌入<p>、<hr>等标签的。
<div style="color:blue">
<h3>老陈说编程</h3>
<p>一个当了10年技术总监的老家伙，分享多年的编程经验。<br/>
想学编程的朋友，可关注：老陈说编程。<br/>
分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。</p>
</div>输出结果
好了，有关HTML布局的内容，老陈先讲这么多，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##Web##程序员##CSS##HTML5#
web前端设计排版时我们可能会用到表格布局和div+CSS布局，但现在主要使用后者，为何？今天我们来谈一谈两者之间的发展和原理。
话不多说下面来干货
上个世纪Web开发人员流行使用表格进行文档整体布局。因为当时大部分浏览器不支持CSS，而且大部分人不会CSS，且没有文档拆分设计，致使文档臃肿，到了上个世纪末大部分没有相关背景的人进入，对于那些没有相关背景的开发人员觉得表格布局简单，致使使用它的人更多。本世纪出出现了泡沫危机致使大部分非专业人士的推出，而剩下来的大神觉得css更具有优势，所以div+CSS就得以发展。
传统表格布局利用了HTML中的表格元素设置参数以达到无边框特性，将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。
特点
现在依然有网站在使用表格布局，表格布局使用方法简单，制作只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。
如今我们对网站外观要求和体验的不断提高，开发人员用各种图片来装饰网页。由于一些大图会致使下载速度缓慢，所以一般我们将大图切分成若干个小图，使网页加载速度加快。下图所示为使用表格布局的页面和该页面的部分HTML代码。
网页效果
CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。
所有都元素都被看做是一个个盒子，它们占据一定空间，在其中有着特定的内容。我们可以通过调整盒子的边框和间距等参数来调节盒子的位置以及大小。页面是由大大小小许多盒子组成的，这些盒子互相之间彼此影响，因此，我们既需要理解每个盒子内部的机构，也需要理解盒子直接的关系以及互相的影响。
组成
盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）共4个部分组成。如下图：
一个盒子在页面上由“内容+内边距+外边距+边框”组成的，可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。也不是所有用<div>定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等，从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。
网页改版维护的维护
表格布局：复杂的表格设计使得设计不易，修改更复杂，最后生成的网页代码有许多冗余，还有许多没有任何意义的元素，文件量庞大，下载慢，解析速度也慢，维护和更新困难。
Div+CSS：可以把要展示的内容与其表现样式分开，对CSS文件进行修改，其他HTML文件中自动进行套用，不必在每个HTML文件中重复设置，减少设计者更多负担，修改页面更省时。
保持视觉的一致性：
DIV+CSS技术，方便统一网页风格，避免了不同区域或不同页面体现出的效果偏差。
页面载入得更快：
大部分页面代码写在了CSS当中，使页面体积容量更小。比表格嵌套的方式，DIV+CSS将页面独立成更多区域，打开页面时，逐层加载，而不像表格嵌套那样整个页面圈在一个大表格里，由此页面加载速度更加极速。
搜索引擎友程度高：
用表格进行网页布局的代码较多，搜索引擎要把多的代码去掉。而使用DIV+CSS布局设计网页，所有样式都在CSS里，正文代码得到极大的精简，也减少了HTML代码，正文就突出了，搜索程序能在更短的时间内爬完整个页面，搜索程序执行效率得到了提升。
如果有任何错误和纰漏，请私信我更正。
如果你有任何意见一定要私信告诉我，让我快速成长起来哟。
*请认真填写需求信息，我们会在24小时内与您取得联系。
