表格

作者: Caesar_emperor | 来源:发表于2021-11-15 13:55 被阅读0次

    1.表格的基本组成

    <!--主要用于展示数据,不会用来搭建页面-->
    <!--table里面包含caption表格标题,tr行标签,th、td列标签,th作为加粗每列标题-->
    <!--td内部可以包含ul|li, ol|li的无序,自定义标签-->
    <table border="1">
            <caption>成绩单</caption>
            <tr>
                <th>Score</th>
                <td>
                    <ol>
                        <li>80</li>
                        <li>88</li>
                    </ol>
                </td>
            </tr>
            <tr>
                <th>Summary</th>
                <td>
                <ul>
                    <li>168</li>
                </ul>
                </td>
            </tr>
        </table>
    

    2.表格扩展

    <!--可以使用thead、tbody、tfoot进行进一步划分-->
    <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Score</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Summary</td>
                </tr>
    </table>
    

    3.colspan,rowspan

    <!--只能用在th、td上-->
    <th colspan="2">Telephone</th>
    <td rowspan="2">Telephone</td>
    

    4.表格的一些属性

    1.表格位置设置:<table>元素应该使用CSS制定样式。margin-leftmargin-rightauto或者margin设置为0 auto来实现类似于align 属性的效果。
    2.颜色设置:CSS中的background-color
    3.表格、行标签高宽设置:CSS中的widthheight
    4.边框样式:border-styleborder-widthborder-color
    5.表格单元的内容和边框之间的空间:
    5.1)在<table>元素上使用CSS属性值为 collapse 的border-collapse属性。值包括:collapse、separate;
    5.2)在<td>元素上使用属性padding,以达到类似于 cellpadding 的效果。
    6.定义了两个单元格之间空间的大小(从水平和垂直方向上):
    <table>元素应该使用CSS定制样式。在<table>元素上使用CSS的属性border-spacing,以达到类似于cellspacing的效果。值包括:使用 px、cm 等单位定义距离。
    6.1)如果定义一个 length 参数,那么定义的是水平和垂直间距。
    6.2)如果定义了两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。length 不能为负值。

    5.col, colgroup

    <!--col标签只能用在table、colgroup中-->
    <!--col的属性包括span和通过CSS设置的background-color-->
    <!--span设置跨多少列来设置属性样式-->
    <!--colgroup的样式会被col的样式覆盖-->
    <table border="1">
            <colgroup>
                <col span="2" style="background-color:red">
                <!--前两列颜色为红色-->
                <col style="background-color:yellow">
            </colgroup>
            <tr>
                <th>row1</th>
                <th>row2</th>
                <th>row3</th>
            </tr>
    </table>
    

    相关文章

      网友评论

          本文标题:表格

          本文链接:https://www.haomeiwen.com/subject/dinnrktx.html