资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【丛林】HTML Table 表格浅谈（边框、隔行变色

【丛林】HTML Table 表格浅谈（边框、隔行变色

sshe / 2032人阅读

摘要：表格的一个单元格，一行中包含几对，一行中就有几列。。表格的头部的一个单元格，表格表头。表格标题属性表格边框的宽度。表格单元边界与单元内容之间的间距内边距。单元格之间的间距。可填写或任意数字，分别代表奇数行列偶数行列或指定行列

此例子已经包含本文大部分内容，请对照参考。查看代码 》

定义和用法

table标签定义 HTML 表格。

创建表格的四要素：table、tr、th、td

整个表格以

标记开始、
标记结束。

Table row。表格的一行，有几对 tr 表格就有几行。

Table data。表格的一个单元格，一行中包含几对 td ，一行中就有几列。

Table head。表格的头部的一个单元格，表格表头。

额外元素 、、

表格结构，如果不加 , 表格将在加载完后才显示。加上这些， tbody包含行的内容优先显示，不必等待表格结束后再显示。
同时，如果表格很长，用tbody分段，可以一部分一部分地显示。
（通俗理解 table 可以按结构一块块的显示，不用等整个表格加载完后显示。）

表格标题

属性 border

表格边框的宽度。
建议设置为 0 后自行 CSS 添加边框样式。

cellpadding

表格单元边界与单元内容之间的间距（内边距）。
建议设置为 0 后自行 CSS 添加内边距样式。

cellspacing

单元格之间的间距。

实例 使用CSS3实现表格隔行变色


例子代码更加直观易懂 查看代码 》
使用 CSS3的 :nth-child(n) 伪类选择器可以实现表格隔行变色的效果。
n 可填写 odd、even或任意数字，分别代表奇数行/列、偶数行/列或指定行/列

云服务器 GPU云服务器 js隔行变色方法 html5变色表格 js如何实现隔行变色 用js做隔行变色

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

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

相关文章

  • 【丛林】HTML Table 表格浅谈（边框、隔行变色

    摘要：表格的一个单元格，一行中包含几对，一行中就有几列。。表格的头部的一个单元格，表格表头。表格标题属性表格边框的宽度。表格单元边界与单元内容之间的间距内边距。单元格之间的间距。可填写或任意数字，分别代表奇数行列偶数行列或指定行列 showImg(https://segmentfault.com/img/bVbeipJ?w=649&h=665); 此例子已经包含本文大部分内容，请对照参考。查...

    szysky 评论0 收藏0

  • 【丛林】CSS 边框浅谈

    摘要：如果边框样式是，边框宽度实际上会重置为。不允许指定负长度值。值描述定义无边框。不过应用于表时除外，对于表，用于解决边框冲突。如果没有为边框声明颜色，它将与元素的文本颜色相同。这个值用于创建有宽度的不可见边框。扩展属性边框图像 定义和用法 围绕元素内容和内边距的一条或多条线。 基本属性：宽度、样式、颜色 宽度 border-width border-width 简写属性为元素的所有边...

    seanlook 评论0 收藏0

  • layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

    摘要：表格展示神器之一表格前言在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有等博主个人比较倾向于，极简，却又不失饱满的内在，体积轻盈，组件丰盈。 表格展示神器之一：layui表格 前言：在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstrap table、layui ...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

sshe

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<