WEB前端开发学习----2.HTML表格table标签

标签：

[html] view plaincopy

 

1. css没用流行之前，网页都是用表格，也就是table标签制作的。虽然现在不用table做网页了，但是我们还是应该掌握这个标签。</span>  

先给出最表格的基本格式：

[html] view plaincopy

 

1. <table>  
2.      <tr>  
3.          <tb>  
4.          </tb>  
5.      </tr>  
6. <table>  

  其中<tr>为行标签，即表格的行。<td>为单元格数据标签。也就是说一个表格为3行3列，则有3个<tr>标签，3个<td>标签。

[html] view plaincopy

 

1. <pre name="code" class="html">        <pre name="code" class="html"><span style="white-space:pre">    </span><table border="1">  

<caption>这是个3行3列的表格</caption>

<tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table>

caption属性为表格的标题。为了好看，我在这里border属性是给表格加上了边框。也可以不加，默认是没有的。

跨行列表格 

rowspan 跨行属性 假如跨两行则为<td rowspan="2">

colspan 跨列属性

cellpadding 单元格的填充

cellspacing 单元格之间的空间

注意第三个表格，边框只有1px.

思路：将表格背景设为黑色，然后将单元格背景设为白色，单元格无边框，这样覆盖在表格上，且单元格之间距离为零，就可得到此效果。

代码如下：

[html] view plaincopy

 

1. <table align="center" border="1" width="500px">  
2.         <caption>这是正常成绩表</caption>  
3.         <tr>  
4.             <th colspan="2">姓名</th>  
5.             <td align="right">小明</td>  
6.             <td align="right">小花</td>  
7.         </tr>  
8.         <tr>  
9.             <th rowspan="3">学</br>科</th>  
10.             <td>语文</td>  
11.             <td align="right">100</td>  
12.             <td align="right">98</td>  
13.         </tr>  
14.         <tr>  
15.             <td>数学</td>  
16.             <td align="right">96</td>  
17.             <td align="right">97</td>  
18.         </tr>  
19.         <tr>  
20.             <td>外语</td>  
21.             <td align="right">90</td>  
22.             <td align="right">100</td>  
23.         </tr>  
24.     </table>  
25.     <br/>  
26.     <table align="center" border="1" width="500px" cellspacing="0">  
27.         <caption>这是粗边框成绩表（1px框）</caption>  
28.         <tr>  
29.             <th colspan="2">姓名</th>  
30.             <td align="right">小明</td>  
31.             <td align="right">小花</td>  
32.         </tr>  
33.         <tr>  
34.             <th rowspan="3">学</br>科</th>  
35.             <td>语文</td>  
36.             <td align="right">100</td>  
37.             <td align="right">98</td>  
38.         </tr>  
39.         <tr>  
40.             <td>数学</td>  
41.             <td align="right">96</td>  
42.             <td align="right">97</td>  
43.         </tr>  
44.         <tr>  
45.             <td>外语</td>  
46.             <td align="right">90</td>  
47.             <td align="right">100</td>  
48.         </tr>  
49.     </table>  
50.     <br/>  
51.     <table align="center" bgcolor="black" width="500px" cellspacing="1">  
52.         <caption>这是细边框成绩表（1px框）</caption>  
53.         <tr>  
54.             <th bgcolor="white" colspan="2">姓名</th>  
55.             <td bgcolor="white" align="right">小明</td>  
56.             <td bgcolor="white" align="right">小花</td>  
57.         </tr>  
58.         <tr>  
59.             <th bgcolor="white" rowspan="3">学</br>科</th>  
60.             <td bgcolor="white">语文</td>  
61.             <td bgcolor="white" align="right">100</td>  
62.             <td bgcolor="white" align="right">98</td>  
63.         </tr>  
64.         <tr>  
65.             <td bgcolor="white">数学</td>  
66.             <td bgcolor="white" align="right">96</td>  
67.             <td bgcolor="white" align="right">97</td>  
68.         </tr>  
69.         <tr>  
70.             <td bgcolor="white">外语</td>  
71.             <td bgcolor="white" align="right">90</td>  
72.             <td bgcolor="white" align="right">100</td>  
73.         </tr>  
74.     </table>  

WEB前端开发学习----2.HTML表格table标签

标签：

原文地址：http://www.cnblogs.com/cdh-fw/p/4177180.html