表格 - 頁面元素

                    本篇為你介紹表格的HTML使用,你將通過內置的自定義屬性對其進行風格的多樣化設定。請注意:這僅僅局限于呈現基礎表格,如果你急切需要的是數據表格(datatable),那么你應該詳細閱讀:table模塊
                    常規用法
                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    <table class="layui-table">
                      <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                      </colgroup>
                      <thead>
                        <tr>
                          <th>昵稱</th>
                          <th>加入時間</th>
                          <th>簽名</th>
                        </tr> 
                      </thead>
                      <tbody>
                        <tr>
                          <td>賢心</td>
                          <td>2016-11-29</td>
                          <td>人生就像是一場修行</td>
                        </tr>
                        <tr>
                          <td>許閑心</td>
                          <td>2016-11-28</td>
                          <td>于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…</td>
                        </tr>
                      </tbody>
                    </table>
                          
                    基礎屬性

                    靜態表格支持以下基礎屬性,可定義不同風格/尺寸的表格樣式:

                    屬性名 屬性值 備注
                    lay-even 用于開啟 隔行 背景,可與其它屬性一起使用
                    lay-skin="屬性值" line (行邊框風格)
                    row (列邊框風格)
                    nob (無邊框風格)
                    若使用默認風格不設置該屬性即可
                    lay-size="屬性值" sm (小尺寸)
                    lg (大尺寸)
                    若使用默認尺寸不設置該屬性即可

                    將你所需要的基礎屬性寫在table標簽上即可,如(一個帶有隔行背景,且行邊框風格的大尺寸表格):

                    <table lay-even lay-skin="line" lay-size="lg">
                    …
                    </table>
                        
                    表格其它風格

                    除了默認的表格風格外,我們還提供了其它幾種風格,你可以按照實際需求自由設定

                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    <table class="layui-table" lay-skin="line">
                      行邊框表格(內部結構參見右側目錄“常規用法”)
                    </table>
                     
                    <table class="layui-table" lay-skin="row">
                      列邊框表格(內部結構參見右側目錄“常規用法”)
                    </table>
                     
                    <table class="layui-table" lay-even lay-skin="nob">
                      無邊框表格(內部結構參見右側目錄“常規用法”)
                    </table>
                          
                    表格其它尺寸

                    除了默認的表格尺寸外,我們還提供了其它幾種尺寸,你可以按照實際需求自由設定

                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    昵稱 加入時間 簽名
                    賢心 2016-11-29 人生就像是一場修行
                    許閑心 2016-11-28 于千萬人之中遇見你所遇見的人,于千萬年之中,時間的無涯的荒野里…
                    sentsin 2016-11-27 Life is either a daring adventure or nothing.
                    <table class="layui-table" lay-size="sm">
                      小尺寸表格(內部結構參見右側目錄“常規用法”)
                    </table>
                     
                    <table class="layui-table" lay-size="lg">
                      大尺寸表格(內部結構參見右側目錄“常規用法”)
                    </table>
                          
                    結語

                    再次溫馨提醒:如果你需要對表格進行排序、數據交互等一系列功能性操作,你需要進一步閱讀 layui 的重要組成:table模塊

                    layui - 用心與你溝通

                    亚洲图色