详解HTML表格

发布时间:2022-04-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了详解HTML表格脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

作用:数据的展示,表格应用场景.

<table>表格 <tr>行 <td>单元格

格式:

<table>

  <caption>...</caption><!-表格标题,居中显示-->

  <tr>

    <th>...</th>... <!-表格头,内容居中,加粗显示--> 

  </tr>

  <tr>

    <td>...</td>...

  </tr>

</table>

表格结构标签:加载一部分 显示一部分 更加便利.

划分三部分:表头(thead),主体(tbody),脚注(tfoot)这三个标签不能影响布局

<table>

  <caption>...</caption>

  <thead>

  <tr>

    <th>...</th>... <!-表格头,内容居中,加粗显示--> 

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>...</td>...

  </tr>

  </tbody>

  <tfoot>

  <tr>

    <td>...</td>...

  </tr>

  </tfoot>

</table>

table标签属性

tr 标签属性

<table>


  <tr>

    <td colspan="2"> ...</td>

    <td> ...</td>

  </tr>

   <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

<table>

  <tr>

    <td> ...</td>

    <td rowspan="2"> ...</td>

  </tr>

   <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

说明:1.完整表格结构 2.放到<td>标签中

<table>

  <tr>

    <td> ...</td>

    <td>  

      <table>

        <tr>

          <td> ...</td>

          <td>.</td>

        </tr>

      </table>

    </td>

  </tr>

</table>

1.尽量少的使用表格嵌套。

2.尽量少的使用表格跨行跨列 。

增加代码的整体维护成本 。

使用表格进行网页结构布局一般不设置border

到此这篇关于详解HTML表格的文章就介绍到这了,更多相关HTML表格内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的详解HTML表格全部内容,希望文章能够帮你解决详解HTML表格所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: