HTML之表格篇

本文详细介绍了HTML表格的使用,包括表格的作用、元素、属性、边框处理、单元格合并及对齐方式。强调表格用于数据展示,而非布局,并提供设置单元格宽度的方法。
摘要由CSDN通过智能技术生成

1. 概述

  1. css技术出现之前,网页通常使用表格布局
  2. 由于表格的渲染速度过慢嵌套太深布局较为复杂,所以在出现css之后网页布局一般都不用表格了。
  3. 但是后台还在使用,因为后台是面向管理员的,对界面要求不高,对功能性要求高

2. 表格的主要作用

  1. 表格主要用于显示数据、展示数据,因为它可以让数据显示的非常规整,可读性非常好。
  2. 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。
  3. 一个清爽简约的表格能够把很复杂的数据表现的很有条理
  4. 总结:表格不是用来布局页面的,而是用来展示数据
    在这里插入图片描述

3. 表格元素

  1. table 整个表格
  2. caption 表格标题
  3. thead 表头
  4. tbody 表格主体
  5. tfoot 表尾
  6. tr 表格行
  7. th 表头单元格(或称标题单元格)
  8. td 普通单元格

4. 表格的属性

  1. 表格标签这部分属性我们实际开发中不常用,后面通过CSS来设置
  2. 这些属性写在table标签的行内,数值都不需要单位,用字符串的形式书写
    在这里插入图片描述

5. 表格边框空隙处理

  1. border-collapse: 边框的折叠方式,默认值separate分离,collapse折叠。此属性写在table元素里
  2. cellPadding="0" cellSpacing="0" 也可以去掉表格空隙,此属性写在table元素里

6. 合并单元格(难点)

6.1 单元格列合并(横向合并

  1. 把一行合并成一个单元格
  2. 长度只有一个单元格的长度:此行里面只写一个单元格
  3. 长度为此行原先长度:此行只写一个单元格,并且在此单元格中添加一个属性colspan="5",合并几个单元格就写几

6.2 单元格行合并(纵向合并

  1. 把某个单元格纵向合并,在此单元格里面添加rowspan属性
  2. rowspan="2" 表示从自己开始往后数,合并2个单元格
  3. 把后面被合并的单元格去掉

7. 表格在网页中的对齐方式

  1. align:设置表格在网页中的水平对齐方式leftcenterright,写在table元素中

8. 总结表格

  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素,列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观,那是CSS 的作用。

9. 设置单元格的宽度

  1. table元素添加 table-layout: fixed;
  2. 或者给td添加 word-break: break-all ,都可以达到表格安装我们设置的宽度显示:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值