7.30前端之Html表格

7.30前端之Html表格

涉及到的标签

• <table>

• <tr>

• <th>

• <td>

实现列排序、行排序、一列多值排序、一行多值排序等

标签逻辑

• <table>包裹内的内容是表格内容

• <tr>定义表头

• <th>是表头

• <td>是值

带边框属性的表格实例

        <table border="1">
            <tr>
                <th>key</th>
                <th>value</th>
            </tr>
            <tr>
                <td>帅气逼人</td>
                <td>的你</td>
            </tr>
        </table>

不带边框的表格实例

        <table border="0">
            <tr>
                <th>key</th>
                <th>value</th>
            </tr>
            <tr>
                <td>帅气逼人</td>
                <td>的你</td>
            </tr>
        </table>

        <table>
            <tr>
                <th>key</th>
                <th>value</th>
            </tr>
            <tr>
                <td>帅气逼人</td>
                <td>的你</td>
            </tr>
        </table>

垂直标题表格实例

        <table border="1">
            <tr>
                <th>key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>value</td>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>

带标题的表格--->用到新的标签<caption>

在表头元素前加上caption元素

        <table border="1">
            <caption>帅气逼人表</caption>
            <tr>
                <th>人名</th>
                <th>长相程度</th>
            </tr>
            <td>Lucifer</td>
            <td>和我一样</td>
        </table>

单行跨格两列--->使用新属性<colspan>

        <table border="1">
            <caption>帅气逼人表</caption>
            <tr>
                <th>人名</th>
                <th colspan="2">长相程度</th>
            </tr>
            <td>Lucifer</td>
            <td>和我一样</td>
            <td>真的帅气</td>
        </table>

单列跨格两行--->使用新属性<rowspan>

        <table border="1">
            <tr>
                <th rowspan="2">key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>没人比你帅气</td>
            </tr>
            <tr>
                <th>value</th>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>

要注意区分单列跨两行和单行跨两列的区别：

单行跨两列：

• 给<th>标签添加元素colspan

• 在一个表头下写两个<td>值即可

单列跨两行：

• 给<th>标签添加元素rowspan

• 要添加两行要令其表头填写<td>

• 不需要重写<th>标签

表格内含表格等内容

        <table border="1">
            <caption>帅气程度表</caption>
            <tr>
                <td>
                    <p>这是一个段落</p>
                    <p>这里面有一些内容</p>
                </td>
                <td>这个单元格包含一个表格:
                    <table border="1">
                        <tr>
                            <td>A</td>
                            <td>B</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td>D</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>这个单元格包含一个列表
                <ul>
                    <li>apples</li>
                    <li>bananas</li>
                    <li>pineapples</li>
                </ul>
                </td>
                <td>Hello</td>
            </tr>
        </table>

这里要注意几个问题：

• 内嵌表格是在<td>标签内部内嵌<table>标签，再在内嵌的<table>标签内些<tr>等表格标头标签

• 注意标头插入的位置

单元格内容与方框的边距--->新属性<cellpadding>

        <table border="1" cellpadding="10">
            <tr>
                <th rowspan="2">key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>没人比你帅气</td>
            </tr>
            <tr>
                <th>value</th>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>

让单元格内的内容到单元格边界的距离变宽

单元格边框之间的间距--->新属性<cellspacing>

有边距

        <table border="1" cellspacing="20">
            <tr>
                <th rowspan="2">key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>没人比你帅气</td>
            </tr>
            <tr>
                <th>value</th>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>

边距=0

        <table border="1" cellspacing="0">
            <tr>
                <th rowspan="2">key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>没人比你帅气</td>
            </tr>
            <tr>
                <th>value</th>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>

无边据

        <table border="1">
            <tr>
                <th rowspan="2">key</th>
                <td>帅气逼人，的你</td>
            </tr>
            <tr>
                <td>没人比你帅气</td>
            </tr>
            <tr>
                <th>value</th>
                <td>是真的帅气，真的逼人</td>
            </tr>
        </table>