在创立之初，表不使用的布局，但数据显示。抛弃表格布局，不放弃表本身，以下分享下海宇博客的一篇文章，表格的布局被滥用





表已经在Web开发中占据显赫的地位mdash；mdash；布局，甚至Web2.0我们仍然可以看到的布局图。然而，技术是不断进步的DIV+CSS组合到底敲门老式布局了新一轮的布局。后来许多无论新仇旧恨，意见或没意见的人开始在桌上的笔诛口伐表mdash；mdash；臃肿的代码，没有语义标签，复杂的书写等。记住，表不在创立之初的布局，但数据显示。丢弃表布局不不放弃表本身。那什么拯救你，我的桌子。

什么是桌子：

表html表也是数据的载体。

下面是比较标准的表格代码编写方法：


复制代码代码如下所示：


月
日期


AUG突击步枪
十八




一个简单的HTML表由一个表元素和一个或多个TR、TH或TD元素组成。TR元素定义了表行，TH元素定义了头部的单元格，而TD元素定义了表单元格。边框属性指定了表边框的宽度。单元格填充指定的细胞及其内容的边缘之间的空白。cellspacing指定单元格之间的空白。这三个属性通常是手动设置为0以避免浏览器差异。宽度属性指定表格的宽度，因为表格宽度与内部支持多变化的元素的宽度，但一般情况下，我们要表要与外容器的宽度，所以经常默认宽度设置为100%填充容器。

表布局：必须说的固定属性

表格布局：自动（默认）|固定。

参数:

自动：默认的自动算法。布局将基于每个单元格的内容。在读取和计算每个单元格后显示表，并且速度非常慢。
一种固定的布局算法，在该算法中，水平布局仅基于表的宽度、表边界的宽度、单元格之间的空间、列的宽度，而不是表的内容，解析速度很快。

固定布局模型的工作步骤：
的1.width属性值是不是所有的汽车列元素，和该列的宽度是根据设定的宽度值。
表2。宽度单元格位于第一行的列中，根据单元格宽度设置列的宽度。如果单元格是交叉列，则宽度均匀地分布在这些列上。
三.以上两步之后，如果该列的宽度仍然是汽车，它会自动确定其大小，使其宽度尽可能相等。在这一点上，桌子的宽度设置的宽度或表格列宽度的总和（较大的其中之一），如果表格是大于柱宽的总和，两者之间的差异除以列数，然后增加每列的宽度。
这个方法非常快，因为所有都是根据定义的表宽度的第一行，在根据定义的大小确定的行的第一行中的单元格之后的第一行。在单元格后面的这些行后面不会改变列的宽度。这意味着对于这些单元格指定的宽度值将被忽略。

一般做HTML的复杂形式时，有时你会发现，无论怎么调整第一行的每一列的宽度，lecoing会发生在你的意料之外的变化（如一长串的英文文本，没有中间spacedelimited你限制列的宽度，长文本换行不支持力的破坏形式，以及如何往往也是结果调整到合适的宽度），这一次在绝望中，你可以使用表格布局：固定。

表难杂病

使用表格来显示数据有时头痛，即不改变线显示特定的文本，特别是在头了。事实上，你的头痛是不是改变路线，但浏览器的兼容性在它使过渡难度大大增加。在这里，你可以看到这个文章的灵感是来自于强迫了策略和强制非变线。本文详细讨论了不同情况下的进攻和变化方式。

在一般的表格线亲自推荐为表布局的第一集：固定的，基本上集结束线的基本问题这一特性能够解决而不会出现在td，因为里面的内容都发生于其他TD的数量，该案号的宽度。在这个时候，如果你仍然有强制性的觅食问题，然后添加一层DIV里面的TD，然后使用自动换行：打破词与词的突破：打破一切；这两个CSS的方法能解决换线问题。

几种常见和不熟悉的表标记

thead，tfoot和tbody，

这三个标签是所谓的XHTML的产品，主要是为了让你能够在表中的行。当你创建一个表，你可能想拥有一个标题行、数据行和底部的总线。这种划分使浏览器都支持表机构是独立的表格标题和页脚滚动的能力。一个长桌子上打印时，表格的页眉和页脚可以打印在每一页上包含表数据。个人认为，其主要用途是适用于超长的形式显示优化。

thead标签代表的HTML标题
桌子的一头螺纹可以使用单独的样式定义页眉和页面的上部打印时打印头。

thead标签代表的页脚
表格的页脚tfoot可以使用单独的样式定义的脚注（脚注或表注），在页面的下方打印页脚。

把HTML说body标签
当浏览器显示一个表，它通常是完全下载和显示，所以当表很长，它可以显示TBODY段。

注意：如果你使用thead，tfoot，和tbody元素，你必须使用所有的元素。他们出现在thead，tfoot和tbody，秩序，使浏览器可以在接收所有数据的页眉和页脚。你必须在表格元素使用这些标签，并对thead里面必须有一个tr标签。所以写的更标准的表格的方法是下面的代码：


复制代码代码如下所示：



月
日期




月列表
日期列表




AUG突击步枪
十八





个人认为这件事是没用的，浪费掉了鸡肋。小东西可以加一些语义，但因为一旦遇到几个不同的表头在同一张表上显示出进退两难的局面，限制了以后的开发，所以一个正式的项目从情感的角度可以把这些标签扩展到小心。

Col和COLGROUP

这两个标签也是XHTML的产物，强大而兼容。

标签定义表中一个或多个列的属性值。

COLGROUP标签是用来将表中的列可以格式化。

他们的主要作用是控制细胞的宽度，从而消除单独定义每个电池的麻烦，我们常常在过去或TD的第一行的每一列的宽度规定的定义，和Col不仅可以定义宽度，但他的属性定义，如COL和控制一些列的宽度，你也可以控制列的背景色。但理想很丰满，现实是骨干。如前所述，功能越大，兼容性越强。COL和COLGROUP可以基于现有的测试中发挥作用，还可以保证兼容的应用程序是仅有的两个：宽度和背景。宽，人们喜欢用传统的方式，第一行的宽度，确保列宽。为背景，对大面积在大面积使用不同的背景，这是罕见的。因此，我认为：你不能尽可能多的使用它。

桌子在哪里使用

就我个人而言，这是真的，在一个容器，很密很可序列化的，表是正确的。最常见的例子是我们共同的采购订单页面的沉降，显示你的订单明细：商品、价格、数量、金额小计名称，运费等，最后的底部会有一个最后的命令量表在这里是如鱼得水，实现地球的数据载体。

以上是一个常用的表知识点的一个梳子，常用几个地方进行了分析和整理。看这篇文章，你可以以正确的方式看表和使用表格。希望这篇文章能为你节省一点，我的表。谢谢。