ant design vue table 高度自适应_html之table表格

09d40ea17f81b0db9ab2c4f2189df0c1.png

概述

html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的。此内容可以稍微一带而过,用到的时候,再回来复习也不迟。表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

基本语法

  • thead:定义表格头部
  • tbody:定义表格主体
  • tfoot:定义表格尾部
  • tr:定义定义行
  • td:定义列 每一格数据
  • th:定义标题单元格,大多数浏览器会把表头显示为粗体居中的文本
tip:1.如果在table下直接定义tr,结构自动会补全tbody,像thead这些标签可以不写,浏览器会自动帮我们补全
2.table没有写宽度,则由内容撑开
3.如果当前列某一个宽度变化 整列都发生变化
4.如果当前行某一个高度发生变化,则整行都发生变化
5.margin无法实现表格的单元格直接的间隔

table中常用的属性

border:定义表格边线,表格默认是没有边线的。

colspan:单元格占多少列(跨列)

rowspan:单元格占多少行(跨行)

border-collapse: collapse; 当设置border="1"的时候,默认单元格都会有一条边线,使用这个样式可以避免这种情况

tip:在table也可以使用css样式表去控制,如果写行内样式,可以省略style。

实例

<!doctype html>

0d8e5ae9ac2ce17a4ab77a981e6f74c5.png
效果图
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值