HTML基础——表格标签

什么是表格标签

  • 作用:给一堆数据添加表格语义
  • 格式
<table>
    <tr>
        <td></td>
    </tr>
</table>
  • table标签表示一个表格,tr标签表示一行,td标签表示一列
  • 注意点:
    • 表格标签有一个边框属性,默认为0,设置宽度格式:
<table border="1">
  • 组合标签,table,tr,td一起出现

表格标签的属性

  • 宽度和高度的属性
    • 可以给table和td标签使用
    • 默认按照内容的尺寸来调整,也可以通过weight和height属性来设置
    • 若给td标签设置width/height属性,会修改单元格的宽度和高度,不会修改表格的
  • 水平对齐垂直对齐的属性
    • 可以给table,tr,td标签使用,垂直对齐只能给tr和td标签使用
    • 给table设置align属性,可以控制表格在水平方向的对齐方式
    • 给tr标签设置align属性,可以控制当前行中所有单元格内容的水平方向的对齐方式
    • 给td标签设置align属性,可以控制当前单元格中内容在水平方向的对齐方式
    • 给tr,td标签设置valign设置属性,可以设置垂直方向的对齐方式
    • 注意点:
      • 若tr和td中均设置了属性,以td为准
  • 外边距和内边距的属性
    • 只能给table标签使用
    • 外边距:单元格之间的距离(cellspacing默认为2px)
    • 内边距:单元格边框和文字之间的间隙(cellpadding默认为1)
  • 以上仅作为了解,今后的开发都是通过CSS控制样式

细线表格

  • 制作方式
    • 给table设置bgcolor
    • 给tr设置bgcolor
    • 给table设置cellspacing=1px
  • 注意点:
    • table,tr,td均支持bgcolor

其余标签

  • 表格标题标签caption
    • 在表格标签中用来设置表格的标题:caption,标题自动相对于表格居中
    • 注意点:
      • 一定要写在table标签中
      • 紧跟在table标签后面
  • 标题单元格标签
    • th标签:专门存储每一列的标题——自动居中+加粗文字
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容