表格

没有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&amp;2</td>//合并同行单元格
                <td width="70px">3</td>
                <td width="70" rowspan="3">4&amp;8&amp;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>

</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设置元素所有边框的样式，或者单独地为各变设置边框样式。