zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CF1080D Olya and magical square
    CF1062D Fun with Integers
    leetcode378 Kth Smallest Element in a Sorted Matrix
    hdoj薛猫猫杯程序设计网络赛1003 球球大作战
    hihocoder1068 RMQ-ST算法
    hihocoder1032 最长回文子串
    hihocoder1394 网络流四·最小路径覆盖
    hihocoder1398 网络流五·最大权闭合子图
    【bzoj4562】HAOI2016食物链
    【bzoj1026】windy数
  • 原文地址:https://www.cnblogs.com/Mr-wangxd/p/9663339.html
Copyright © 2011-2022 走看看