HTML <tr> etiketi

Tanım ve kullanım

<tr> etiketi HTML tablosundaki satırları tanımlar.

<tr> elementi bir veya daha fazla <th> veya <td> element.

Ayrıca bkz:

HTML 教程:HTML Tablosu

HTML DOM referans el kitabı:TableRow nesnesi

CSS 教程:表格样式设置

实例

例子 1

一个简单的三行 HTML 表格;一个标题行和两个数据行:

<table>
  <tr>
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>¥4500</td>
  </tr>
</table>

Kişisel Deneyim

例子 2

如何对齐 <tr> 中的内容(使用 CSS):

<table style="width:100%">
  <tr>
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tr style="text-align:right">
    <td> Ocak</td>
    <td>¥3400</td>
  </tr>
</table>

Kişisel Deneyim

例子 3

如何将背景颜色添加到表格行(使用 CSS):

<table>
  <tr style="background-color:#FF0000">
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>¥3400</td>
  </tr>
 </table>

Kişisel Deneyim

例子 4

如何垂直对齐 <tr> 中的内容(使用 CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td> Ocak</td>
    <td>¥3400</td>
  </tr>
</table>

Kişisel Deneyim

例子 5

表格标题如何创建:

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Kişisel Deneyim

例子 6

带有标题的表格如何创建:

<table>
  <caption>Ay tasarrufları</caption>
  <tr>
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tr>
    <td> Ocak</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>¥4500</td>
  </tr>
</table>

Kişisel Deneyim

例子 7

跨多行或多列的表格单元格如何定义:

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Kişisel Deneyim

Genel Özellikler

<tr> Bu etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<tr> Bu etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <tr> Element:

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

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek