HTML表格

1.我们先用一些简单的标签画一个表格

  1. 怎么画:标签可以定义一个表格,如下是用
    标签和它的一些子元素画出来的一张简单的表
    代码如下:
      

    对应的效果是这样的

    HTML表格_第1张图片
    image.png

    2.表格的组成结构

    • 表格可以说由四部分组成:caption、thead、tbody和tfoot
      其中 caption表示表格的标题,会显示在表格的正上方并且居中。thead是表格的第一行元素、就是表头,注意与caption区分开。tbody是表格的“身体”,这个标签语义化很明显,但是解释起来有点儿奇怪。。。tfoot就是表格最后一行的元素,不管tfoot标签是不是放在整个table标签的后面的,它的内容始终都会显示在表格的最后一行

    效果如下:

    HTML表格_第4张图片
    image.png

    但是bgcolor这些标签已经废弃了,而且其他的标签又不能用,相当于在这个标签中只能实现设置宽高。

    3.table定位

    观察上面的表格,如果去掉边框,表格内的数据位置还是不变的。于是,这个特性可以拿来做定位效果。但是这个方法被诟病太多,现在几乎都不用了,先写到这里,等以后有机会再来补充table定位的方法。

    你可能感兴趣的:(HTML表格)

    第一个表格
    第一个表格是这样的 第一个表格是这样的 第一个表格是这样的
    foot foot foot
    1,1 1,2 1,3
    21 2,2 2,3
    表示单元格中的数据,是tbody内的标签。表示单元格中的第一行或第一列,是thead内的标签,显示出来的效果是加粗。但是二者混用浏览器是不会摆错的,只是按照它们的样式特性来显示效果。

    2.表格内的一些装饰效果

    1. 表格默认的边框是两条线的,一般我们习惯的Excel表格时都是一条边框线,在css给table一个这样的样式:table{ border-collapse:collapse } 会使它的边框变成一条线
    HTML表格_第2张图片
    image.png

    这样就比较像我们经常看到的表

    1. 合并单元格
      把单独的
    标签改成这样的标签数字需要合并单元格的数量。但是在MDN上并没有相关的解释,可能是不太符合规范,但是浏览器认识这个。
    HTML表格_第3张图片
    image.png

    如图把tfoot里面的三个单元格合并了。
    3.colgroup标签
    使用时,用如下的代码可以实现一些简单的效果,但是比较有限,想要更多的效果还是要去css中设置样式