HTML 表格

您所在的位置:网站首页 html如何设置表格颜色不变 HTML 表格

HTML 表格

2024-04-25 18:18| 来源: 网络整理| 查看: 265

❮ 上一节 下一节 ❯ HTML 表格

HTML 表格允许 web 开发人员将数据排列成行和列。

实例 Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy 亲自试一试 » HTML 表格

表格由 标签来定义。

每个表格均有若干行,由 标签定义

每个表头由 标签定义。

每行被分割为若干单元格,由 标签定义。

实例

一个简单的 HTML 表格:

      Firstname     Lastname     Age         Jill     Smith     50         Eve     Jackson     94   亲自试一试 »

注释: 元素是表的数据容器。 它可以包含各种 HTML 元素;文本、图像、列表、其他表等。

HTML 表格 - 边框

要向表中添加边框,请使用 CSS border 属性:

实例 table, th, td {   border: 1px solid black; } 亲自试一试 »

记住为表格和表格单元格定义边框。

HTML 表格 - 边框折叠

设置表格边框是折叠为单一边框还是分开的,使用 CSS border-collapse 属性:

实例 table, th, td {  border: 1px solid black;   border-collapse: collapse;} 亲自试一试 » HTML 表格 - 填充

填充指定单元格内容与其边框之间的间距。

如果不指定填充,则将显示不带填充的表格单元格。

要设置填充,请使用 CSS padding 属性:

实例 th, td {  padding: 15px;} 亲自试一试 » HTML 表格 - 左对齐标题

默认情况下,表格标题为粗体且居中。

要左对齐表格标题,请使用 CSS text-align 属性:

实例 th {  text-align: left;} 亲自试一试 » HTML 表格 - 边框间距

边框间距指定单元格之间的间距。

要设置表格的边框间距,请使用 CSS border-spacing 属性:

实例 table {  border-spacing: 5px;} 亲自试一试 »

注释: 如果表格具有折叠边框,则 border-spacing 无效。

HTML 表格 - 跨多列的单元格

要使单元格跨越多个列,请使用 colspan 属性:

实例       Name     Telephone        Bill Gates    55577854    55577855  亲自试一试 » HTML 表格 - 跨多行的单元格

要使单元格跨多行,请使用 rowspan 属性:

实例       Name:    Bill Gates        Telephone:    55577854        55577855  亲自试一试 » HTML 表格 - 标题

要向表中添加标题,请使用 标签:

实例   Monthly savings      Month    Savings        January    $100        February    $50  亲自试一试 »

注释: 标签必须紧跟在 之后插入。

表格的特殊样式

要为一个特定表定义特殊样式,请向表中添加 id 属性:

实例       Firstname     Lastname     Age         Eve     Jackson     94   现在,您可以为此表定义特殊样式: #t01 {  width: 100%;   background-color: #f1f1c1;} 亲自试一试 » 并添加更多样式: #t01 tr:nth-child(even) {   background-color: #eee;} #t01 tr:nth-child(odd) {   background-color: #fff;} #t01 th {  color: white;  background-color: black;} 亲自试一试 » 本章小结 使用 HTML 元素定义表 使用 HTML 元素定义表行 使用 HTML 元素定义表数据 使用 HTML 元素定义表格标题 使用 HTML 元素定义表格标题 使用 CSS border 属性定义边框 使用 CSS border-collapse 属性折叠单元格边框 使用 CSS padding 属性向单元格添加填充 使用 CSS text-align 属性对齐单元格文本 使用 CSS border-spacing 属性设置单元格之间的间距 使用 colspan 属性使单元格跨多个列 使用 rowspan 属性使单元格跨多行 使用 id 属性唯一地定义一个表 HTML 实验 HTML Table 标签 标签 描述 定义表格 定义表格的表头 定义表格的行 定义表格单元 定义表格标题 定义表格列的组 定义用于表格列的属性 定义表格的页眉 定义表格的主体 定义表格的页脚

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册。

❮ 上一节 下一节 ❯ LEARN MORE

Styling Tables Filter Table Sort Table Responsive Table Zebra Striped Table



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3