HTML5基础

一、表格标签

1、表格简介

表格由 table标签来定义。每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。 类比:excel表格&网页中的表格

2、表格的作用

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

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

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

3、表格基本标签

  • table

    • 语法: <table></table>

    • 作用:定义表格

  • tr

    • 语法: <tr></tr>

    • 作用:定义表格中的行

  • td

    • 语法: <td></td>

    • 作用:定义表格数据(table data) 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    • 默认样式:内容水平居左,垂直居中

  • th

    • 语法:<th></th>

    • 作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型

    • 默认样式:字体加粗,内容水平居中,垂直居中

4.Type属性

  • width\height

    • 作用:定义表格的宽或高

    • 注:省略单位 默认px

  • border

    • 作用:使用表格的边框属性可以显示一个带有边框的表格。

    • 注意:如果不定义边框属性,表格将不显示边框。

  • cellpadding

    • 作用:定义单元格中内容和边框之间的间距

  • cellspacing

    • 作用:单元格和单元格之间的间距

 th/td属性

  • width\height

    • 作用:定义单元格宽度、高度

    • 注意:省略单位 默认px

  • align

    • 作用:单元格水平方向的对齐方式

    • 取值

      • left左对齐

      • center 居中对齐

      • right 右对齐

  • valign

    • 作用:单元格垂直方向的对齐方式

    • 取值

      • top顶对齐

      • middle居中对齐

      • bottom底部对齐

5. 表格结构标签

  • caption

    • 语法:<caption></caption>

    • 作用:定义表格的标题

    • 默认样式:居中于表格之上

    • 注意: caption 标签必须紧随 table 标签之后

  • thead

    • 语法:<thead></thead>

    • 作用:用于组合 HTML 表格的表头内容

  • tbody

    • 语法:<thead></thead>

    • 作用:用于组合 HTML 表格的主体内容

    • 提示:一个表格允许包含多个<tbody>

  • tfoot

    • 语法:<tfoot></tfoot>

    • 作用:用于组合 HTML 表格的页脚内容

  • 总结

    • 每个表格只能定义一个标题<caption>

    • thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载,或通过改变结构顺序,优先加载tbody

6. 合并单元格

  • rowspan

    • 作用:跨行合并

    • colspan

    • 作用:跨列合并

  • 操作步骤

    1. 确定是合并行还是合并列

    2. 找到目标单元格,添加合并属性如:<td rowspan="2"> 电话 </td>

    3. 删除多余单元格

7. 表格总结

  • 未定宽度的表格、单元格适应内容

  • 同一行只识别一个高,取最大值

  • 同一列只识别一个宽,取最大值

  • 表格可以包含其他HTML标签以及表格

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值