<th>


HTML <th> Tag

Instance

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

<table border="1">
  <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>

Run Example»

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

Browser Support

1000.png

All major browsers support the <th> tag.

Tag definition and usage instructions

<th> tag defines the header cell in the HTML table.

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 the header cell can span. headersSpecifies one or more header cells associated with the header cell. heightnowrapnowraprowspanSpecifies the number of rows that the header cell can span. scopecolSpecifies whether the header cell is the head of a row, column, row group, or column group. valigntopwidth

Global attributes

<th> tag supports HTML global attributes.

Event attributes

<th> tag supports all HTML event attributes.

Examples

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>

Run Instance»

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

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>

Run Instance»

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

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>

Run instance»

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>

Run Instance»

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>

Run Instance»

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>

Run Instance»

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>

Run Instance»

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

Related Articles

HTML Tutorial: HTML Table

HTML DOM Reference Manual: Th Object


←
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
PropertiesValueDescription
abbr textHTML5 is not supported. Specifies an abbreviated version of the contents in the header cell.
alignleft
Right
center
Justify
char		HTML5 is not supported. Specifies the horizontal alignment of header cell contents.
axiscategory_name##HTML5 Not supported. Classify header cells.
rgb(x,x,x) #xxxxxx
Colorname
#HTML5 is not supported. HTML 4.01 is deprecated. Specifies the background color of the header cell.
characterHTML5 Not supported. Specifies which character should be used to align content.
numberHTML5 Not supported. Specifies the offset of the alignment character.
number
header_id
pixels %
HTML5 is not supported. HTML 4.01 is deprecated. Specifies the height of the header cell.
HTML5 is not supported. HTML 4.01 is deprecated. Specifies whether the content in the header cell should be wrapped.
number
colgroup
row
Rowgroup
middle
bottom
Baseline
HTML5 is not supported. Specifies the vertical arrangement of header cell contents.
pixels %
#HTML5 is not supported. HTML 4.01 is deprecated. Specifies the width of the header cell.