HTML表格

1、 表格简介🍅

表格由 table 标签来定义。

每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)

2、表格的作用

之前;web开发人员过去也常常使用表格来完成整个网页布局,结构嵌套复杂修改维护困难,现在已经被DlV+CSS布局所取代。

现在,用于显示. 展示数据。(能够简捷迅速地查找或早现不同类型的数据及它们之间的关系)

注意:现在HTML表格应该用于展现表格数据,而不是用来实现网页布局!

3表格基本标签

 

5. 表格结构标签

  • table
  • 语法:<table></table>
  • 作用;定义表格
  • tr
  • 语法;<tr></tr>
  • 作用;定义表格中的行
  • td
  • 语法:<td></td>
  • 作用:定义表格数据 (table data)
    单元格可以包含文本,图片、列表、段落、表单、水平线、表格等等。
  • 默认样式:内容水平居左,垂直居中
  • th
  • 语法:<th></th>
  • 作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型
  • caption
  • 作用:定义表格的标题
  • 默认样式:居中于表格之上
  • 注意:
    caption 标签心须紧随 table 标签之后
  • thead
  • 作用:用于组合 HTML 表格的表头内容
  • tbody
  • 作用;用于组合 HTML 表格的主体内容
  • 提示:一个表格允许包含多个<tbody>
  • tfoot
  • 语法:<tfoot></tfoot>
  • 作用:用于组合 HTML 表格的页脚内容
  • 总结
  • 每个表格只能定义一个标题<caption>
  • thead tbody,tfoot通常配合适用,用于划分表格语义,实现长 表格分步加载,或通过改变结构顺序,优先加载tbody
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值