<tr>
HTML <tr> 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
All major browsers support< tr> tag.
Tag definition and usage instructions
<tr> tag defines rows in the HTML table.
A <tr> element contains one or more <th> or <td> elements.
Differences between HTML 4.01 and HTML5
In HTML 5, any attributes of the <tr> tag in HTML 4.01 are not supported.
Properties
Properties | Value | Description |
---|---|---|
align | right left center justify char | HTML5 Not supported. Define the content alignment of table rows. |
bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 Not supported. HTML 4.01 is deprecated. Specifies the background color of table rows. |
char | character | HTML5 Not supported. Specifies which character should be used for text alignment. |
charoff | number | HTML5 Not supported. Specifies the offset of the first alignment character. |
valign | top middle bottom baseline | HTML5 is not supported. Specifies the vertical alignment of content in table rows. |
Global attributes
<tr> tag supports HTML global attributes.
Event attributes
<tr> tag supports HTML event attributes.
Try it - 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
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>
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"> <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
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: Tr Object