HTML第二章 “表格”详解 （附带详细代码与解释）！！！

目录

1.表格的语法

2. 表格的可选标记

3. 表格的属性

4. 不规则的表格

5. 表格的大小

 每日一句

1.表格的语法

1. table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里
2. tr标签: 表示表格中的一行
3. td标签：要写在tr中，这一行中有几个单元格，就有几列 是真正放数据的地方

2. 表格的可选标记

1. caption标签:表格的标题
2. thead标签:表头部分
3. tbody标签:表的主体部分
4. th标签:行/列的标题，文字加粗显示
5. 1. <table border="1px" bgcolor="green" bordercolor="yellow" width="300px"
   2. height="175px">
   3. <caption>鲜鱼价目表caption>
   4. <thead>
   5. <tr>
   6. <th>序号th>
   7. <th>鱼的种类th>
   8. <th>价格th>
   9. tr>
   10. thead>
   11. <tbody>
   12. <tr align="center">
   13. <td>1td>
   14. <td>草鱼td>
   15. <td>18.6td>
   16. tr>
   17. <tr valign="top">
   18. <td>2td>
   19. <td>鲤鱼td>
   20. <td>28.9td>
   21. tr>
   22. <tr>
   23. <td>3td>
   24. <td>食人鱼td>
   25. <td>1000td>
   26. tr>
   27. tbody>
   28. table>
   

   

3. 表格的属性

1. table标签的属性
   1. border="1px"  设置边框
   2. bgcolor="green"  设置背景颜色
   3. bordercolor="yellow"  设置边框颜色
   4. width="300px" 设置表格的宽度
   5. height="175px"  设置表格的高度
   6. table表格里的边框是带有间距的
      1. 解决方案就是给table标签加:
      2. style="border-collapse: collapse;"  
      3. 去掉边框间的间距
   7. align="center" 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示
2. tr标签的属性
   1. align="" 设置内容的水平对齐方式 left靠左/center居中/right靠右
   2. valign="" 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

2. <table border="1px" style="border-collapse: collapse;" width="500px" height="300px" align="center">
3. <caption>水果一览表caption>
4. <thead>
5. <tr>
6. <th>编号th>
7. <th>品种th>
8. <th>价格th>
9. <th>产地th>
10. tr>
11. thead>
12. <tbody>
13. <tr bgcolor="green" align="center" valign="top">
14. <td>1td>
15. <td>红富士td>
16. <td>12.5td>
17. <td>山东td>
18. tr>
19. <tr>
20. <td>2td>
21. <td>水蜜桃td>
22. <td>16.8td>
23. <td>平谷td>
24. tr>
25. <tr>
26. <td>3td>
27. <td>西瓜td>
28. <td>22.6td>
29. <td>海南td>
30. tr>
31. tbody>
32. table>

4. 不规则的表格

1. td标签的属性:
   1. colspan="n" 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
   2. rowspan="n" 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
   3. 被合并的单元格一定得删除！

5. 表格的大小

1. 表格的大小是由内容撑起来的
2. 但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变
3. 同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变

2. <table border="1px" width="300px" height="200px">
3. <tr>
4. <td colspan="2">1-1td>
7. <td>1-3td>
8. <td>1-4td>
9. tr>
10. <tr>
11. <td>2-1td>
12. <td rowspan="2">2-2td>
13. <td>2-3td>
14. <td>2-4td>
15. tr>
16. <tr>
17. <td>3-1td>
20. <td>3-3td>
21. <td>3-4td>
22. tr>
23. table>
24. <hr>
25. <table border="1px">
26. <tr>
27. <td>1td>
28. <td>td>
29. <td>td>
30. <td>td>
31. <td>td>
32. <td>td>
33. tr>
34. <tr>
35. <td>td>
36. <td>td>
37. <td>td>
38. <td>2222222222222td>
39. <td>td>
40. <td>td>
41. tr>
42. <tr>
43. <td>td>
44. <td>td>
45. <td>td>
46. <td>td>
47. <td>td>
48. <td>td>
49. tr>
50. <tr>
51. <td>td>
52. <td>td>
53. <td>td>
54. <td>td>
55. <td>td>
56. <td>td>
57. tr>
58. <tr>
59. <td>td>
60. <td>td>
61. <td>td>
62. <td>td>
63. <td>td>
64. <td>td>
65. tr>
66. table>

 每日一句

三人行，必有我师焉，择其善者而从之，其不善者而改之。

        "三个人在一起，其中必有某人在某方面是值得我学习的，那他就可当我的老师。我选取他的优点来学习，对他的缺点和不足，我会引以为戒，有则改之。 "