zoukankan      html  css  js  c++  java
  • HTML(8)表格

      表格由<table></table>标签定义,在内部通过<tr>创建行(table row),<tr>内部通过<td>(table data,表格数据) 创建单元格。可以将table的border属性设为0来隐藏表格线。  

      1.<td>单元格属性:
      填充(cellpadding):内容和表格边线之间的距离 。
      间距(cellspacing):单元格之间的间距。
      rowspan(合并行)、colspan(和并列)进行单元格的合并<td rowspan ="2"  colspan = "2">。
      2.<tr>的属性:
      align,水平对齐,可选值left、right、center;valign,垂直对齐,可选值top、middle、bottom。
      <td>也有align和valign,子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。
    <tr align="right"><td>tom</td><td align="left">20</td><td></td></tr>

      表头的td可以用th代替,这样就会表头粗体、居中显示。

       一般在写表格的时候都先把border=“1”写上,当表格都调试的没有问题的时候然后在去掉border=“1”  。

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3 <head>
     4     <title>表格</title>
     5     <meta http-equiv="content-type" content="text/html; charset=gb2312;" />
     6 </head>
     7 <body>
     8     <!--1.基本表格-->
     9     <table border="1">
    10         <tr>
    11             <td>
    12                 土豆
    13             </td>
    14             <td>
    15                 白菜
    16             </td>
    17         </tr>
    18         <tr>
    19             <td>
    20                 西红柿
    21             </td>
    22             <td>
    23                 鸡蛋
    24             </td>
    25         </tr>
    26     </table>
    27     <!--较为完整的表格:(带有caption/thead/th/tbody/tfoot标签的表格)-->
    28     <table border="1" cellspacing="0" cellpadding="0" width="300">
    29         <caption>
    30             课程表</caption>
    31         <thead>
    32             <tr>
    33                 <th>
    34                     周一
    35                 </th>
    36                 <th>
    37                     周二
    38                 </th>
    39                 <th>
    40                     周三
    41                 </th>
    42             </tr>
    43         </thead>
    44         <tbody>
    45             <tr>
    46                 <td>
    47                     html
    48                 </td>
    49                 <td>
    50                     net
    51                 </td>
    52                 <td>
    53                     javascript
    54                 </td>
    55             </tr>
    56         </tbody>
    57         <tbody style="display: none">
    58             <tr>
    59                 <td>
    60                     html加强
    61                 </td>
    62                 <td>
    63                     net高级技术
    64                 </td>
    65                 <td>
    66                     javascript Dom
    67                 </td>
    68             </tr>
    69         </tbody>
    70         <tfoot>
    71             <tr>
    72                 <th colspan="3">
    73                     晚自习
    74                 </th>
    75             </tr>
    76         </tfoot>
    77     </table>
    78 </body>
    79 </html>
  • 相关阅读:
    hdu1003 Max Sum【最大连续子序列之和】
    HDU 2639 骨头收集者 II【01背包 】+【第K优决策】
    poj2184 Cow Exhibition【01背包】+【负数处理】+(求两个变量的和最大)
    HDU 2955_Robberies 小偷抢银行【01背包】
    UVa 562
    HDU 1159 Common Subsequence 【最长公共子序列】模板题
    hdu 5748 Bellovin【最长上升子序列】
    POJ 3903 Stock Exchange 【最长上升子序列】模板题
    UVA 624 CD[【01背包】(输出路径)
    hdu 2546 饭卡【01背包】
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2623401.html
Copyright © 2011-2022 走看看