课程名称：前端工程师2022版

课程章节：表格标签

课程讲师： elex

课程内容：

table、tr、td和th标签的正确使用实现单元格的合并

caption、thead、tbody、tfoot标签的正确使用

<thead>、<tbody>、<tfoot>标签

<thead>标签定义表头

<tbody>标签定义表核心内容

<tfoot>标签定义表脚，通常是汇总行

cellspacing、cellpadding属性

1、cellpadding属性定义了表格单元的内容和边框之间的空间，已经废弃，使用CSS替代它

2、cellspacing属性(使用百分比或像素)定义了两个单元格之间的空间的大小，已废弃，使用CSS替代

<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">

<caption>表格标题</caption>

<tr bgcolor="pink" align="center">

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

</tr>

</table>

<h1>表格合并</h1>

<table border="1">

        <tr>

            <td>A</td>

            <td>B</td>

            <td>C</td>

            <td>D</td>

        </tr>

        <tr>

            <td>E</td>

            <td rowspan="2">F</td>

            <td colspan="2" rowspan="3">G</td>

        </tr>

        <tr>

            <td>H</td>

        </tr>

        <tr>

            <td>I</td>

            <td>J</td>

        </tr>

    </table>

<h1>表格其他标签</h1>

    <table border="1">

        <!-- 表头 -->

        <thead>

            <tr align="center">

                <th></th>

                <th colspan="2">11111</th>

                <th colspan="2">22222</th>

                <th colspan="2">33333</th>

            </tr>

            <tr align="center">

                <th></th>

                <th>国内</th>

                <th>国外</th>

                <th>国内</th>

                <th>国外</th>

                <th>国内</th>

                <th>国外</th>

            </tr align="center">

        </thead>

        <tbody>

            <tr align="center">

                <th>手机</th>

                <td>132</td>

                <td>312</td>

                <td>13</td>

                <td>453</td>

                <td>453</td>

                <td>534</td>

            </tr>

        </tbody>

        <tfoot>

            <th>汇总</th>

            <td colspan="2">15641651</td>

            <td colspan="2">15641651</td>

            <td colspan="2">15641651</td>

        </tfoot>

    </table>

课程收获：

谢谢老师，讲的非常细致，很容易懂。