zoukankan      html  css  js  c++  java
  • 表格相关(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>
  • 相关阅读:
    更好的处理 Python 多工程 import 依赖
    Django 前后台的数据传递
    Django传递数据给JS
    nodejs 设置跨域访问
    Node.js + Express
    前端用户输入校验--基于JQ
    git统计当前分支提交次数
    gitlab相关
    CentOS7使用firewalld打开关闭防火墙与端口
    puppeteer安装/爬取数据
  • 原文地址:https://www.cnblogs.com/zhouwanqiu/p/8874850.html
Copyright © 2011-2022 走看看