← 返回首页

表格 - 页面元素 - Layui

📁 <Category 22> 📅 2026-04-04 13:39:58 👁️ 5 次阅读
<Tag 15> <Tag 28> <Tag 87>

📖 正文内容


表格 - 页面元素

本篇为你介绍表格的HTML使用，你将通过内置的自定义属性对其进行风格的多样化设定。请注意：这仅仅局限于呈现基础表格，如果你急切需要的是数据表格（datatable），那么你应该详细阅读：table模块
常规用法
昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

HTMLcode

  1. <table class="layui-table">
  2. <colgroup>
  3. <col width="150">
  4. <col width="200">
  5. <col>
  6. </colgroup>
  7. <thead>
  8. <tr>
  9. <th>昵称</th>
  10. <th>加入时间</th>
  11. <th>签名</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <td>贤心</td>
  17. <td>2016-11-29</td>
  18. <td>人生就像是一场修行</td>
  19. </tr>
  20. <tr>
  21. <td>许闲心</td>
  22. <td>2016-11-28</td>
  23. <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  24. </tr>
  25. </tbody>
  26. </table>
基础属性
静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：
属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值"
line （行边框风格）
row （列边框风格）
nob （无边框风格）
若使用默认风格不设置该属性即可
lay-size="属性值"
sm （小尺寸）
lg （大尺寸）
若使用默认尺寸不设置该属性即可
将你所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

HTMLcode

  1. <table lay-even lay-skin="line" lay-size="lg">
  2. …
  3. </table>
表格其它风格
除了默认的表格风格外，我们还提供了其它几种风格，你可以按照实际需求自由设定
昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

HTMLcode

  1. <table class="layui-table" lay-skin="line">
  2. 行边框表格（内部结构参见右侧目录“常规用法”）
  3. </table>
  4. <table class="layui-table" lay-skin="row">
  5. 列边框表格（内部结构参见右侧目录“常规用法”）
  6. </table>
  7. <table class="layui-table" lay-even lay-skin="nob">
  8. 无边框表格（内部结构参见右侧目录“常规用法”）
  9. </table>
表格其它尺寸
除了默认的表格尺寸外，我们还提供了其它几种尺寸，你可以按照实际需求自由设定
昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

昵称加入时间签名
贤心2016-11-29人生就像是一场修行
许闲心2016-11-28于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
sentsin2016-11-27Life is either a daring adventure or nothing.

HTMLcode

  1. <table class="layui-table" lay-size="sm">
  2. 小尺寸表格（内部结构参见右侧目录“常规用法”）
  3. </table>
  4. <table class="layui-table" lay-size="lg">
  5. 大尺寸表格（内部结构参见右侧目录“常规用法”）
  6. </table>
结语
再次温馨提醒：如果你需要对表格进行排序、数据交互等一系列功能性操作，你需要进一步阅读 layui 的重要组成：table模块
layui - 在每一个细节中，用心与你沟通

💡 示例代码

None

💭 技巧提示

💡
None

📚 参考资料

🔗 相关文章

CSS3动画类文档 - Layui

Layui框架

CSS3动画类 在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。 动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如： </>code其中 layui-anim 是必须的，后面跟着的即是不同的动画类<div class="layui-...

2026-04-04
Layui CSS3动画类文档

element模块元素操作文档 - Layui

Python 基础

 常用元素操作 - layui.element页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。模块加载名称：element使用元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要...

2026-04-04
Layui

layer弹层组件开发文档 - Layui

Layui框架

 弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。模块加载名称：layer，独立版本...

2026-04-04
Layui

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用，感谢分享！