为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第5天 前端工程师2022版 表格标签第一讲

标签:
Html5

课程名称:前端工程师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>

       


课程收获:

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


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消