• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

64 - 表格元素 - td标签 - 表格单元格内容

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:03:44

表格元素 - td 标签 - 表格单元格内容

在前端开发中，HTML5 提供了丰富的标签来构建各种页面结构，其中表格是一种非常常见且实用的布局方式。而 <td> 标签则是表格中不可或缺的一部分，它用于定义表格中的单元格内容。本文将深入介绍 <td> 标签的使用方法、特性以及一些实用的例子。

一、<td> 标签的基本概念

<td> 是 HTML 中的一个标签，全称为“table data”，即表格数据。它通常嵌套在 <tr>（表格行）标签内部，用于定义表格中的一个单元格。每个 <td> 标签所包含的内容就是该单元格显示的信息。

二、基本语法

  1. <table>
  2.   <tr>
  3.     <td>单元格内容 1</td>
  4.     <td>单元格内容 2</td>
  5.   </tr>
  6.   <tr>
  7.     <td>单元格内容 3</td>
  8.     <td>单元格内容 4</td>
  9.   </tr>
  10. </table>

在上述代码中，<table> 标签定义了一个表格，<tr> 标签定义了表格的行，而 <td> 标签则定义了每行中的单元格。每个 <td> 标签内可以包含文本、图片、链接等各种 HTML 元素。

三、<td> 标签的属性

1. colspan

colspan 属性用于指定单元格跨越的列数。例如：

  1. <table border="1">
  2.   <tr>
  3.     <td colspan="2">跨越两列的单元格</td>
  4.     <td>普通单元格</td>
  5.   </tr>
  6.   <tr>
  7.     <td>单元格 1</td>
  8.     <td>单元格 2</td>
  9.     <td>单元格 3</td>
  10.   </tr>
  11. </table>

在这个例子中，第一个 <td> 标签的 colspan 属性值为 2，表示该单元格跨越两列。

2. rowspan

rowspan 属性用于指定单元格跨越的行数。例如：

  1. <table border="1">
  2.   <tr>
  3.     <td rowspan="2">跨越两行的单元格</td>
  4.     <td>单元格 1</td>
  5.   </tr>
  6.   <tr>
  7.     <td>单元格 2</td>
  8.   </tr>
  9. </table>

这里第一个 <td> 标签的 rowspan 属性值为 2，表示该单元格跨越两行。

四、实用例子：学生成绩表格

下面是一个使用 <td> 标签创建的学生成绩表格的完整示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>学生成绩表格</title>
  8.   <style>
  9.     table {
  10.       border-collapse: collapse;
  11.       width: 50%;
  12.     }
  14.     th,
  15.     td {
  16.       border: 1px solid black;
  17.       padding: 8px;
  18.       text-align: center;
  19.     }
  21.     th {
  22.       background-color: #f2f2f2;
  23.     }
  24.   </style>
  25. </head>
  27. <body>
  28.   <table>
  29.     <tr>
  30.       <th>姓名</th>
  31.       <th>语文</th>
  32.       <th>数学</th>
  33.       <th>英语</th>
  34.     </tr>
  35.     <tr>
  36.       <td>张三</td>
  37.       <td>85</td>
  38.       <td>90</td>
  39.       <td>88</td>
  40.     </tr>
  41.     <tr>
  42.       <td>李四</td>
  43.       <td>78</td>
  44.       <td>82</td>
  45.       <td>75</td>
  46.     </tr>
  47.     <tr>
  48.       <td>王五</td>
  49.       <td>92</td>
  50.       <td>95</td>
  51.       <td>91</td>
  52.     </tr>
  53.   </table>
  54. </body>
  56. </html>

在这个例子中，我们使用 <td> 标签填充了表格的每一个单元格，展示了不同学生的各科成绩。同时，我们还使用了 CSS 样式来美化表格，使其更加美观易读。

五、总结

属性 描述
colspan 指定单元格跨越的列数
rowspan 指定单元格跨越的行数

<td> 标签是 HTML 表格中用于定义单元格内容的重要标签。通过合理使用 <td> 标签及其属性，我们可以创建出各种复杂的表格布局，满足不同的页面需求。希望本文能帮助你更好地理解和使用 <td> 标签。