没有css之前，表格是最流行的布局页面方法。它表示一种布局页面的方法，不仅仅只是指单元格组成的表格。
1.制作普通表格：
表格属于结构性标签，要用<table>来进行创建。 一个最简单的表格也需要具备表头/行和列的信息。
<table>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
在HTML中，首先用<tr>来定义行。如这里有三行，在<table>中先定义三组<tr>标签。接着用<td>来定义每一个单元格，<th>表示的是表头单元格。
2.表格的基本属性：
行高height属性 设置每一行单元格的行高。
<style>
table{
height:185px;
}
table th{
height:32px;
}
</style>
宽度width属性 差不多，不过一般都是在<tr>或<th>标签里面改
3.合并单元格：
合并同行单元格用colsplan属性。 合并同列单元格使用row<html>
<head> <title>合并表格中的单元格</title> </head> <body> <h3>就一个表格</he> <table width="305" height="156" border="1">//设置表格的长宽，边框的粗细 <tr> <td width="70px" height="50">1</td> <td width="70px">2</td> <td width="70px">3</td> <td width="70px">4</td> </tr> <tr> <td height="50">5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td height="50">9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table> <p><h3>合并单元表格后</h3></p> <table width="305" height="156" border="1"> <tr> <td height="50" colspan="2">1&2</td>//合并同行单元格 <td width="70px">3</td> <td width="70" rowspan="3">4&8&12</td>//合并同列单元格 </tr> <tr> <td height="50" width="70">5</td> <td width="70">6</td> <td>7</td> </tr> <tr> <td height="70">9</td> <td>10</td> <td>11</td> </tr> </table>
</body> </html>
4.表格标题：
<caption>标签是用来定义表格的标题的，它必须紧跟着<table>标签后面。
5.拆分表格：
为了便于将表格定位给css样式表，有时候不希望一直是<tr>标签，可以用thead，tfoot，tbody来拆分表格。
Thead定义了表格的首行，tfoot定义了表格的尾行，tbody定义了表格的主题部分。
注意，如果使用 了其中一个，那么全部元素都要用上，而且要按顺序出现。（tbody可以出现多次，那两个只能出现一次）
6.设置表格的列：
可以用<colgroup>标签定义表格列的分组。这个标签经常和其他两个标签配合用，一个是<col>标签，一个是<span>标签。
<col>表示表格中一个或多个列定义属性值。是仅包含属性的空元素。只能在表格或colgroup中使用此元素。
<html> <head> <title>使用<colgroup>和<col>定义表格的列</title> <style type="text/css"> caption{ font-weight:bold; color:#000; } .one{ background:cyan; text-align:center; } .two{ background:ffee22; text-align:center; } .three{ background:silver; text-align:center; } .four{ background:#F1B005; text-align:center; } </style> </head> <body> <table width="500" height="280" border="1"> <caption>使用“colgroup”和“col”定义表格的列</caption> <colgroup class="one"></colgroup> <colgroup> <col class="two"></col> <col class="three"></col> <col class="four"></col> </colgroup> <tr> <th>排名</th> <th>金牌</th> <th>银牌</th> <th>铜牌</th> </tr> <tr> <td>中国</td> <td>51</td> <td>21</td> <td>28</td> </tr> <tr> <td>美国</td> <td>36</td> <td>38</td> <td>36</td> </tr> <tr> <td>俄罗斯</td> <td>23</td> <td>21</td> <td>28</td> </tr> </table> </body> </html>
也可以用span属性
<table>
<colgroup><span="3" class="one">
</colgroup>
</table>
这里就是表示前三列的意思。
7.修饰单元格：
通过css嗾使单元格的边框 修改边框可以用到border属性
Border:2px solid red;
<style type="text/css">
Table{
Border:3px blue;
}
.doted{
Border:3px dotted;//断断续续的边框
}
.dashed{
Border:3px double;//双边线的边框
}
.groove{
Border:3px groove;//外阴影的边框
}
</style>
还可以分别针对一个单元格的每一条边进行定义。如：
{border-left:2px dotted;}
还有border-top,border-right,border-bottom
8.合并相邻单元格：
<table>标签制定的表格会在所有的单元格之外再框上一个四边形，而每一个单元格又是独立存在的。所以单元格和单元格之间总像是有一条缝隙。有一种方法可以消除这条缝隙，就是使用“边框挤压”的属性border-collapse
{border-collapse:collapse;}
还有单元格之间分离
(border-collapse:separate;)
9.编辑单元格中的内容：
表格是由许多个单元格组成，而这些单元格里面又可以放入各种不同类型的页面内容。如文本，图片，超链接等。甚至可以放入新的表格。
使用(table-layout:fixed;)这个属性可以限制单元格随文本长度而改变。（其实就是定死单元格的大小）
10.修饰单元格中的内容：
通过定义单元格中的文本时，可以专门地指定某一行，某一列或者是整个表格。
td{
Text-align:center;
Color:#334542;
Background-color:#ddd;
}
下面给出一些样式表可以放入的属性：
border:所有四条边的属性设置到一个声明中
border-style设置元素所有边框的样式，或者单独地为各变设置边框样式。
