资讯专栏INFORMATION COLUMN

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

sshe / 1904人阅读

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

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

定义和用法

table标签定义 HTML 表格。

创建表格的四要素:tabletrthtd

整个表格以

标记开始、
标记结束。

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或任意数字,分别代表奇数行/列、偶数行/列或指定行/列

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

转载请注明本文地址: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
  • 前端知识点总结—-响应式

    摘要:前端知识点总结响应式响应式网页自适应的网页年提出一个网页,会自动根据用户浏览设备不同,自动必变布局可以被正常浏览响应式网页必备流式布局可以改变尺寸图片文字响应式布局不足代码更加复杂,不适合大型网页如何测试网页使用真实物理设备使用第三方模 前端知识点总结—-响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页,会自动根据用户浏览设备不同...

    NicolasHe 评论0 收藏0
  • 前端知识点总结—-响应式

    摘要:前端知识点总结响应式响应式网页自适应的网页年提出一个网页,会自动根据用户浏览设备不同,自动必变布局可以被正常浏览响应式网页必备流式布局可以改变尺寸图片文字响应式布局不足代码更加复杂,不适合大型网页如何测试网页使用真实物理设备使用第三方模 前端知识点总结—-响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页,会自动根据用户浏览设备不同...

    leo108 评论0 收藏0

发表评论

0条评论

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