HTML--表格列表

作者: Jiaxing_zZ | 来源:发表于2019-03-26 16:22 被阅读0次

    表格标签

    • 过去表格标签使用非常多,多大渡搜狐网站都hi用表格标签制作的,是一个时代的代表
    • 作用:给一堆数据添加表格语义,是一种数据的展现形式,数据量非常大时,表格是最为清晰地展现形式
    • 格式:
    <table border="0">
      <tr>
        <td></td>
      </tr>
    </table>
    
    • table代表整个表格,一堆table标签就是一个表格
    • tr代表一行数据,一对tr标签等于表格中的一行
    • td代表一行中的一个单元格,一堆td标签就是一行中的单元格
    • 注意点
      • 边框属性决定边框宽度,默认是0,所以看不到边框,border="0"
      • 组合标签,table/tr/td一起出现,不会单个出现

    属性

    • 宽度和高度
      table/td标签使用

      • 默认宽高内容撑开得,也可以手动指定
      • td设置宽高,会修改当前单元格得宽高,但不影响整个表格
    • 水平对齐和垂直对齐
      table/tr/td标签使用

      • 设置align控制水平方向
      • 设置valign控制垂直方向
    • 外边距和内边距
      只能table使用

      • 单元格之间默认有外边距
      • 设置cellspacing="2"控制外边距大小,默认2px
        +单元格和内容之间默认有内边距
      • 设置cellpadding="1"控制内边距大小
        ,默认1px

    细线表格

    • 设置table的bgcolor="black" cellspacing="1px"
      tr的bgcolor=”white“可实现细线表格

    表格标题

    • caption标签
    • 一定写在table里面,否则无效
    • 一定紧跟table标签后面
    • 标题自动居中

    标题单元格标签

    • th标签
    • 当前列的标题,会自动居中+加粗文字

    表格结构

    • caption:标题
    • thead:表头信息
    • tbody:主体信息
    • tfoot:页尾信息

    单元格合并

    • 水平方向合并
      • td标签设置colspan=”2“
    • 垂直方向合并
      • td标签设置rowspan=”2“
    • 合并就是把当前单元格当作两个看待,多余的单元格需要删除

    相关文章

      网友评论

        本文标题:HTML--表格列表

        本文链接:https://www.haomeiwen.com/subject/xlrivqtx.html