继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

artimis_new
关注TA
已关注
手记 39
粉丝 3
获赞 19

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

       


课程收获:

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


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP