دليل مرجعي لـ HTML

مجموعة علامات HTML

HTML: <textarea> علامة HTML: <tbody> علامة

HTML: <td> علامة

علامة <td> في HTML تعرف خلية معيارية في جدول. علامة <td> تعرف خلية تحتوي على بيانات. عادةً ما تُسمى أيضًا علامة <td>.

مثال على الخط

　جدول HTML، يحتوي على خلايا متعددة:

مثال

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>استخدام علامة td في HTML (موقع دروس أساسيات الويب oldtoolbag.com)</title>
</head>
<body>
<table border="1">
　　<tr>
　　　　<th>عنوان العمود 1</th>
　　　　<th>عنوان العمود 2</th>
　　</tr>
　　<tr>
　　　　<td>بيانات في العمود 1، السطر 2</td>
　　　　<td>بيانات في العمود 2، السطر 2</td>
　　</tr>
　　<tr>
　　　　<td>بيانات في العمود 1، السطر 3</td>
　　　　<td>بيانات في العمود 2، السطر 3</td>
　　</tr>
　　<tr>
　　　　<td>بيانات في العمود 1، السطر 4</td>
　　　　<td>بيانات في العمود 2، الصف 4</td>
　　</tr>
</table>
</body>
</html>

اختبار لمعرفة ‹/›

في هذا مثال على مستند HTML5، قمنا بإنشاء جدول باستخدام علامة <table>، والذي يحتوي على 2 عمود و4 صفوف. الصف الأول تم تعريفه باستخدام علامة <tr> الأولى. يحتوي على 2 خلية رأس معرفتين بعلامات <th>. الصف الثاني حتى الرابع يتم تعريفهما باستخدام علامات <td> لتعريف خلايا الجدول المعيارية.

توافق المتصفحات

IEFirefoxOperaChromeSafari

يدعم جميع المتصفحات الشائعة علامة <td>.

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

تعريف علامة <td> وتعليمات الاستخدام

يوجد نوعان من الخلايا في جدول HTML:

خلية رأس - تحتوي على معلومات الرأس (تُنشأ بواسطة <th> (تُنشأ بواسطة علامة <td>)
خلية معيارية - تحتوي على بيانات (تُنشأ بواسطة علامة <td>)

عادةً، النص في علامة <th> يُعرض كثخين ومركزًا.

عادةً، النص في علامة <td> هو نص متحجوز يسارًا.

إشارات وتعليمات

إشارة:إذا كنت بحاجة إلى تقسيم المحتوى عبر عدة صفوف أو أعمدة، استخدم خصائص colspan وrowspan!

الفرق بين HTML 4.01 و HTML5

لم يعد يدعمها HTML5 بعض الخصائص في HTML 4.01.

الخصائص

الخصائص	القيمة	وصف
abbr	text	لا يدعمها HTML5. تحديد النسخة المختصرة للمحتوى في الخلية.
align	left 　right 　center 　justify 　char	لا يدعمها HTML5. تحديد طريقة التوجيه الأفقية للمحتوى في الخلية.
axis	category_name	لا يدعمها HTML5. تصنيف الخلية.
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 لا يدعم ذلك. تم إزالة HTML 4.01. تحديد لون الخلفية للخلية.
char	character	لا يدعمها HTML5. تحديد الرمز الذي سيتم استخدامه للتحجيم المحتوى.
charoff	number	لا يدعمها HTML5. تحديد مقدار انحراف الرمز.
colspan	number	تحديد عدد الأعمدة التي يمكن أن يتجاوز الخلية.
headers	header_id	تحديد واحد أو أكثر من خلايا العناوين المرتبطة بالخلية.
height	pixels %	HTML5 لا يدعم ذلك. تم إزالة HTML 4.01. تحديد طول الخلية.
nowrap	nowrap	HTML5 لا يدعم ذلك. تم إزالة HTML 4.01. تحديد ما إذا كان محتوى الخلية يجب أن يُقطع.
rowspan	number	تحديد عدد الصف الذي يمكن أن يتجاوز الخلية.
scope	col 　colgroup 　row 　rowgroup	HTML5 لا يدعم ذلك. يحدد كيفية ربط خلية العنوان بخلية البيانات.
valign	top 　middle 　bottom 　baseline	HTML5 لا يدعم ذلك. يحدد ترتيب محتوى الخلية بشكل عمودي.
width	pixels %	HTML5 لا يدعم ذلك. تم إزالة HTML 4.01. يحدد عرض الخلية.

خصائص العالمية

دعم <td> علامة خصائص العالمية لـ HTML.

خصائص الحدث

دعم <td> علامة خصائص الحدث لـ HTML.

تجربة - مثال

خلايا جدول متعددة السطور أو الأعمدة
هذا المثال يوضح كيفية تعريف خلايا جدول متعددة السطور أو الأعمدة.

علامات داخل جدول
هذا المثال يوضح كيفية عرض العناصر داخل عناصر مختلفة.

مساحة الهواء حول الخلية (Cell padding)
هذا المثال يوضح كيفية استخدام مساحة الهواء حول الخلية (Cell padding) لإنشاء مساحة بين محتوى الخلية والهواء حولها.

مسافة الخلية (Cell spacing)
هذا المثال يوضح كيفية استخدام مسافة الخلية (Cell spacing) لزيادة المسافة بين الخلايا.

مقالات مرتبطة

دليل تعليمات HTML:جداول HTML

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

HTML: <textarea> علامة HTML: <tbody> علامة