详解HTML表格

  发布时间:2020-07-31 09:32:10   作者:佚名   我要评论
这篇文章主要介绍了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实现a元素href的URL链接自动刷新或新窗口打开功能

    这篇文章主要介绍了html实现a元素href的URL链接自动刷新或新窗口打开,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-31
  • 详解HTML表格

    这篇文章主要介绍了HTML表格,包括表格的作用布局及格式问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-31
  • html解决table设置宽度无效的问题

    这篇文章主要介绍了html解决table设置宽度无效的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-07-30
  • html中table固定头部表格tbody可上下左右滑动

    这篇文章主要介绍了html中table固定头部表格tbody可上下左右滑动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2020-07-30
  • HTML中div嵌套div的margin不起作用的解决方法

    这篇文章主要介绍了HTML中div嵌套div的margin不起作用的解决方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考
    2020-07-30
  • html中把多余文字转化为省略号的实现方法方法

    这篇文章主要介绍了html中把多余文字转化为省略号的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-30
  • html中input提示文字样式修改的示例代码

    这篇文章主要介绍了html中input提示文字样式修改,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-30
  • 详解html中表格table的行列合并问题解决

    这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-07-28
  • Layui表格选中指定行的radio单选框并滚动到该行的实现代码

    这篇文章主要介绍了Layui表格选中指定行的radio单选框并滚动到该行,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参
    2020-07-17
  • 利用div+css3实现一个背景渐变的button按钮的示例代码

    这篇文章主要介绍了利用div+css3实现一个背景渐变的button按钮的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2020-07-07

最新评论