＜table＞ | HTML表格标签的定义与用法
定义与用法
<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。
提示：<table>系列元素用于管理页面的布局，例如页眉部分，导航栏，正文内容，页脚部分等。但是我们建议在表格上使用div标签来管理页面的布局。
HTML表格标签
| 标签 | 描述 |
|---|---|
| <table> | 它定义了一个表。 |
| <tr> | 它在表中定义一行。 |
| <th> | 它在表中定义标题单元格。 |
| <td> | 它在表中定义一个单元格。 |
| <caption> | 它定义了表格标题。 |
| <colgroup> | 它在表中指定一组一个或多个列以进行格式化。 |
| <col> | 它与<colgroup>元素一起使用以指定每个列的列属性。 |
| <tbody> | 用于将表中的正文内容分组。 |
| <thead> | 用于将表中的标题内容分组。 |
| <tfooter> | 用于将表中的页脚内容分组。 |
语法格式
<table> ……</table>
示例代码
简单表格：
<table>
<tr><th>ID</th><th>姓名</th><th>分数</th></tr>
<tr><td>1</td><td>杜甫</td><td>60</td></tr>
<tr><td>2</td><td>李白</td><td>80</td></tr>
<tr><td>3</td><td>白居易</td><td>82</td></tr>
<tr><td>4</td><td>苏轼</td><td>72</td></tr>
</table>
效果展示:
| ID | 姓名 | 分数 |
|---|---|---|
| 1 | 杜甫 | 60 |
| 2 | 李白 | 80 |
| 3 | 白居易 | 82 |
| 4 | 苏轼 | 72 |
HTML 4.01 与 HTML5差异
在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
|
|
|
|
|
所有主流浏览器都支持 <table> 标签。
标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
left center right |
HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
rgb(x,x,x) #xxxxxx colorname |
HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 |
| border |
1 “” |
规定表格单元是否拥有边框。 |
| cellpadding | pixels | HTML5 不支持。规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels | HTML5 不支持。规定单元格之间的空白。 |
| frame |
void above below hsides lhs rhs vsides box border |
HTML5 不支持。规定外侧边框的哪个部分是可见的。 |
| rules |
none groups rows cols all |
HTML5 不支持。规定内侧边框的哪个部分是可见的。 |
| summary | text | HTML5 不支持。规定表格的摘要。 |
| width |
pixels % |
HTML5 不支持。规定表格的宽度。 |
全局属性
<table> 标签支持 HTML 的全局属性。
事件属性
<table> 标签支持 HTML 的事件属性。
＜table＞ | HTML表格标签的定义与用法相关推荐
- ＜table＞表格标签属性
<table>表格标签属性 源代码 1.表格的相关标签 <table> table是用于定义表格的标签 <tr> ...
- ＜table＞＜/table＞表格标签的基本概念和基本属性
学习目标: 掌握<table></table>的使用和基本属性 学习内容: 标签是用来创建 HTML 表格的 简单的 HTML 表格由 table 元素以及一个或多个 tr(定 ...
- html定义var,html的var标签是什么？关于var标签的定义和用法详解
本篇为大家介绍了html中的var标签,html var标签是什么意思?html var标签有什么用你都知道吗,可能有很多人都不知道,那么就来看看本篇文章吧,除了基础的html var标签的定义和格式 ...
- ＜table＞表格标签
标签基本结构: <table><tr><td>111</td> </tr> </table> 表格中常用的几种标签: capti ...
- !DOCTYPE标签的定义与用法
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前,此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 该标签可声明三种 DTD 类 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
- html+link作用,html link标签有什么作用？html link标签的定义及属性介绍
html link标签有什么作用?html link标签中定义及属性介绍,下面开始本章的内容,主要给大家说的是html link标签的定义和作用,还有HTML link标签的属性介绍及属性作用 htm ...
- 前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
- HTML表格标签超级详细
HTML表格 文章目录 前言 一.表格是什么? 二.常用属性 1.<table>常用属性 2.<tr>常用属性 3.<td><th>常用属性 三.代码展 ...
最新文章
- 40.多进程同步--锁--多把锁
- 如何优雅的设计java异常
- Dockerfile 常用指令 - 每天5分钟玩转 Docker 容器技术（16）
- spark代码中添加logger_Spark的日志配置
- 运行 OpenCV-Python-Toturial-中文版 遇到的一些错误问题
- 【报告分享】2021制造业与人工智能创新应用发展报告.pdf（附下载链接）
- python基础篇–变量和简单的数据类型（下）
- 华为模拟器linux,华为模拟器命令.doc
- 网易云API服务搭建
- axio请求与响应拦截器
- DAS,NAS,SAN 三种存储技术比较
- 计算机炫酷功能,【实用】上班族必备！10个实用电脑炫酷小技巧~
- 最新Java后端面经合集 | 阿里腾讯百度字节
- 100个python算法超详细讲解：搬山游戏
- TIA博途中如何设计报警功能块FB，来简化编写离散量报警程序的时间？
- coreldraw凹槽_Coreldraw教程:打造逼真静物写生
- 宫廷计获取服务器配置信息出错,宫廷计手游宫廷会试全题目答案汇总 宫廷会试题及答案...
- 电源模块trim引脚
- 计算机考试的话语,考试祝福语简短 祝考试顺利的一句话
- [gazebo_gui-2] process has died [pid 4588, exit code 134, cmd /opt/ros/kinetic/lib/gazebo_ros/gzc