HTML常用标签-表格标签

最新推荐文章于 2024-07-29 20:34:34 发布

努力奔跑的鱼

最新推荐文章于 2024-07-29 20:34:34 发布

阅读量311

点赞数 5

分类专栏： JavaWeb学习路线文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44201223/article/details/138871222

版权

JavaWeb学习路线专栏收录该内容

67 篇文章 0 订阅

订阅专栏

表格标签

1 常规表格
2 单元格跨行
3 单元格跨行

1 常规表格

table标签代表表格
thead标签代表表头可以省略不写
tbody标签代表表体可以省略不写
tfoot标签代表表尾可以省略不写
tr标签代表一行
td标签代表行内的一格
th标签自带加粗和居中效果的td
代码

    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>

效果

2 单元格跨行

通过td的rowspan属性实现上下跨行
代码

    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="3">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
    </table>

效果

3 单元格跨行

通过td的colspan属性实现左右的跨列
代码

<h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>分数</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="6">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <td>总人数</td>
            <td colspan="2">2000</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td colspan="2">90</td>
        </tr>
        <tr>
            <td>及格率</td>
            <td colspan="2">80%</td>
        </tr>
    </table>