當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

028-静态表格

發(fā)布時間：2025/4/17 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 028-静态表格小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 使用基礎屬性

1.1. 靜態(tài)表格支持以下基礎屬性, 可定義不同風格/尺寸的表格樣式:

2. 例子

2.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>靜態(tài)表格 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script></head><body><table class="layui-table"><caption>默認表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-even</td><td>無</td><td>用于開啟隔行背景, 可與其它屬性一起使用</td></tr><tr><td>lay-skin="屬性值"</td><td>line(行邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr></tbody></table><table class="layui-table" lay-skin="line"><caption>行邊框風格表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-skin="屬性值"</td><td>row(列邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr><tr><td>lay-skin="屬性值"</td><td>nob(無邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr></tbody></table><table class="layui-table" lay-skin="row"><caption>列邊框風格表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-size="屬性值"</td><td>sm(小尺寸)</td><td>若使用默認尺寸不設置該屬性即可</td></tr><tr><td>lay-size="屬性值"</td><td>lg(大尺寸)</td><td>若使用默認尺寸不設置該屬性即可 </td></tr></tbody></table><table class="layui-table" lay-skin="nob"><caption>無邊框風格表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-even</td><td>無</td><td>用于開啟隔行背景, 可與其它屬性一起使用</td></tr><tr><td>lay-skin="屬性值"</td><td>line(行邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr></tbody></table><table class="layui-table" lay-size="sm"><caption>小尺寸表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-skin="屬性值"</td><td>row(列邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr><tr><td>lay-skin="屬性值"</td><td>nob(無邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr></tbody></table><table class="layui-table" lay-size="lg"><caption>大尺寸表格</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-size="屬性值"</td><td>sm(小尺寸)</td><td>若使用默認尺寸不設置該屬性即可</td></tr><tr><td>lay-size="屬性值"</td><td>lg(大尺寸)</td><td>若使用默認尺寸不設置該屬性即可 </td></tr></tbody></table><table class="layui-table" lay-even><caption>表格隔行背景</caption><colgroup><col width="200"><col width="300"><col></colgroup><thead><tr><th>屬性名</th><th>屬性值</th><th>備注</th></tr> </thead><tbody><tr><td>lay-even</td><td>無</td><td>用于開啟隔行背景, 可與其它屬性一起使用</td></tr><tr><td>lay-skin="屬性值"</td><td>line(行邊框風格)</td><td>若使用默認風格不設置該屬性即可</td></tr></tbody></table></body> </html>

2.2. 效果圖

總結

以上是生活随笔為你收集整理的028-静态表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。