• 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>
  • 相关阅读:
    《数据库原理》课程笔记 (Ch04-数据库管理系统)
    《数据库原理》课程笔记 (Ch03-数据库语言)
    《操作系统》课程笔记(Ch07-死锁)
    《数据库原理》课程笔记 (Ch02-数据模型)
    《数据库原理》课程笔记 (Ch01-引论)
    《计算机网络》课程笔记 (Ch02-应用层)
    《ES6标准入门》读书笔记 第5章
    《ES6标准入门》读书笔记 第4章
    《ES6标准入门》读书笔记 第3章
    《计算机网络》课程笔记 (Ch01-计算机网络和因特网)
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2623401.html
Copyright © 2020-2023  润新知