HTML中的表格

一：表格包含的结构

        table标签:定义表格

                thead标签:表格的头部(可省略)

                tbody标签:表格的内容(可省略)

                tr标签:定义行

                th标签:表头的单元格(文字加粗;文字居中)

                td标签:表格的内容部分的普通单元格(浏览器默认的文字样式;文字左对齐)

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>一班</td>
                <td>小李</td>
                <td>90</td>
            </tr>
            <tr>
                <td>02</td>
                <td>一班</td>
                <td>小红</td>
                <td>95</td>
            </tr>
            <tr>
                <td>03</td>
                <td>二班</td>
                <td>小丽</td>
                <td>85</td>
            </tr>
            <tr>
                <td>04</td>
                <td>二班</td>
                <td>小张</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

运行结果： 

没有给table添加边框属性(border)不会显示表格的边框

table标签的属性：

        border属性:边框

        width属性:宽度

        height属性:高度

        align属性:表格的对齐方式

<table border="1px" width="50%" height="400px" align="center">
        <thead>
            <tr>
                <th>序号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>一班</td>
                <td>小李</td>
                <td>90</td>
            </tr>
            <tr>
                <td>02</td>
                <td>一班</td>
                <td>小红</td>
                <td>95</td>
            </tr>
            <tr>
                <td>03</td>
                <td>二班</td>
                <td>小丽</td>
                <td>85</td>
            </tr>
            <tr>
                <td>04</td>
                <td>二班</td>
                <td>小张</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

运行结果如下：

 

 二，表格内单元格的合并

        rowspan="合并的单元格数量" 跨行合并

        colspan="合并的单元格数量" 跨列合并

        cellspacing属性:设置表格外层边框和单元格边框之间的间距

<table border="1px" width="50%" cellspacing="0" height="400px" align="center">
        <!-- caption表格标题 -->
        <caption>表格的标题</caption>
        <thead>
            <tr>
                
                <td>第一行</td>
                <td colspan="2">第一行</td>
                <td>第一行</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">第二行</td>
                <td>第二行</td>
                <td>第二行</td>
                <td>第二行</td>
            </tr>
            <tr>
                <td>第三行</td>
                <td>第三行</td>
                <td>第三行</td>
            </tr>
            <tr>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
            </tr>
        </tbody>
    </table>

运行结果为： 

 rowspan属性和colspan属性同时使用则行和列同时合并

<table border="1px" width="40%" height="400px" cellspacing="0">
        <caption>标题</caption>
        <thead>
            <tr>
                <td>第一行</td>
                <td colspan="2">第一行</td>
                <td>第一行</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第二行</td>
                <td colspan="2" rowspan="2">第二行</td>
                <td>第二行</td>
            </tr>
            <tr>
                <td>第三行</td>
                <td>第三行</td>
            </tr>
            <tr>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
                <td>第四行</td>
            </tr>
        </tbody>
    </table>

 运行结果：