zoukankan      html  css  js  c++  java
  • HTML中表格

    HTML表格
    【表格table】

    表格用table表示,表格中的每一行tr表示,一行中的每一列用td表示

    th表示的是:表头。表头中的文字,默认为加粗居中。th要放在tr中,用于替换掉td。

    【table的常用属性】
    1、border:给表格加边框。 默认给所有td加边框,并且给整个table加外边框。 当增大border的值时,td上的边框不变化,只有最外层大边框变宽。
     
    2、cellspacing:单元格与单元格之间的距离。
    cellspacing="0" 表示单元格与单元格之间没有距离,但是边框线的宽度依然是两条线的宽度。
     
    [注意] 表格边框合并的CSS写法:
    style="border-collapse: collapse;"
    这条CSS与cellspacing="0"有什么区别?
    cellspacing="0"仅仅是将单元格之间的距离调整为0,实际上单元格之间依然还是两条线;
    border-collapse: collapse; 是将表格相邻的两条边框进行合并处理,只有一条线存在。(一旦边框合并,cellspace属性将会失效。)
    3、cellpadding:单元格中的文字与单元格边框的距离
    4、 height:表格的高度
           width:表格的宽度
    使用表格宽、高属性设置大小:
    <table height="400" width="500"></table>
     
    使用CSS样式设置大小:
    <table style="height:400px; 500px;"></table>
    5、align:设置表格在浏览器中的位置。不建议使用了。
    可选值:left 表格居左 /center 表格居中/right 表格居右
     
    6、bgcolor:背景色
    bordercolor:边框颜色
    background:背景图
    background="img/computer.jpg"
    背景色和背景图同时存在时,背景图会覆盖背景色
     
     
    【tr与td常用属性】
    1、width:单元格宽度
         height:单元格的高度
     
    2、bgcolor: 单元格的颜色
     
    3、align:设置单元格中的文字,水平对齐方式。
    left、center、right
    valign:设置单元格中的文字,垂直对齐方式。
    top、middle、bottom
     
    4、 nowrap="nowrap" 当单元格文字过多时,设置单元格文字不断行显示。 但是,会把表格的宽度撑大!!!
     
    【表格的跨行与跨列】
    1、跨列:在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列,则,单元格右边的n-1个单元格需要去掉。
     
    2、跨行:在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行,则,单元格下边的n-1个单元格需要去掉。
    <body> 

    <table border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" width="500" height="400" bgcolor="#FFA100">
    <tr>
    <th width="300" rowspan="3">1-1</th>
    <th colspan="3">1-2</th>

    </tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    </tr>

    <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
    </tr>
    </table>

    </body>

  • 相关阅读:
    NFS-heartbeat-drbd模拟NFS高可用
    drbd
    hearbeat
    ldap
    SVN
    Nginx负载均衡
    shell-day1
    angularJS(二):作用域$scope、控制器、过滤器
    angularJS(一):表达式、指令
    nodejs、npm、 typescript、angular-cli安装
  • 原文地址:https://www.cnblogs.com/lnzixin/p/7355207.html
Copyright © 2011-2022 走看看