HTML之表格的基本知识

简介: HTML之表格的基本知识

表格的主要作用

1、表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

总结: 表格不是用来布局页面的,而是用来展示数据的.

1.2 表格的基本语法

  1. 是用于定义表格的标签。
  2. 标签用于定义表格中的行,必须嵌套在
  1. 标签中。
  2. 用于定义表格中的单元格,必须嵌套在标签中。
  3. 字母 td 指表格数据(table data),即数据单元格的内容。

3、 表格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)

4、表头单元格标签

表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.

5、1.4 表格属性

表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置.

目的有2个:

5. 记住这些英语单词,后面 CSS 会使用.

6. 直观感受表格的外观形态.

6、案例分析

7、表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.

在表格标签中,分别用:标签 表格的头部区域、标签 表格的主体区域. 这样可以更好的分清表

格结构。

8、表格标签- 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.

7. 合并单元格方式

8. 目标单元格

9. 合并单元格的步骤:

(1)合并单元格方式:  跨行合并:rowspan=“合并单元格的个数”

 跨列合并:colspan="合并单元格的个数

合并单元格三步曲:

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:。
  3. 删除多余的单元格。

    9、. 表格的相关属性


相关文章
N..
|
6天前
|
前端开发 开发者
HTML表格
HTML表格
N..
12 1
|
6天前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
60 0
|
6天前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
6天前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
37 0
|
6天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`<ul>`)和有序列表(`<ol>`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`<table>`)用于展示结构化数据,通过`<tr>`、`<td>`和`<th>`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
6天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
23 1
|
6天前
|
前端开发
《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)
《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)
17 0
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
12 0
|
6天前
|
JSON 前端开发 JavaScript
从假数据到动态表格:一个简单的JavaScript和HTML示例
从假数据到动态表格:一个简单的JavaScript和HTML示例
|
6天前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
12 0