HTML <tr> 标签
一个简单的 HTML 表格,包含两列两行:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
浏览器支持
所有主流浏览器都支持 <tr> 标签。
标签定义及使用说明
<tr> 标签定义 HTML 表格中的行。
一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。
HTML 4.01 与 HTML5之间的差异
在 HTML 5 中,不支持 <tr> 标签在 HTML 4.01 中的任何属性。
属性
属性 | 值 | 描述 |
---|---|---|
align | right left center justify char |
HTML5 不支持。定义表格行的内容对齐方式。 |
bgcolor | rgb(x,x,x) #xxxxxx colorname |
HTML5 不支持。HTML 4.01 已废弃。 规定表格行的背景颜色。 |
char | character | HTML5 不支持。规定根据哪个字符来进行文本对齐。 |
charoff | number | HTML5 不支持。规定第一个对齐字符的偏移量。 |
valign | top middle bottom baseline |
HTML5 不支持。规定表格行中内容的垂直对齐方式。 |
全局属性
<tr> 标签支持 HTML 的全局属性。
事件属性
<tr> 标签支持 HTML 的事件属性。
尝试一下 - 实例
- 表格中的标题 - 本例演示如何显示表格标题。
<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>
- 空单元格 - 本例演示如何使用 " " 处理没有内容的单元格。
<table border="1">
<tr>
<td>一些文本</td>
<td>一些文本</td>
</tr>
<tr>
<td></td>
<td>一些文本</td>
</tr>
</table>
<p>如果在上面的空单元格中没有边框,你可以插入一个空格 : </p>
- 带有标题的表格 - 本例演示一个带标题(caption)的表格。
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
- 表格内的标签 - 本例演示如何在其他的元素内显示元素。
<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>
- 跨行或跨列的表格单元格 - 本例演示如何定义跨行或跨列的表格单元格。
<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>
相关文章
HTML 教程:HTML 表格
HTML DOM 参考手册: Tr 对象