标签：7.30 表格 标签 逼人 表头 Html key 帅气

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>等表格标头标签

• 注意标头插入的位置

标签：7.30,表格,标签,逼人,表头,Html,key,帅气
来源： https://www.cnblogs.com/JunkingBoy/p/15081229.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。