zoukankan      html  css  js  c++  java
  • table表格标签的属性

    table标签目前前端主流推荐HTML、CSS、JS三者分离,实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制。

    习惯样式:

    1       table {
    2             display: table;
    3             border-collapse: separate;
    4             border-spacing: 2px;
    5             border-color: gray;
    6         }

    table的style重要属性:

    border-spacing:规定表格单元格与单元格、外边框的间距;

    table-layout:规定表格的布局算法;

    border-collapse:设置表格的边框是否被合并为一个单一的边框;

    empty-cells:在 collapsed-borders模型中,该属性无效; 在 separated-borders模型中,当该属性值为hide时,空的表格单元将没有边框和背景。

    table表格编程练习

    小伙伴,编写代码设置表格相应属性,按照效果图,实现相应效果。

    效果图:

    任务

    1、设置第一列的北京颜色为orange,表格边框宽度为1,单元格(不包括插入的小表格内单元格)内间距为5px;

    2、将表格第一列的第二行和第三行合并;

    3、将表格第一列的第五行和第六行合并;

    4、在最后合并的单元格的内嵌套一个两行两列的表格;

    5、嵌套表格边框为1px;

    6、将整个第四行合并;

    参考代码:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4 <head>
     5     <title>表格属性</title>
     6     <meta charset="utf-8">
     7     <style>
     8         table {
     9             border: 1px solid gray;
    10         }
    11 
    12         table.main {
    13 
    14             width: 500px;
    15             border-spacing: 0;
    16             margin: 0 auto;
    17             text-align: center;
    18         }
    19 
    20         .main>tbody>tr>th,
    21         .main>tbody>tr>td {
    22             padding: 5px;
    23         }
    24 
    25         td,
    26         th {
    27             border: 1px solid gray;
    28         }
    29 
    30         .one {
    31             background: orange;
    32 
    33         }
    34 
    35         table table {
    36             border-spacing: 0;
    37             margin: 0 auto;
    38         }
    39     </style>
    40 </head>
    41 
    42 <body>
    43 
    44     <table class='main'>
    45         <caption>课程表</caption>
    46         <tr class='one'>
    47             <th>星期一</th>
    48             <th>星期二</th>
    49             <th>星期三</th>
    50             <th>星期四</th>
    51             <th>星期五</th>
    52         </tr>
    53         <tr>
    54             <td rowspan="2">语文</td>
    55             <td>数学</td>
    56             <td>化学</td>
    57             <td>英语</td>
    58             <td>生物</td>
    59         </tr>
    60         <tr>
    61             <td>数学</td>
    62             <td>化学</td>
    63             <td>英语</td>
    64             <td>生物</td>
    65         </tr>
    66         <tr>
    67             <td colspan="5">课间活动</td>
    68         </tr>
    69         <tr>
    70             <td rowspan="2">
    71                 <table>
    72                     <tr>
    73                         <td>前半节</td>
    74                         <td>后半节</td>
    75                     </tr>
    76                     <tr>
    77                         <td>诗词</td>
    78                         <td>古文</td>
    79                     </tr>
    80                 </table>
    81             </td>
    82             <td>数学</td>
    83             <td>化学</td>
    84             <td>英语</td>
    85             <td>生物</td>
    86         </tr>
    87         <tr>
    88             <td>数学</td>
    89             <td>化学</td>
    90             <td>英语</td>
    91             <td>生物</td>
    92         </tr>
    93     </table>
    94 </body>
    95 
    96 </html>

    当然,一些“前辈”代码可能还采用table标签的一些属性来进行样式控制,对于需要维护特定“祖传代码”的工程师来说,还是有必要了解一些此类“考古”前端知识。

    譬如上述table效果也可以采用table的“远古”属性来实现同样的效果:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4 <head>
     5     <title>表格属性</title>
     6     
     7   <meta charset="utf-8">
     8     <style>
     9   </style>
    10 </head>
    11 
    12 <body>
    13     <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
    14         <caption>课程表</caption>
    15         <tr bgcolor="orange" align="center">
    16             <th>星期一</th>
    17             <th>星期二</th>
    18             <th>星期三</th>
    19             <th>星期四</th>
    20             <th>星期五</th>
    21           </tr>
    22         <tr align="center">
    23             <td rowspan="2">语文</td>
    24             <td>数学</td>
    25             <td>化学</td>
    26             <td>英语</td>
    27             <td>生物</td>
    28           </tr>
    29         <tr align="center">
    30             <td>数学</td>
    31             <td>化学</td>
    32             <td>英语</td>
    33             <td>生物</td>
    34           </tr>
    35         <tr align="center">
    36             <td colspan="5">课间活动</td>
    37           </tr>
    38         <tr align="center">
    39             <td rowspan="2">
    40                 <table border="1" cellspacing="0" >
    41                     <tr>
    42                         <td>前半节</td>
    43                         <td>后半节</td>
    44                       </tr>
    45                     <tr align='center'>
    46                         <td >诗词</td>
    47                         <td >古文</td>
    48                       </tr>
    49                   </table>
    50               </td>
    51             <td>数学</td>
    52             <td>化学</td>
    53             <td>英语</td>
    54             <td>生物</td>
    55           </tr>
    56         <tr align="center">
    57             <td>数学</td>
    58             <td>化学</td>
    59             <td>英语</td>
    60             <td>生物</td>
    61           </tr>
    62       </table>
    63 </body>
    64 
    65 </html>

    标签用于定义HTML中的表格,其主要属性以及功能如下:

    设置表格长度;

    align:表格相对于周围元素的对齐方式;

    bgcolor:设置表格的背景颜色;

    border:设置表格的外边框宽度;

    frame:设置表格外边框哪部分是可见的;

    cellspacing:设置表格单元与表格单元、外边框的间距;

    cellpadding:设置表格单元内容与表格单元边框的间距;

    rules:设置表格单元边框哪部分是可见的。

    cellpadding属性与style中的padding属性类似,但是它只能设置一个值,即上下左右的内间距都相同;cellspacing与border-spacing属性类似,同样cellspacing只能设置一个值,但是border-spacing可以设置1或2个值。

  • 相关阅读:
    基于HT for Web矢量实现3D叶轮旋转
    基于HT for Web矢量实现2D叶轮旋转
    HT for Web列表和3D拓扑组件的拖拽应用
    基于HT for Web矢量实现HTML5文件上传进度条
    Java 8 VM GC Tunning Guide Charter 5
    Java 8 VM GC Tunning Guide Charter 6
    Java 8 VM GC Tunning Guide Charter 7-8-b
    Java 8 VM GC Tunning Guild Charter 9-b
    java文档 第十一章 其他考量-b
    iOS点击cell查看大图,点击大图还原小图-b
  • 原文地址:https://www.cnblogs.com/f6056/p/13576776.html
Copyright © 2011-2022 走看看