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>