HTML <td> 标签

2025 年 3 月 25 日 | 阅读 8 分钟

HTML <td> 标签用于定义 HTML 表格中的单元格，其中包含表格的数据。<td> 标签必须是 <tr>（表格行）标签的子元素。每一行都可以包含多个 <td> 数据元素。

在表格中，<tr> 标签中分组的 <td> 元素默认会呈现为表格中的一个单独的行。<td> 元素的内容是常规的，并且默认在表格中左对齐。

语法

显示	内联
开始标签/结束标签	开始和结束标签
用途	表格内容

示例

<!DOCTYPE html>
<html>
<head>
	<title>HTML td tag</title>
	<style>
	th{
	 background-color: #6495ed;
	}
	th,td{
		border: 1px solid black;
		padding: 10px;
		}
	</style>
</head>
<body>
  <h2>Example of td Tag</h2>
  <table style=" border-collapse: collapse; background-color:#dcdcdc;">
       <tr>
  	<th>Product</th>
  	<th>Quantity</th>
  	<th>Price</th>
       </tr>

  	<tr>
  	    <td>Books</td>	
  	    <td>5</td>
  	     <td>589</td>
  	</tr>

  	<tr>
  	   <td>T-shirt</td>	
  	   <td>5</td>
  	   <td>3500</td>
  	</tr>
            
            <tr>
  	  <td>Jeans</td>	
  	    <td>2</td>
  	   <td>5000</td>
  	</tr>
  </table>
</body>
</html>

输出

使用 <td> 标签在表格中固定列宽

在 HTML 表格中，浏览器会自动调整行和列的尺寸以适应内容。但是，有时需要固定列的宽度或使其等宽。因此，有多种技术可以固定列的宽度。

<td> 标签的 width 属性： <td> 标签的 width 属性用于固定特定列的宽度。可以通过为该属性分配一个数值或百分比来指定。

以下是使用 <td> 标签的 width 属性固定列宽的示例。

示例 1

<! DOCTYPE html>  
<html>  
<head>  
    <title> HTML td tag with fixed width </title>  
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width,
   initial-scale = 1.0" />
    <style> 
@import url(https://fonts.googleapis.com/css?family=Bangers);	
	body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
	table.center {
  margin-left: auto; 
  margin-right: auto;
}
    th {  
     background-color: #6495ed;  
    }  
    th,td {  
        border: 1px solid red;  
        padding: 10px;  
        }  
thead {
  display: table-header-group;
color: green;
font-weight: bold;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
thead {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	td {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	th {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
    </style>  
</head>  
<body>  
  <h2> Example </h2>
  <h3> Fixed column width using td Tag </h3>  
  <table class = "center" style = " border-collapse: collapse; background-color:#dcdcdc;">  
<thead>
      <tr>
        <td width  = "10%" style = "color:red;"> Sr. No </td>
        <td width = "40%"> Product </td>
        <td width = "20%"> Quantity </td>
        <td width = "30%"> Price </td>
      </tr>
    </thead> 
  
    <tr>  
        <td style = "color:red;"> 1 </td>  
        <td> Books </td>    
        <td> 5 </td>  
         <td> 589 </td>  
    </tr>  
  
    <tr>  
       <td style = "color:red;"> 2 </td>  
       <td> T-shirt </td>   
       <td> 5 </td>  
       <td> 3500 </td>  
    </tr>        
            <tr>  
       <td style = "color:red;"> 3 </td>  
      <td> Jeans </td>      
        <td> 2 </td>  
       <td> 5000 </td>  
    </tr>  
<tr>  
       <td style = "color:red;"> 4 </td>  
      <td> Suits </td>      
        <td> 3 </td>  
       <td> 6000 </td>  
    </tr>  

  </table>  
</body>  
</html>  

说明

在上面的示例中，我们创建了一个使用 <td> 标签的 width 属性来固定列宽的例子。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
<head>  
    <title> HTML td tag with  Equal width  column </title>  
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width,
   initial-scale = 1.0" />
    <style> 
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}
table tr {
  border: 1px solid #ddd;
  padding: .35em;
}
table tr:nth-child(even) {
  background: #f8f8f8;  
}
table th {
  padding: .625em;
  text-align: left;
}
table td {
  padding: .625em;
  text-align: left;
}
table th {
  background: #999;
  color: #fff;
  font-size: 1.85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@import url(https://fonts.googleapis.com/css?family=Bangers);	
	body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
thead {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	td {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	th {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 18px;
		
    }
	h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
    </style>  
</head>  
<body>  
  <h2> Example </h2>
  <h3> Equal Sized column width using td Tag </h3>
<table>
  <thead>
    <tr>
      <th scope = "col"> Sr. No </th>
      <th scope = "col"> Product </th>
      <th scope = "col"> Quantity </th>
      <th scope = "col"> Price </th>
    </tr>
  </thead>
  <tbody>
        <tr>  
        <td style = "color:red;"> 1 </td>  
        <td> Books </td>    
        <td> 5 </td>  
         <td> 589 </td>  
    </tr>  
  
    <tr>  
       <td style = "color:red;"> 2 </td>  
       <td> T-shirt </td>   
       <td> 5 </td>  
       <td> 3500 </td>  
    </tr>                
            <tr>  
       <td style = "color:red;"> 3 </td>  
      <td> Jeans </td>      
        <td> 2 </td>  
       <td> 5000 </td>  
    </tr>  
<tr>  
       <td style = "color:red;"> 4 </td>  
      <td> Suits </td>      
        <td> 3 </td>  
       <td> 6000 </td>  
    </tr>  
  </tbody>
</table>
</body>
</html>

说明

在上面的示例中，我们使用 <td> 标签创建了一个等宽列的例子。

输出

以下是这个例子的输出。

使用 <col> 标签在表格中固定列宽

<col> 标签： 表格中的 <col> 标签用于固定特定列的宽度。可以通过为该属性分配一个数值或百分比来指定。

以下是使用 <col> 标签固定列宽的示例。

示例 1

<! DOCTYPE html>
<html>
	<head>
		<title> Html fixed width using col tag </title>
		<meta charset = "UTF-8" />
		<meta name = "viewport"
			content = "width=device-width,
					initial-scale = 1.0" />
		<style>
		@import url(https://fonts.googleapis.com/css?family=Bangers);	
	body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
table {
	border: 1px solid black;
	border-collapse: collapse;
	margin-left: auto; 
  margin-right: auto;
}
th {
	border: 1px solid black;
	border-collapse: collapse;
	margin-left: auto; 
  margin-right: auto;
}
td {
	border: 1px solid black;
	border-collapse: collapse;
	margin-left: auto; 
  margin-right: auto;
}

    table {
	  width: 50%;
	}
	table.fixed {
		table-layout: fixed;
	}
	table.fixed td {
		overflow: hidden;
	}
	thead {
  display: table-header-group;
color: green;
font-weight: bold;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
thead {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	td {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	th {
      border-top: 1px solid #ccc;
      padding:10px;
      width: 120px;
        background-color: #004496;
        color: #fff;
        font-family: arial;
        font-size: 12px;
		
    }
	h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 3vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
 
}
		</style>
	</head>
	<body>
		<h2> Example </h2>
  <h3> Fixed column width using col Tag </h3>  
				<div style = "overflow-x: auto;">			
			<table>
			<col style = "width: 10%;" />
<col style = "width: 40%;" />
<col style = "width: 20%;" />
<col style = "width: 30%;" />
<tr>
	<th> Sr. No </th>
	<th> Product </th>
   <th> Quantity </th>
      <th> Price </th>
</tr>
<tr>  
        <td style = "color:red;"> 1 </td>  
        <td> Books </td>    
        <td> 5 </td>  
         <td> 589 </td>  
    </tr>    
    <tr>  
       <td style = "color:red;"> 2 </td>  
       <td> T-shirt </td>   
       <td> 5 </td>  

       <td> 3500 </td>  
    </tr>                
     <tr>  
       <td style = "color:red;"> 3 </td>  
      <td> Jeans </td>      
        <td> 2 </td>  
       <td> 5000 </td>  
    </tr>  
<tr>  
       <td style = "color:red;"> 4 </td>  
      <td> Suits </td>      
        <td> 3 </td>  
       <td> 6000 </td>  
    </tr>  
</table>
		</div>
	</body>
</html>

说明

在上面的示例中，我们创建了一个使用 <col> 标签来固定列宽的例子。

输出

以下是这个例子的输出。

属性

标签特定属性

属性	值	描述
abbr	text	定义单元格内容的缩写版本。（HTML5 中不支持）
align	左右 center justify char	指定单元格内容的对齐方式。（HTML5 中不支持）
轴	category_name	对单元格进行分类。（HTML5 中不支持）
bgcolor	rgb(x,x,x) #xxxxxx Color_name	设置单元格的背景颜色。（HTML5 中不支持）
char	字符	指定单元格内容与字符对齐。（HTML5 中不支持）
charoff	数字	确定单元格内容从 `char` 属性指定的字符开始的对齐偏移量。（HTML5 中不支持）
colspan	数字	确定单元格应跨越的列数。
headers	header_id	确定一个单元格所属的一个或多个标题单元格。
高度	% pixels	确定表格单元格的高度。（HTML5 中不支持）
nowrap	nowrap	如果设置了此属性，则单元格内的内容不应换行。（HTML5 中不支持）
rowspan	数字	确定单元格应跨越的行数。
scope	col colgroup 行 rowgroup	指定标题元素所关联的单元格。（HTML5 中不支持）
valign	top middle bottom (底部) baseline	确定单元格内容的垂直对齐方式。（HTML5 中不支持）
宽度	% pixels	确定单元格的宽度。（HTML5 中不支持）

全局属性

<td> 标签支持 HTML 中的全局属性。

事件属性

<td> 标签支持 HTML 中的事件属性。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<td>	是的	是的	是的	是的	是的

下一主题HTML template 标签

HTML <td> 标签

语法

示例

使用 <td> 标签在表格中固定列宽

示例 1

示例 2

使用 <col> 标签在表格中固定列宽

示例 1

属性

标签特定属性

全局属性

事件属性

支持的浏览器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML <td> 标签

语法

示例

使用 <td> 标签在表格中固定列宽

示例 1

示例 2

使用 <col> 标签在表格中固定列宽

示例 1

属性

标签特定属性

全局属性

事件属性

支持的浏览器

相关帖子

HTML <form> 标签

HTML header 标签

HTML input 标签

HTML thead 标签

HTML html 标签

HTML center 标签

HTML <table> 标签

HTML tbody 标签

HTML colgroup 标签

HTML <p> 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器