table就是表格。

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。

下面，教大家几个英文：

table 表格
tr = table row 表格的行，表格的排。
（注意：横的是行或排，竖的是列。）
th = table header 表格的标题。里面的内容在此元素中是水平居中对齐的。
td = table data 表格的数据，用来定义表格的元素（说通俗点就是单元格）。里面的内容在元素中是水平左对齐的。
那么知道了这几个标签的作用，我们试着写一个表格。一行两列的表格。
 
例1：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

这样就形成了一个一行两列的表格。
首先，有个最外框table，里面套着一组tr（行），tr里面再套两个元素td。
这样就形成了一行两列的表格。
下面再举一个例子：
 
例2：
如果是，两行三列，而且第一列是表格标题，那怎么写呢？

<table>
    <tr>
        <th></th>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
        <td></td>
    </tr>

这样就好了。
好的，下面再举一个例子。
 
例3：
接着上面的例子，第一列原本有两行，那么合并成一行。

<table>
    <tr>
        <th rowspan="2"></th>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

这里的rowspan是row span的组合，意思就是行的跨度。
rowspan=”2″就是跨两行。那么就是向下跨两行了啊。
如果是横着那就是跨列，用colspan。
然后再看看上面的，第二行的第一列的，th已经不见了，原因就是上面的跨了两行，第二行的th就被占位了。所以不写了。
再举例：
 
例4：
三列三行，第一行全部合并。

<table>
    <tr>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

就这样。
 
讲到这里，表格结构的基本知识已经讲完了。
但是，大家有没有觉得表格复杂的时候代码会不会很乱？
所以，正常做的时候我们是直接使用DW的插入表格功能插入表格并编辑表格的。
至于DW制作表格的方法这里就不讲了。
这里主要讲代码。
 

那么，制作表格的时候关于表格的装饰，样式的设定需要补充一下：

• 表格的td，tr，th，就是table里面的元素是没有margin这个属性的。就是没有外边距的概念，但是下面的方法可以设置单元格之间的距离。
• 单元格之间的距离是通过border-spacing来控制的。
  如果给td设置border-spacing:1px，那么两个单元格之间的距离是2px。
  如果是给table设置border-spacing:1px，那么两个单元格之间的距离是1px。
• 如果单元格border为1px，之间不想要空隙那应该怎么做呢？
  border-spacing:0。
  但是你会发现两个单元格之间边框宽度是2px。
  这个时候我们要合并边框，使用border-collapse属性，border-collapse:collapse,这么设置后，表格的边框都是1px了。
• 有的时候合并单元格之后，文字默认是居上对齐的。
  如果想水平方向和垂直方向都居中对齐那么应该怎么设置呢？
  使用：vertical-align:middle，垂直方向对齐。
  翻译：verticalalign 垂直对齐，middle 中间的。
  水平方向就是常用的text-align:center就可以了。
• 至于其它美化方法，做的时候试呗。看你想做成啥样的。

HTML5时代的表格

HTML5时代的表格，主要特点就是多平台，多客户端适应。
如果你用多了table表格，你会发现table在很多时候都有局限性。为了解决这个问题，CSS3中出现了很多把普通HTML元素模拟成表格元素的属性。
通过CSS的控制，我们可以让元素适时变成表格元素，适时变成常用HTML元素。
就是使用display属性，设置table相关值。
如下，表格是直接从英文官网摘来的，描述也简单，所以不翻译了。

table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-row-group	Let the element behave like a <tbody> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> element
table-row	Let the element behave like a <tr> element

 
例5：
HTML部分代码：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
</div>

 
CSS部分代码：

div {
 display: table;
 border-collapse: collapse;
}
dl {
 display: table-row;
}
dt, dd {
 display: table-cell;
 border: 1px solid #333333;
}


上面个的方法就可以做出一个两行两列的表格。
而且该表格的伸缩性也非常好。可以通过css做出不同的布局和样式。这就是非table表格所具备的优势。
 

注意事项：

需要注意的是，不是说现在就不适合用table了。
table有他的有点，比如复杂表格的排列方面还是很占优势的。但是制作响应式的时候有时就不是很好。
而div+css表格的方式不是说绝对主流。比如，合并单元格这方面就是个劣势了。
所以,他们有各自的优缺点。大家首先需要了解自己的需求，然后再确定用div+css的方式做表格好还是用table做表格好。
至于表格更多的使用技巧，大家可以在日后使用时再自学。