<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 表格 - 頁面元素

      本篇為你介紹表格的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 - 用心與你溝通

      亚洲图色