HTML <tr> 标签

实例

一个简单的 HTML 表格，包含两行两列：

<html>
<body>
<table border="1">
  <tr>
    <th>月份</th>
    <th>结余</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

运行一下

定义和用法

<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。

浏览器支持

元素
<tr>	Yes	Yes	Yes	Yes	Yes

所有浏览器都支持 <tr> 标签。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，tr 元素的 "bgcolor" 是不建议使用的。

在 XHTML 1.0 Strict DTD 中，不支持 tr 元素的 "bgcolor" 属性。

可选的属性

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不建议使用。请使用样式取而代之。规定表格行的背景颜色。
char	character	规定根据哪个字符来进行文本对齐。
charoff	number	规定第一个对齐字符的偏移量。
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

全局属性

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

事件属性

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

更多实例

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>添加 table 的行背景色</h1>
<table>
  <tr style="background-color:#FF0000">
    <th>月份</th>
    <th>结余</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>table 的行元素对齐垂直对齐方式</h1>
<table style="height:200px">
  <tr style="vertical-align:top">
    <th>月份</th>
    <th>结余</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>1月</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

运行一下

tr标签的默认样式

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

HTML <tr> 标签

实例

定义和用法

浏览器支持

HTML 与 XHTML 之间的差异

可选的属性

全局属性

事件属性

相关页面

更多实例

tr标签的默认样式

分类导航