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、. 表格的相关属性


相关文章
|
5天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
15天前
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`<table>` 定义表格,`<th>` 定义表头,`<tr>` 定义行,`<td>` 定义单元格,`<caption>` 定义标题,`<colgroup>` 和 `<col>` 定义列属性,`<thead>`、`<tbody>` 和 `<tfoot>` 分别定义表格的页眉、主体和页脚。
|
15天前
HTML 表格2
本示例展示了如何使用 HTML 的 `<table>` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border="1"` 显示边框。
|
15天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `<table>` 标签定义。表格包含行(`<tr>`)、单元格(`<td>`)和表头(`<th>`)。表格可细分为 `<thead>`(标题部分)和 `<tbody>`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
4月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
159 0
|
1月前
HTML表格
HTML表格
42 4
|
15天前
HTML 表格3
HTML 表格的表头使用 `<th>` 标签定义,通常以粗体居中显示。
|
2月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
38 1
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`<ul>`嵌套`<li>`)、有序列表(`<ol>`嵌套`<li>`)和定义列表(`<dl>`嵌套`<dt>`和`<dd>`)。
60 19
|
2月前
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`<table>`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。

热门文章

最新文章