HTML <tr> ƙaddar

التعريف والاستخدام

الوسم يحدد سطرًا في جدول HTML.

العنصر يحتوي على واحد أو أكثر من <th> أو <td> العنصر.

يرجى أيضًا الرجوع إلى:

دليل HTML:HTML tabular

دليل مرجع HTML DOM:عنصر TableRow

دليل CSS:إعداد نمط الجدول

مثال

مثال 1

جدول بسيط يحتوي على ثلاثة أسطر HTML؛ سطر عنوان وخطان بيانات:

<table>
  
    <th>الشهر</th>
    <th>مدخرات</th>
  
  
    <td>شهر يناير</td>
    <td>￥3400</td>
  
  
    <td>شباط</td>
    <td>￥4500</td>

亲自试一试

مثال 2

كيفية التوازن المحتوى الموجود (استخدام CSS):

<table style="width:100%">
  
    <th>الشهر</th>
    <th>مدخرات</th>
  
  <tr style="text-align:right">
    <td>شهر يناير</td>
    <td>￥3400</td>

亲自试一试

مثال 3

كيفية إضافة لون الخلفية إلى سطر الجدول (استخدام CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>الشهر</th>
    <th>مدخرات</th>
  
  
    <td>شهر يناير</td>
    <td>￥3400</td>

亲自试一试

مثال 4

كيفية التوازن العمودي المحتوى الموجود (استخدام CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>الشهر</th>
    <th>مدخرات</th>
  
  <tr style="vertical-align:bottom">
    <td>شهر يناير</td>
    <td>￥3400</td>

亲自试一试

مثال 5

كيفية إنشاء عنوان الجدول:

<table>
  
    <th>اسم</th>
    <th>ایمايل</th>
    <th>الهاتف</th>
  
  
    Bill Gates
    bill.gates@example.com
    138-1234-5678

亲自试一试

مثال 6

كيفية إنشاء جدول يحتوي على عناوين:

<table>
  <caption>مدخرات الشهر</caption>
  
    <th>الشهر</th>
    <th>مدخرات</th>
  
  
    <td>شهر يناير</td>
    <td>￥3400</td>
  
  
    <td>شباط</td>
    <td>￥4500</td>

亲自试一试

مثال 7

كيفية تعريف خلية الجدول التي تتجاوز سطرًا أو عمودًا:

<table>
  
    <th>اسم</th>
    <th>ایمايل</th>
    电话
  
  
    Bill Gates
    bill.gates@example.com
    138-1234-5678
    186-2345-6789

亲自试一试

全局属性

标签还支持 HTML 中的全局属性。

事件属性

标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 元素：

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

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Gudanarwa Gudanarwa Gudanarwa Gudanarwa Gudanarwa