HTML中复杂表格的制作方法

数据表格对于大家来说肯定并不陌生。除了excel表格还有我们网站制作内展现的表格。表格的作用都是一目了然,为了更直接的查看数据,统计数据,那么关于HTML中复杂表格的制作方法,你们知道吗?这篇文章主要介绍了HTML中复杂表格的制作方法,具有一定借鉴价值,需要的朋友可以参考下。

十年的西秀网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整西秀建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“西秀网站设计”,“西秀网站推广”以来,每个客户项目都认真落实执行。

我们首先介绍下制作HTML表格的相关标签:

定义 HTML 表格

标签定义表格的表头

标签表格主体(正文)

标签定义表格的页脚(脚注或表注)

元素定义表格行

标签为表格中一个或多个列定义属性值。

标签用于对表格中的列进行组合,以便对其进行格式化。

html表格制作及实例具体代码如下:



  1. 基本表格样式:
元素定义表头

元素定义表格单元

元素定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题,默认居中与表格之上

1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
  • 无边框表格:
  • 1.1 1.2 1.3
    2.1 2.2 2.3
    3.1 3.2 3.3
  • 双线表格:
  • 1.1 1.2 1.3
    2.1 2.2 2.3
    3.1 3.2 3.3
  • 合并表格列:
  • 1.1
    2.1 2.2 2.3
    3.1 3.2 3.3

    注:colspan在css中失效

  • 合并表格行:
  • 1.1 1.2 1.3
    2.2 2.3
    3.2 3.3

    注:rowspan在css中失效

  • 复杂表格(一)
  • 1.1 1.2
    2.1 2.2 2.3
    3.1 3.3
  • 复杂表格(二)
  • 1.1 1.2 1.3
    2.1 2.3
    3.1 3.2

    效果如下图:

    HTML中复杂表格的制作方法

    以上就是HTML中复杂表格的制作方法的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!


    网站名称:HTML中复杂表格的制作方法
    当前网址:http://csdahua.cn/article/jicpgj.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流