7.30前端之Html表格

时间:2021-07-30
本文章向大家介绍7.30前端之Html表格,主要包括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>等表格标头标签

  • 注意标头插入的位置

It's a lonely road!!!

原文地址:https://www.cnblogs.com/JunkingBoy/p/15081229.html