表格相关(table)

<table border="1">
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

定义表格  <table></table> 

  border:定义表格单元格周围是否显示边框,"1"显示,""不显示

  cellpadding:px/%,单元边沿与其内容之间的空白,默认为1px,推荐使用CSS修饰 {padding:;}

  cellspacing:px/%,单元格之间的空白,默认为2px,推荐使用CSS修饰 {border-collapse: collapse;}

表格分组

  <table>

    <thead>...</thead>

    <tfoot>...</tfoot>

    <tbody>...</tbody>

  </table>

表格标题  <caption>……</caption>

行  <tr></tr>

表头单元格  <th></th>  (粗体、居中)

  colspan:表头单元格可横跨的列数

  rowspan:表头单元格可横跨的行数

  headers:规定与该表头单元格相关联的一个或多个表头单元格的id值,多个id值以空格分隔

  scope:规定表头单元格是否是行、列、行组或列组的头部

    col  --单元格是列的表头

    row  --单元格是行的表头

    colgroup  --单元格是列组的表头

    rowgroup  --单元格是行组的表头

标准单元格  <td></td>  (左对齐)

  colspan:标准单元格可横跨的列数

  rowspan:标准单元格可横跨的行数

  headers:规定与该标准单元格相关联的一个或多个表头单元格的id值,多个id值以空格分隔

 

<!-- 推荐的表格修饰方法 -->
<style>
    table,table tr th, table tr td { border:1px solid #0094ff; }
    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
</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>

 

posted @ 2018-04-18 14:56  Autumn_n  阅读(158)  评论(0编辑  收藏  举报
TOP