zoukankan      html  css  js  c++  java
  • 表格

    表格:
    表格的组成:由行 和 列组成,行和列交汇的叫做单元格
    行--tr
    单元格标签---td
    结构:
    table > tr > td

    <table>
    <tr>
      <th></th>
    </tr>
    <tr>
      <td><td>
    </tr>
    </table>
    

      

    caption表格的标题它是居中的
    表格相关(行内)属性:
    width---表格的宽度
    height---表格的高度
    border---表格的边框
    bordercolor--表格的边宽颜色
    cellspacing="数字"--设置单元格之间的距离
    cellpadding="数字"---设置内容到单元格边框的距离
    align="left|center|right"---如果align属性给table添加,那么是将表格设置在网页中的对齐方式
    想要文字在单元格中居中显示,只能将align属性给tr或者 td设置
    valign垂直的 top|middle|bottom
    注意点:当单元格没有内容的时候,单元格默认情况下会被挤压,想要所有单元格宽高一样,
    只能单独给单元格设置宽高

    合并的属性都给td添加
    行合并--rowspan="n",删除本行下面n-1行对应的td
    列合并---colspan="n" 删除本行里面的n-1个td

    CSS属性设置:
    边框合并:boder-collapse属性值:separate;(分开,默认)|collapse;(合并)

    table,td,th{
    border:1px solid #aaa; 
    font-size: 23px; 
    border-collapse:collapse;
    }

    边框间距border-spacing(前提是:border-collapse:separate;)

    table,td,th{
    border:1px solid #aaa; 
    font-size: 23px; 
    border-collapse:separate; 
    border-spacing: 45px;
    }

    设置表格标题的位置caption-side属性值:top;//默认|bottom;|left;|right;

    table,td,th{
    border:1px solid #aaa; 
    font-size: 23px; 
    border-collapse:separate; 
    border-spacing: 45px; 
    caption-side:bottom;
    }

    当单元格对象宽度超过单元格所定义的宽度时,可用table-layout:fixed保持表格宽度不被改变,属性值:auto(默认)fixed(宽度固定)

    table,td,th{
    border:1px solid #aaa;
    font-size: 23px; 
    border-collapse:separate; 
    border-spacing: 5px; 
    table-layout: fixed; 
    caption-side:top;
    }
  • 相关阅读:
    20201215第七周学习总结
    20201215王馨瑶第六周学习总结
    2020-2021-1 20201226 《信息安全专业导论》第七周学习总结
    2020-2021-1 20201226 《信息安全专业导论》第六周学习总结
    fibnacci数列递归实现
    求最大公约数伪代码
    2020-2021-1 20201226 《信息安全专业导论》第五周学习总结
    XOR 加密
    Pep9
    2020-2021-1 20201226 《信息安全专业导论》第四周学习总结
  • 原文地址:https://www.cnblogs.com/muyun123/p/11615080.html
Copyright © 2011-2022 走看看