表格 - 页面元素

本篇为你介绍表格的HTML使用,你将通过内置的自定义属性对其进行风格的多样化设定。请注意:这仅仅局限于呈现基础表格,如果你急切需要的是数据表格(datatable),那么你应该详细阅读:table模块

常规用法

表格 静态 table - 图1

  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标签上即可,如(一个带有隔行背景,且行边框风格的大尺寸表格):

  1. <table lay-even lay-skin="line" lay-size="lg">
  2. </table>

表格其它风格

除了默认的表格风格外,我们还提供了其它几种风格,你可以按照实际需求自由设定

表格 静态 table - 图2

  1. <table class="layui-table" lay-skin="line">
  2. 行边框表格(内部结构参见右侧目录“常规用法”)
  3. </table>
  4.  
  5. <table class="layui-table" lay-skin="row">
  6. 列边框表格(内部结构参见右侧目录“常规用法”)
  7. </table>
  8.  
  9. <table class="layui-table" lay-even lay-skin="nob">
  10. 无边框表格(内部结构参见右侧目录“常规用法”)
  11. </table>

表格其它尺寸

除了默认的表格尺寸外,我们还提供了其它几种尺寸,你可以按照实际需求自由设定

表格 静态 table - 图3

  1. <table class="layui-table" lay-size="sm">
  2. 小尺寸表格(内部结构参见右侧目录“常规用法”)
  3. </table>
  4.  
  5. <table class="layui-table" lay-size="lg">
  6. 大尺寸表格(内部结构参见右侧目录“常规用法”)
  7. </table>

结语

再次温馨提醒:如果你需要对表格进行排序、数据交互等一系列功能性操作,你需要进一步阅读 layui 的重要组成:table模块

layui - 用心与你沟通