HTML developmen...

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

HTML development manual

author：php.cn update time：2022-04-11 17:45:33

<td>

HTML <td> Tag

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

Click the "Run Instance" button to view the online instance

Browser support

All major browsers support the <td> tag.

Tag definition and usage instructions

<td> Tag defines standard cells in HTML tables.

HTML tables have two cell types:

Header cell - contains header information (created by <th> element)
Standard cell Grid - Contains data (created by the <td> element) Text within the

<th> element is usually rendered bold and centered. The text within the

<td> element is usually ordinary left-aligned text.

Tips and Notes

Tips: If you need to span content across multiple rows or columns, use the colspan and rowspan attributes!

Differences between HTML 4.01 and HTML5

Some attributes from HTML 4.01 are no longer supported in HTML 5.

Properties

bgcolorcharcharoffcolspanSpecifies the number of columns that a cell can span. headersSpecifies one or more header cells associated with the cell. height##HTML5 Not supported. HTML 4.01 is deprecated. nowrapHTML5 is not supported. HTML 4.01 is deprecated. rowspannumberscopecolgroupHTML5 Not supported. valignmiddleHTML5 is not supported. widthpixelsSpecifies the width of the cell.

Global attributes

<td> tag supports HTML global attributes.

Event attributes

<td> tag supports HTML event attributes.

Try it out - Example

Title in table
This example demonstrates how to display table title.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>表格使用水平标题:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>表格使用垂直标题:</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

</body>
</html>

Click the "Run instance" button to view the online instance

Empty Cell
This example demonstrates how to use " " to handle cells with no content.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>一些文本</td>
  <td>一些文本</td>
</tr>
<tr>
  <td></td>
  <td>一些文本</td>
</tr>
</table>

<p>如果在上面的空单元格中没有边框，你可以插入一个空格 ： &nbsp;</p>

</body>
</html>

Click the "Run instance" button to view the online instance

Table with title

This example demonstrates a table with title.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

Click the "Run instance" button to view the online instance

Label within the table
This example demonstrates how to display elements within other elements.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

Click the "Run instance" button to view the online instance

Table cells that span rows or columns

This example demonstrates how to define table cells that span rows or columns.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

Click the "Run instance" button to view the online instance

Related Articles

HTML Tutorial: HTML Table

HTML DOM Reference Manual: Td Object

php.cn

Properties	Value	Description
abbr	text	HTML5 is not supported. Specifies the abbreviated version of the content in the cell.
align	left #right center justify char	HTML5 Not supported. Specifies the horizontal alignment of cell content.
axis	category_name	##HTML5 Not supported. Category cells.
	rgb(x,x,x)#xxxxxx colorname	HTML5 Not supported. HTML 4.01 is deprecated. Specifies the background color of the cell.
	character	HTML5 Not supported. Specifies which character should be used to align content.
	number	HTML5 Not supported. Specifies the offset of the alignment character.
	number
	header_id
	pixels%	Set the height of the cell.
nowrap		Specifies whether the content in the cell is wrapped.
	Set the number of rows that the cell can span.
col	row rowgroup	Define the method to associate header cells with data cells.
top	bottom baseline	Specifies the vertical arrangement of cell contents.
	% ##HTML5 Not supported. HTML 4.01 is deprecated.