HTML 知识量:9 - 26 - 70
在HTML中,一个表格一般由以下3个部分组成。
表格:table标签。
行:tr标签。
单元格:td标签。
下面是一个简单的示例:
<table border="1" width="100%"> <tr> <th>员工编号</th> <th>姓名</th> <th>职位</th> <th>工资</th> </tr> <tr> <td>001</td> <td>张三</td> <td>经理</td> <td>5000</td> </tr> <tr> <td>002</td> <td>李四</td> <td>员工</td> <td>3000</td> </tr> </table>
其中,<th>元素用于定义表头单元格,而<td>元素用于定义表格的普通单元格。border="1"属性用于在表格周围显示边框,width="100%"属性则使表格宽度填充其容器的整个宽度。
在HTML 4.01中,<caption>元素用于为表格提供标题或摘要。这个标题通常被显示在表格上方。下面是一个包含<caption>元素的HTML 4.01表格示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML 4.01 表格标题示例</title> </head> <body> <h2>员工信息表</h2> <table border="1" width="100%"> <caption>员工薪资信息</caption> <!-- 表格标题 --> <tr> <th>员工编号</th> <th>姓名</th> <th>职位</th> <th>工资</th> </tr> <tr> <td>001</td> <td>张三</td> <td>经理</td> <td>5000</td> </tr> <tr> <td>002</td> <td>李四</td> <td>员工</td> <td>3000</td> </tr> </table> </body> </html>
在这个例子中,<caption>元素包含了文本“员工薪资信息”,它将作为表格的标题显示。在视觉上,大多数浏览器默认将表格标题显示在表格上方,并以粗体显示,但具体的样式可以通过CSS来控制。
在HTML中,<th>元素用于定义表格的表头单元格(table header)。表头单元格通常包含列标题或其他描述性信息,用于说明表格中数据的含义。<th>元素与普通的表格数据单元格<td>类似,但它在呈现时通常会以粗体或居中的形式显示,以区分于普通数据单元格。
<th>元素对于提高表格的可读性和可访问性非常重要,因为它们可以帮助用户理解表格中的数据是如何组织的。此外,搜索引擎也会使用表头信息来帮助理解网页内容。
虽然<th>元素在视觉上通常会有所区别,但仅仅依赖视觉提示是不够的。为了提高可访问性,通常还会使用scope属性来明确表头单元格与表格中其他单元格的关系。scope属性可以有以下值:
col:表头单元格为当前列的所有单元格提供标题。
row:表头单元格为当前行的所有单元格提供标题。
colgroup:表头单元格为当前列组中的所有单元格提供标题。
rowgroup:表头单元格为当前行组中的所有单元格提供标题。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6