头闻号

辽宁海城三洋化工厂

胺|通用有机试剂|酰胺|分析试剂|医药中间体

首页 > 新闻中心 > 科技常识:浅谈Html网页表格结构化标记的应用
科技常识:浅谈Html网页表格结构化标记的应用
发布时间:2024-11-27 11:49:17        浏览次数:6        返回列表

今天小编跟大家讲解下有关浅谈Html网页表格结构化标记的应用 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关浅谈Html网页表格结构化标记的应用 的相关资料,希望小伙伴们看了有所帮助。

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

Html表格的结构化

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

结构化格式

XML/HTML Code复制内容到剪贴板 <table> <thead>…</thead>--------表头区 <tbody>…</tbody>---------表体区 <tfoot>…</tfoot>------------表尾区 </table>

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

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

XML/HTML Code复制内容到剪贴板 <table> <caption>…</caption> </table> <caption>下的属性值有:

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

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

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

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数

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

XML/HTML Code复制内容到剪贴板 <html> <head> <li>表格嵌套的使用一</li> <tablewidth="500"> <tr> <tdalign="center">学生成绩表</td> </tr> <td> <tableborder="1"width="100%"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>外语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> </tbody> <tfoot> <tr> <tdcolspan="4">成绩汇总</td> </tr> </tfoot> </table> </td> </tr> </table> <br/> <li>表格嵌套的使用二</li> <tableborder="1"width="500"> <captionalign="bottom">学生成绩</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>外语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> </tbody> <tfoot> <tr> <tdcolspan="4">成绩汇总</td> </tr> </tfoot> </table> <br/> <li>表格嵌套的使用三</li> <tableborder="1"width="500"> <captionalign="bottom">学生成绩</caption> <col></col> <colbgcolor=blue></col> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>外语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr> <td>张三</td> <td>95</td> <td>95</td> <td>95</td> </tr> </tbody> <tfoot> </tfoot> </table> </body> </head> </html>

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

来源:爱蒂网