HTML <table> 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>
Click the "Run Instance" button to view the online instance
Browser support
All major browsers support the <table> tag.
Tag definition and usage instructions
<table> tag definition HTML table
An HTML table includes <table> elements, one or more< tr>, <th>, and <td> elements.
The<tr> element defines the table row, the <th> element defines the header, and the <td> element defines the table cell.
More complex HTML tables may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
Differences between HTML 4.01 and HTML5
In HTML5, only the "border" attribute is supported, and only the values "1" or "" are allowed.
Properties
| Properties | Value | Description |
|---|
| align | left
center
right | HTML5 is not supported. HTML 4.01 is deprecated.
Specifies the alignment of the table relative to surrounding elements. |
| bgcolor | rgb(x,x,x)
#xxxxxx
Colorname | #HTML5 is not supported. HTML 4.01 is deprecated.
Specifies the background color of the table. |
| border | 1
"" | Specifies whether the table cell has a border. |
| cellpadding | pixels | ##HTML5 Not supported. Specifies the space between the edge of the cell and its content. |
cellspacing | pixels | ##HTML5 Not supported. Specifies the space between cells. |
frame| void |
above
below
hsides
lhs
rhs
vsides
box
Border
| HTML5 is not supported. Specifies which part of the outer border is visible. |
rules| none |
groups
Rows
cols
All
| HTML5 is not supported. Specifies which part of the inner border is visible. |
summary | text##HTML5 Not supported. | Specifies the summary of the table. | width
| pixels |
%
HTML5 is not supported. | Specifies the width of the table. |
Global attributes
<table> tag supports HTML global attributes.
Event attributes
<table> 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>如果在上面的空单元格中没有边框，你可以插入一个空格 ： </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: Table Object
