تگ <td> HTML
- صفحه قبل <tbody>
- صفحه بعدی <template>
التعريف والاستخدام
<td> تعريف العنصر <td> هو خلية بيانات قياسية في جدول HTML.
يوجد نوعان من الخلايا في جدول HTML:
- خلية عنوان - تحتوي على معلومات العنوان (استخدام <th> إنشاء العنصر)
- خلية بيانات - تحتوي على بيانات (استخدام
<td>إنشاء العنصر)
بالتأكيد،<td> النص في العنصر عادي، ومحاذاة يسارًا.
النص في علامة <th> مكتوب بشكل افتراضي كثقيل ومركز.
انظر أيضًا:
دليل HTML:جداول HTML
دليل مرجع HTML DOM:مثل TableData
دليل CSS:تعيين أنماط الجدول
مثال
مثال 1
جداول HTML بسيطة، تحتوي على سطرين وأربع خلايا جدول:
<table>
<tr>
<td>خلية A</td>
<td>خلية B</td>
</tr>
<tr>
<td>خلية C</td>
<td>خلية D</td>
</tr>
</table>
مثال 2
كيفية التسوية <td> المحتوى (باستخدام CSS)
<table style="width:100%">
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr>
<td>يناير</td>
<td style="text-align:right">￥3400</td>
</tr>
<tr>
<td>فبراير</td>
<td style="text-align:right">￥4500</td>
</tr>
</table>
مثال 3
كيفية إضافة لون الخلفية إلى خلية جدول (استخدام CSS):
<table>
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr>
<td style="background-color:#FF0000">يناير</td>
<td style="background-color:#00FF00">¥3400</td>
</tr>
</table>
مثال 4
كيفية ضبط طول خلية الجدول باستخدام CSS
<table>
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr>
<td style="height:100px">يناير</td>
<td style="height:100px">¥3400</td>
</tr>
</table>
مثال 5
كيفية تحديد عدم تبديل السطر داخل خلية الجدول (باستخدام CSS)
<table>
<tr>
<th>الشعر</th>
</tr>
<tr>
<td style="white-space:nowrap">千里江陵一日还，两岸猿声啼不住，轻舟已过万重山。</td>
</tr>
</table>
مثال 6
كيفية التثبيت بشكل مائل <td> المحتوى (باستخدام CSS)
<table style="width:50%;">
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">يناير</td>
<td style="vertical-align:bottom">¥3400</td>
</tr>
</table>
مثال 7
كيفية ضبط عرض خلية الجدول باستخدام CSS
<table style="width:100%">
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr>
<td style="width:70%">يناير</td>
<td style="width:30%">¥3400</td>
</tr>
</table>
مثال 8
كيفية إنشاء عنوان الجدول
<table>
<tr>
<th>الاسم</th>
<th>البريد الإلكتروني</th>
<th>هاتف</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
</tr>
</table>
مثال 9
كيفية إنشاء جدول يحتوي على عناوين
<table>
<caption>المدخرات شهريا</caption>
<tr>
<th>الشهر</th>
<th>المدخرات</th>
</tr>
<tr>
<td>يناير</td>
<td>¥3400</td>
</tr>
<tr>
<td>فبراير</td>
<td>¥4500</td>
</tr>
</table>
مثال 10
كيفية تعريف خلية جدول تعبر عن صفوف أو أعمدة متعددة:
<table>
<tr>
<th>الاسم</th>
<th>البريد الإلكتروني</th>
<th colspan="2">هاتف</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>
ویژگی
| ویژگی | مقدار | توضیح |
|---|---|---|
| colspan | عدد | تعیین تعداد ستون‌هایی که سلول باید به آن‌ها برسد. |
| headers | header_id | تعیین یک یا چند سلول عنوان مرتبط با سلول. |
| rowspan | عدد | تنظیم تعداد ردیف‌هایی که سلول باید به آن‌ها برسد. |
ویژگی‌های جهانی
<td> این تگ‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.
ویژگی‌های رویداد
<td> این تگ‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.
تنظیمات CSS پیش‌فرض
بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <td> عنصر:
td {
display: table-cell;
vertical-align: inherit;
}
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبل <tbody>
- صفحه بعدی <template>
