HTML表格的运用

Binguner 发布于2019-08-29 12:37 / 541人阅读

摘要：标签，表头单元格，包含头部信息，和标签一样，被包裹，存在表头当中以下是支持的属性。表示单元格可以横跨的列数表示单元格可以横跨的行数规定与单元格相关联的一个或多个表头单元格。，设置是否显示表格中的空单元格。

table元素的简介

table标签下，通常包含caption（表格的标题），thead, tbody, tfoot,三个部分，如下表格所示：

Month	Savings
Sum	$180
January	$100
February	$80

table可以通过属性来定义它的样式，但是一般不推荐这样做，最好是通过CSS来完成样式的自定义。如果定义了属性，同时也定义了CSS样式，将以CSS样式为准。
以下属性仅作了解，并且HTML5只支持border属性。

align: 表示表格应该相对于父元素向左，右还是中间对齐

bgcolor：表格的背景颜色，值为十六进制数

border：定义边框的粗细

frame：定义哪边的边框需要显示

cellpadding：表格格子与内容之间的间隔

cellspacing：格子与格子之间的间隔

width：表格的宽度

tr标签，Table-Row，表示表格中的一行，通常被thead, tbody, tfoot。

th标签，表头单元格，包含头部信息，和td标签一样，被tr包裹，存在表头当中以下是Html5支持的属性。

colspan: 表示单元格可以横跨的列数

rowspan：表示单元格可以横跨的行数

headers：规定与单元格相关联的一个或多个表头单元格。

scope：规定表头单元格是否是行、列、行组或列组的头部 "col|row|colgroup|rowgroup"

td标签，Table-Data，表示的是单元格，通常被tr包裹。以下是Html5支持的属性。

colspan: 表示单元格可以横跨的列数

rowspan：表示单元格可以横跨的行数

headers：规定与单元格相关联的一个或多个表头单元格。

table样式的自定义

display: table, table-row, table-cell。

border-collapse：设置是否把表格边框合并为单一的边框。separate| collapse，如果为collapse，会忽略border-spacing 和 empty-cells 属性。

border-spacing：设置分隔单元格边框的距离。取值同border属性，只用于分离模式。

empty-cells：show|hide，设置是否显示表格中的空单元格。

caption-side：top|bottom, 表示表格标题的位置。

table-layout: automatic|fixed;在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。当属性值为fixed时，可以手动设置宽高，如果table的宽度或者高度确定，每个单元格将会等分。
链接描述

GPU云服务器云服务器 html的表格 html 空的表格 html 美观的表格 html表格的大小

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112027.html

HTML表格的运用

摘要：标签，表头单元格，包含头部信息，和标签一样，被包裹，存在表头当中以下是支持的属性。表示单元格可以横跨的列数表示单元格可以横跨的行数规定与单元格相关联的一个或多个表头单元格。，设置是否显示表格中的空单元格。 table元素的简介 table标签下，通常包含caption（表格的标题），thead, tbody, tfoot,三个部分，如下表格所示： ...

Batkid 2019-08-01 16:51 评论0 收藏0
2016百度前端技术学院Task02

摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 评论0 收藏0
2016百度前端技术学院Task02

摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

lolomaco 2019-08-01 16:09 评论0 收藏0
原生Js-msi系统

摘要：我也意识到在学习一个框架前，将框架的思想和原生的实现进行对比有多么重要。这个是目前为止一个大的框架思路，当然还要再进行每个功能的细分。表格将上一步的并集数据显示出来渲染分表格，表格有一个表头，用于展示商品的种类地区以及每月的销售情况。前言：由于刚入前端时间并不长，之前最近一直处在学习的阶段，现在准备找工作，回首看看之前学的，发现了很多的瑕疵。我分析觉得主要原因在于之前有些东西学的太快...

K_B_Z 2019-08-23 10:54 评论0 收藏0
CSS基础篇--你知道的display的值有多少？用了多少？

摘要：与属性的值不同，其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更，仅供参考。它的语法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 评论0 收藏0