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