html：表格标签（基本格式、单元格的合并、表格结构标签）

1、基本格式

<table>//定义一个完整的表格
    <tr>//一行
        <td></td>//一个单元格
        <td></td>
        <td></td>
    </tr>
</table>

用表格实现成绩登记表：

<html>

    <head>
        <meta charset="utf-8">
        <title>成绩登记表格</title>
    </head>

    <body>
        <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3">
              <!--
                        可以 定义表格的大小，背景，边框，单元格间距等
              -->
            <caption>成绩登记表</caption>
            <tr>
<th bgcolor="blanchedalmond "align="middle" >序号</th>      <!-- <th></th>标记设置-->              
<th bgcolor="blanchedalmond "align="middle ">学号</th>
<th bgcolor="blanchedalmond "align="middle ">姓名</th>
<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>

</tr>
<tr>
<td align="middle ">1</td>
<td align="middle ">20100300201</td>
<td align="middle ">张小丽</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
</tr>
<tr>
<td bgcolor="grey "align="middle ">2</td>
<td bgcolor="grey "align="middle ">20100300202</td>
<td bgcolor="grey "align="middle ">李宁</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">88</td>
<td bgcolor="grey "align="middle ">89</td>
</tr>
<tr>
<td align="middle ">3</td>
<td align="middle ">20100300203</td>
<td align="middle ">刘梅</td>
<td align="middle ">98</td>
<td align="middle ">92</td>
<td align="middle ">95</td>
</tr>
<tr>
<td bgcolor="grey "align="middle ">4</td>
<td bgcolor="grey "align="middle ">20100300204</td>
<td bgcolor="grey "align="middle ">王刚</td>
<td bgcolor="grey "align="middle ">98</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">94</td>
</tr>
<tr>
<td align="middle ">5</td>
<td align="middle ">20100300205</td>
<td align="middle ">郑军</td>
<td align="middle ">90</td>
<td align="middle ">85</td>
<td align="middle ">87</td>
</tr>
<tr>
<td bgcolor="grey "align="middle ">6</td>
<td bgcolor="grey "align="middle ">20100300206</td>
<td bgcolor="grey "align="middle ">杨波</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
</tr>
</table>
</body>
</html>

2、单元格的合并

<html>

    <head>
        <meta charset="utf-8">
        <title>成绩登记表格</title>
    </head>

    <body>
        <table width="600" border="1" align="center" cellpadding="5" cellspacing="3">
            <!--
                    可以 定义表格的大小，背景，边框，单元格间距等
            -->
            <caption>课程表</caption>
            <tr>
                <th bgcolor="blanchedalmond " align="middle">星期一</th>
                <th bgcolor="blanchedalmond " align="middle ">星期二</th>
                <th bgcolor="blanchedalmond " align="middle ">星期三</th>
                <th bgcolor="blanchedalmond " align="middle ">星期四</th>
                <th bgcolor="blanchedalmond " align="middle ">星期五</td>
            </tr>
            <tr>
                <td>数据结构</td>
                <td>数据库</td>
                <td rowspan="2">计算机组成原理</td>
                <td>大学体育</td>
                <td>大学英语</td>
            </tr>
            <tr>
                <td colspan="2">数据库</td>
                <td>数据结构</td>
                <td>大学英语</td>

            </tr>
        </table>
    </body>

</html>

利用rowspace属性和colspace属性的修改，分别实现跨行和跨列。跨行合并的话，要把最上侧的单元格作为目标单元格写合并代码，跨列合并的话，最左侧单元格为目标单元格写合并代码。例如，在合并计算机组成原理这一列的时候，将合并的代码写在第1行。

th：table head：文字会居中加粗显示，突出重要性，常用于表格第一行

border=1：表示使用边框

cellpadding：单元便于其内容之间的距离

cellspacing：单元格之间的距离

3、表格结构标签（thead与tbody）

分别定义，表格的头部和主体，头部通常位于表格第一行，主体用于存放数据，他们两个标签都放在table标签中，添加之后，显示效果无明显变化，但是结构会更加清晰。

<html>

    <head>
        <meta charset="utf-8">
        <title>成绩登记表格</title>
    </head>

    <body>
        <table width="600" border="1" align="center" cellpadding="5" cellspacing="3">
            <caption>课程表</caption>
            <thead>
            <tr>
                <th bgcolor="blanchedalmond " align="middle">星期一</th>
                <th bgcolor="blanchedalmond " align="middle ">星期二</th>
                <th bgcolor="blanchedalmond " align="middle ">星期三</th>
                <th bgcolor="blanchedalmond " align="middle ">星期四</th>
                <th bgcolor="blanchedalmond " align="middle ">星期五</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>数据结构</td>
                <td>数据库</td>
                <td rowspan="2">计算机组成原理</td>
                <td>大学体育</td>
                <td>大学英语</td>
            </tr>
            <tr>
                <td colspan="2">数据库</td>
                <td>数据结构</td>
                <td>大学英语</td>

            </tr>
            </tbody>
        </table>
    </body>

</html>

分别订一标狗的头部好主体，