• html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用


     1 <!--
     2     table  border='1' style="border-collapse:collapse;"
     3             border  表格的像素宽度
     4             border-collapse:collapse 为表格设置合并边框模型
     5             tr  表格行 一个tr包含多个th 或td
     6                 th  表示居中加粗
     7                 td  表格描述(默认正常显示)
     8                 
     9             caption 标题独占一行 在表格外面
    10             thead  tbody  tfoot   无论顺序是怎么写的 他会自动按这个顺序展示
    11 -->
    12 
    13 <!DOCTYPE html>
    14 <html lang="en">
    15 <head>
    16     <meta charset="UTF-8">
    17     <title>表格标签与表单标签</title>
    18 </head>
    19 <body>
    20 
    21     <table border="2" style="border-collapse:collapse" width="150" height="50">
    22         <tr>
    23             <td>id</td>
    24             <td>name</td>
    25             <td>age</td>
    26             <td rowspan="2">占两行</td>
    27             <td>空列</td>
    28         </tr>
    29         <tr>
    30             <td>1</td>
    31             <td>wang</td>
    32             <td>18</td>
    33             <td colspan="2">占两列</td>
    34         </tr>
    35     </table>
    36 
    37     <!--
    38         caption 标题独占一行 在表格外面
    39         thead  tbody  tfoot   无论顺序是怎么写的 他会自动按这个顺序展示
    40     -->
    41     <table border="2">
    42         <caption>人物介绍</caption>
    43 
    44          <tfoot>
    45             <tr>
    46                 <th>三妹</th>
    47                 <td>15</td>
    48                 <td></td>
    49                 <td rowspan="3" >占三行</td>
    50             </tr>
    51         </tfoot>
    52 
    53         <thead>
    54             <tr>
    55                 <th>大哥</th>
    56                 <td>18</td>
    57                 <td></td>
    58             </tr>
    59         </thead>
    60 
    61         <tbody>
    62             <tr>
    63                 <th>老二</th>
    64                 <td>17</td>
    65                 <td></td>
    66             </tr>
    67         </tbody>
    68     </table>
    69 
    70 </body>
    71 </html>
  • 相关阅读:
    第五次作业
    第四次作业
    Java实验二
    java第一次作业
    第十一次作业
    第十次作业
    第九次作业
    第八次作业
    第七次作业
    第六次作业
  • 原文地址:https://www.cnblogs.com/Mr-wangxd/p/9663339.html
Copyright © 2020-2023  润新知