html表格

简介: html表格

1、表格简介

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

2、表格的作用

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

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

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

3、表格基本标签

table

语法:

作用:定义表格

tr

语法:

作用:定义表格中的行

td

语法:

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

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

th

语法:

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

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

表格基本结构如下:

姓名 年龄
张三 18岁
王五 12岁

4、表格常用属性

4.1 table属性

语法:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
目录
相关文章
N..
|
3月前
|
前端开发 开发者
HTML表格
HTML表格
N..
25 1
|
3月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
2月前
|
移动开发 前端开发 HTML5
HTML5 表格快速入门:基础一点通
HTML5 表格快速入门:基础一点通
HTML5 表格快速入门:基础一点通
|
1月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
79 0
|
5天前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
5天前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
8 0
基于Vue实现具有固定表头、合并单元格的Html表格
|
5天前
Html 表格 在线转 Markdown
Html 表格 在线转 Markdown
10 0
|
1月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
69 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
2月前
HTML表格使用指南
HTML表格使用指南
18 3
|
2月前
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
15 1