HTML列表和表格

列表

• 有序列表

  • ol 直接子元素只能是li

• 无序列表

  • ul 直接子元素只能是li

• 自定义列表（常用于图文混排，上拉加载更多）

  • dl dt(项目名/图) dd(描述/文) ，其中dt dd是兄弟元素,一个dt后面一般跟一个或者多个dd

    有序ul和自定义列表dl常结合使用。ul>li>(dl dt dd)

     <ul>
         <li>
             <dl>
                 <dt>配送说明</dt>
                 <dd>配送收费</dd>
                 <dd>配送范围</dd>
             </dl>
         </li>
    </ul>
    

列表相关属性

list-style是可以继承的，所以给ol,ul设置默认会应用到li元素

• list-style:none

  li前面的小图标，可以用i元素，i是行内元素，可以用padding把内容撑开，或者设置成display:inline-block

  列表

  • 有序列表

    • ol 直接子元素只能是li

  • 无序列表

    • ul 直接子元素只能是li

  • 自定义列表（常用于图文混排，上拉加载更多）

    • dl dt(项目名/图) dd(描述/文) ，其中dt dd是兄弟元素,一个dt后面一般跟一个或者多个dd

      有序ul和自定义列表dl常结合使用。ul>li>(dl dt dd)

       <ul>
           <li>
               <dl>
                   <dt>配送说明</dt>
                   <dd>配送收费</dd>
                   <dd>配送范围</dd>
               </dl>
           </li>
      </ul>
      

  列表相关属性

  list-style是可以继承的，所以给ol,ul设置默认会应用到li元素

  • list-style:none

    li前面的小图标，可以用i元素，i是行内元素，可以用padding把内容撑开，或者设置成display:inline-block

  表格

  表格常用元素

  • table

  • tr(行)

  • td(列)

  表格的其他元素，数据行分组

  ​ thead–tr–th(默认加粗居中)

  ​ tbody–tr–td

  ​ tfoot(很少用)

  ​ caption表格的表头{font-weight:700;font-size:25px;margin-bottom:20px;}

  table常用属性

  • 合并单元格border-collapse:collapse;

  • 单元格间水平，垂直间距border-spacing:value;

  • 实现表格居中 margin:xxpx auto;

  • empty-cells:show/hidden;当单元格为空时是否显示边框

  • table-layout:fixed/auto；（不常用）

    fixed宽度平分，宽度不受内容影响，td单独设置还是有效的

  th,td常用属性

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgzeEnfj-1583245775577)(表格.assets/image-20200303105950939.png)]

  th,td {border:1px solid #ccc;

  ​ paddiing:xxpx;

  ​ text-align:center;文本居中显示

  ​ }

  单元格的合并

  • 合并方向是向右(colspan)、向下(rowspan)
    删掉被覆盖掉的td元素

    • 合并的原则：只要跨行的都合并行，不跨行的都合并列，无论合并行还是合并列操作的都是td,和谁合并，把谁删掉。

    • 即合并行又合并列时，先合并列再合并行

      [colspan],[rowspan]{font-weight:700;}//属性选择器将合并的单元格文本加粗
      

  细线表格实现

  <style>
  table{width:240px;height:120px;border-collapse: collapse;margin:20px auto}
  th,td{border:1px solid #ccc;text-align: center;padding:10px;}
  </style>
  <table>
      <tr>
          <td>化学</td>
          <td>化学</td>
          <td>化学</td>
      </tr>
      <tr>
          <td>化学</td>
          <td>化学</td>
          <td>化学</td>
      </tr>
      <tr>
          <td>化学</td>
          <td>化学</td>
          <td>化学</td>
      </tr>
  </table>
  

  学会用emment语法快速开发

  table>(tr>td{文本}*5)*3
  

     <td>化学</td>
      <td>化学</td>
      <td>化学</td>
  </tr>
  

  ```

  学会用emment语法快速开发

  table>(tr>td{文本}*5)*3