设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
查看: 422|回复: 16

[HTML/Xhtml] 浅谈Html网页表格结构化标记的应用

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-9-26 11:51:32 | 显示全部楼层 |阅读模式

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


小结：通过设置表格的标题，能够随时让标题跟着表格动。
 
Html直列化格式

什么是表格的直列化格式呢？我们平常在Excel中所见到的给整列加背景颜色，说的就是这么一回事。

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


小结：通过设置表格的直列化格式，能够对我们需要的内容进行加深颜色，这里只是针对的列内容。
 
源代码如下：

XML/HTML Code复制内容到剪贴板
  1. <html>     
  2. <head>     
  3.      
  4. <li>表格嵌套的使用一</li>     
  5.      
  6. <table  width="500" >     
  7. <tr>     
  8. <td align="center">学生成绩表</td>     
  9. </tr>     
  10. <td>     
  11. <table border="1" width="100%">     
  12. <thead>           
  13. <tr>     
  14. <th>姓名</th>     
  15. <th>语文</th>     
  16. <th>数学</th>     
  17. <th>外语</th>     
  18. </tr>     
  19. </thead>     
  20. <tbody>     
  21. <tr>     
  22. <td>张三</td>     
  23. <td>95</td>     
  24. <td>95</td>     
  25. <td>95</td>     
  26. </tr>     
  27. <tr>     
  28. <td>张三</td>     
  29. <td>95</td>     
  30. <td>95</td>     
  31. <td>95</td>     
  32. </tr>     
  33. <tr>     
  34. <td>张三</td>     
  35. <td>95</td>     
  36. <td>95</td>     
  37. <td>95</td>     
  38. </tr>     
  39. </tbody>     
  40. <tfoot>     
  41. <tr>     
  42. <td colspan="4">成绩汇总</td>     
  43. </tr>     
  44. </tfoot>     
  45. </table>     
  46. </td>     
  47. </tr>     
  48. </table>     
  49.      
  50. <br/>     
  51.      
  52. <li>表格嵌套的使用二</li>     
  53.      
  54. <table border="1" width="500" >     
  55. <caption align="bottom">学生成绩</caption>     
  56. <thead>     
  57. <tr>     
  58. <th>姓名</th>     
  59. <th>语文</th>     
  60. <th>数学</th>     
  61. <th>外语</th>     
  62. </tr>     
  63. </thead>     
  64. <tbody>     
  65. <tr>     
  66. <td>张三</td>     
  67. <td>95</td>     
  68. <td>95</td>     
  69. <td>95</td>     
  70. </tr>     
  71. <tr>     
  72. <td>张三</td>     
  73. <td>95</td>     
  74. <td>95</td>     
  75. <td>95</td>     
  76. </tr>     
  77. <tr>     
  78. <td>张三</td>     
  79. <td>95</td>     
  80. <td>95</td>     
  81. <td>95</td>     
  82. </tr>     
  83. </tbody>     
  84. <tfoot>     
  85. <tr>     
  86. <td colspan="4">成绩汇总</td>     
  87. </tr>     
  88. </tfoot>     
  89. </table>     
  90.         
  91. <br/>     
  92.      
  93. <li>表格嵌套的使用三</li>     
  94. <table border="1" width="500" >     
  95. <caption align="bottom">学生成绩</caption>     
  96. <col ></col>     
  97. <col bgcolor=blue></col>     
  98. <thead>     
  99. <tr>     
  100. <th>姓名</th>     
  101. <th>语文</th>     
  102. <th>数学</th>     
  103. <th>外语</th>     
  104. </tr>     
  105. </thead>     
  106. <tbody>     
  107. <tr >     
  108. <td>张三</td>     
  109. <td>95</td>     
  110. <td>95</td>     
  111. <td>95</td>     
  112. </tr>     
  113. <tr>     
  114. <td>张三</td>     
  115. <td>95</td>     
  116. <td>95</td>     
  117. <td>95</td>     
  118. </tr>     
  119. <tr>     
  120. <td>张三</td>     
  121. <td>95</td>     
  122. <td>95</td>     
  123. <td>95</td>     
  124. </tr>     
  125. </tbody>     
  126. <tfoot>     
  127. </tfoot>     
  128. </table>     
  129.      
  130. </body>     
  131. </head>     
  132. </html>    

以上就是小编为大家带来的浅谈Html网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持脚本之家~

下面小编就为大家带来一篇浅谈Html网页表格结构化标记的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在讲网页表格的结构化标记之前，还是先看几幅图片。

20140626221527437.png

20140626221527437.png

Html表格的结构化

所谓的结构化，正如上述第一副图所示，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。

结构化格式

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <thead>…</thead> --------表头区     
  4.      
  5. <tbody>…</tbody>---------表体区     
  6.      
  7. <tfoot>…</tfoot>------------表尾区     
  8.      
  9. </table>    

总结：通过把表格划分为三部分，方便了我们对表格的编辑操作。
 
Html表格的标题

每个表格都有自己的标题，正如上述第二幅图片所示，那么又如何做到让标题随着内容来移动呢？
 
表格的标题

XML/HTML Code复制内容到剪贴板
  1. <table>     
  2.      
  3. <caption>…</caption>     
  4.      
  5. </table>    
<caption>下的属性值有：
HTML, 网页, 表格, 标记

相关帖子
回复

使用道具 举报

dingzhi521

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2022-11-5 01:08:41 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

醉梦娱乐网

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2023-10-15 07:04:00 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

JosephSA

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2023-10-17 09:56:59 | 显示全部楼层
怕怕怕怕怕怕怕怕怕怕怕怕怕怕
回复 支持 反对

使用道具 举报

dm00ji1s

1

主题

2万

回帖

319

积分

中级会员

Rank: 3Rank: 3

积分
319
发表于 2023-10-19 05:03:49 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

j__j33p

3

主题

2万

回帖

294

积分

中级会员

Rank: 3Rank: 3

积分
294
发表于 2024-5-6 21:52:51 | 显示全部楼层
论坛有你更精彩！
回复 支持 反对

使用道具 举报

白狐软件

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2024-6-11 00:57:23 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

idy6_yus

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2024-6-29 15:29:12 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

z80vh

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-7-5 19:06:35 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

kestlhoxn

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-7-10 07:51:13 | 显示全部楼层
儿童服务绯闻绯闻绯闻
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-2 17:30 , Processed in 0.088867 second(s), 29 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表