HTML - <td>标签

HTML <td> 标签用于定义表格的数据单元格，它是<tr> 元素的子元素。<td> 标签可以包含文本、表单、图像、表格等。

默认情况下，其内部内容靠左对齐。表格每一行的单元格数量与最长行的单元格数量相同。如果某一行单元格数量较少，浏览器会自动填充该行，在行尾添加空单元格。

为了在表格中呈现表格数据，每个数据单元格都必须作为单独的 <td> 元素添加。

语法

<table>
   <tr>
      <td>..</td>
      <td>..</td>
      ...
   </tr>
</table>

属性

属性	值	描述
colspan	数字	指定列数。
headers	header_id	指定单元格关联的一个或多个表头单元格。
rowspan	数字	指定单元格应占据的行数。

HTML td 标签示例

下面的示例将演示 td 标签的用法，包括何时何地以及如何使用 td 标签以及如何设置表格单元格的样式。

创建简单的表格

让我们考虑以下示例，我们将使用 <td> 标签。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #5DADE2;
      }
   </style>
<body>
   <table>
      <tr>
         <td>1</td>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
      </tr>
   </table>
</body>
</html>

设置表格单元格的背景颜色

考虑另一种情况，我们将向 <td> 标签应用背景颜色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #A569BD;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Stundent</th>
         <th>Age</th>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA">Ram</td>
         <td style="background-color:#F9E79F ">23</td>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA ">Raju</td>
         <td style="background-color:#F9E79F ">22</td>
      </tr>
   </table>
</body>
</html>

对齐表格单元格

在下面的示例中，我们将使用 CSS 将 <td> 标签居中对齐。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Cars</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>Toyota</td>
         <td style="text-align:center">Japan</td>
      </tr>
      <tr>
         <td>Nissan</td>
         <td style="text-align:center">France</td>
      </tr>
      <tr>
         <td>Kia</td>
         <td style="text-align:center">South Korea</td>
      </tr>
   </table>
</body>
</html>

设置表格单元格的宽度

以下是一个示例，我们将使用 CSS 调整表格单元格的宽度。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #8E44AD;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Student</th>
         <th>Department</th>
      </tr>
      <tr>
         <td style="width:40%">Ram</td>
         <td style="width:60%">Information Technology</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>Voice Process</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Non-Voice Process</td>
      </tr>
   </table>
</body>
</html>

支持的浏览器

标签
tbody	是	是	是	是	是

html_tags_reference.htm

打印页面