HTML

HTML 知识量:9 - 26 - 70

5.1 表格的结构><

表格基本结构- 5.1.1 -

在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%"属性则使表格宽度填充其容器的整个宽度。  

表格标题:caption- 5.1.2 -

在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来控制。

表头单元格:th- 5.1.3 -

在HTML中,<th>元素用于定义表格的表头单元格(table header)。表头单元格通常包含列标题或其他描述性信息,用于说明表格中数据的含义。<th>元素与普通的表格数据单元格<td>类似,但它在呈现时通常会以粗体或居中的形式显示,以区分于普通数据单元格。

<th>元素对于提高表格的可读性和可访问性非常重要,因为它们可以帮助用户理解表格中的数据是如何组织的。此外,搜索引擎也会使用表头信息来帮助理解网页内容。

虽然<th>元素在视觉上通常会有所区别,但仅仅依赖视觉提示是不够的。为了提高可访问性,通常还会使用scope属性来明确表头单元格与表格中其他单元格的关系。scope属性可以有以下值:

  • col:表头单元格为当前列的所有单元格提供标题。

  • row:表头单元格为当前行的所有单元格提供标题。

  • colgroup:表头单元格为当前列组中的所有单元格提供标题。

  • rowgroup:表头单元格为当前行组中的所有单元格提供标题。