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>

 

posted @ 2012-08-04 21:46  YunshiSun  阅读(579)  评论(0)  编辑  收藏  举报