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>
例子 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>
例子 3
如何将背景颜色添加到表格行(使用 CSS):
<table> <tr style="background-color:#FF0000"> <th> Ay</th> <th> Tasarruf</th> </tr> <tr> <td> Ocak</td> <td>¥3400</td> </tr> </table>
例子 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>
例子 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>
例子 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>
例子 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>
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 |