前端表格知识 页眉 主题 页脚 设计让表格更语义

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

我们用一下内容简单介绍一下表格
caption>课程表</caption> cellspacing 规定单元格之间的空白
<!-- 表格标题 -->
thead 表格页眉
tbody 表格的主体
tfoot 表格的页脚
优点:告诉表格的显示顺序 表格结构 不会被代码打乱
row 是行 如果需要跨列 则rowspan
col 是列 如果是跨行 则为colspan
我们所有的表格内容都需要写在table中
<table>
<thead>
<tr>
<th colspan="2">时间</th>
<!-- 单元格跨列数 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>

  1. </tr>
  2. </thead>
  3. <tbody>
  4. <tr>
  5. <td rowspan="4">上午</td>
  6. <!-- 跨行合并 -->
  7. <td>1</td>
  8. <td>语文</td>
  9. <td>思想品德</td>
  10. <td>数学</td>
  11. <td>物理</td>
  12. <td>体育</td>
  13. </tr>
  14. <tr>
  15. <td>2</td>
  16. <td>语文</td>
  17. <td>思想品德</td>
  18. <td>数学</td>
  19. <td>物理</td>
  20. <td>体育</td>
  21. </tr>
  22. <tr>
  23. <td>3</td>
  24. <td>语文</td>
  25. <td>思想品德</td>
  26. <td>数学</td>
  27. <td>物理</td>
  28. <td>体育</td>
  29. </tr>
  30. <tr>
  31. <td>4</td>
  32. <td>语文</td>
  33. <td>思想品德</td>
  34. <td>数学</td>
  35. <td>物理</td>
  36. <td>体育</td>
  37. </tr>
  38. <tr>
  39. <td colspan="7">休息</td>
  40. </tr>
  41. <tr>
  42. <td rowspan="3">下午</td>
  43. <!-- 跨行合并 -->
  44. <td>1</td>
  45. <td>语文</td>
  46. <td>思想品德</td>
  47. <td>数学</td>
  48. <td>物理</td>
  49. <td>体育</td>
  50. </tr>
  51. <tr>
  52. <td>2</td>
  53. <td>语文</td>
  54. <td>思想品德</td>
  55. <td>数学</td>
  56. <td>物理</td>
  57. <td>体育</td>
  58. </tr>
  59. <tr>
  60. <td>3</td>
  61. <td>语文</td>
  62. <td>思想品德</td>
  63. <td>数学</td>
  64. <td>物理</td>
  65. <td>体育</td>
  66. </tr>
  67. </tbody>
  68. <tfoot>
  69. <tr>
  70. <td colspan="7" style="color: red;">家教HTML基础课表案例</td>
  71. </tr>
  72. </tfoot>

</table>

【文章原创作者:盐城网站制作公司 http://www.1234xp.com/yancheng.html 欢迎留下您的宝贵建议】