دليل مرجعي لHTML

جميع علامات HTML

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

HTML: <table> العلامة

مثال على الإنترنت

عرضان لجدول HTML:

مثال

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>استخدام علامة الجدول HTML (موقع دروس أساسية للإنترنت oldtoolbag.com)</title>
</head>
<body>
<table border="1">
　　<tr>
　　　　<th>البند</th>
　　　　<th>الكمية</th>
　　</tr>
　　<tr>
　　　　<td>البنان</td>
　　　　<td>5</td>
　　</tr>
　　<tr>
　　　　<td>البرتقال</td>
　　　　<td>$17</td>
　　</tr>
</table>
<br>
<table border="1">
　　　　<thead>
　　　　　　　　<tr>
　　　　　　　　　　　　<th colspan="2">رأس الجدول</th>
　　　　　　　　</tr>
　　　　</thead>
　　　　</thead>
　　　　　　　　<tr>
　　　　　　　　　　　　<td>جسم الجدول</td>
　　　　　　　　　　　　<td>مع عمودين</td>
　　　　　　　　</tr>
　　　　</tbody>
</table>
</body>
</html>

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

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

IEFirefoxOperaChromeSafari

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

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

علامة <table> تعرف جدول HTML

تتكون جدول HTML من علامة <table>، واحدة أو أكثر <tr>、<th> و <td> العلامات.

يحدد علامة <tr> صف الجدول، يحدد علامة <th> رأس الجدول، ويحدد علامة <td> خلية الجدول.

قد تتضمن جداول HTML معقدة أيضًا عناصر <caption>، <col>، <colgroup>، <thead>، <tfoot>، و <tbody>.

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

في HTML5، يدعم فقط خاصية "border"، ويُسمح باستخدام القيمة "1" أو "" فقط.

الخصائص

الخصائص	القيمة	الوصف
align	left center right	HTML5 لا يدعمها. تم إزالة HTML 4.01. تحديد كيفية تلقي الجدول للتناسب مع العناصر المحيطة به.
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 لا يدعمها. تم إزالة HTML 4.01. تحديد لون الخلفية للجدول.
border	1 ""	تحديد ما إذا كانت خلية الجدول تحمل حافة.
cellpadding	pixels	HTML5 لا يدعمها. تحديد الفضاء بين الحواف والنصوص.
cellspacing	pixels	HTML5 لا يدعمها. تحديد الفضاء بين الخلايا.
frame	void 　above 　below 　hsides 　lhs 　rhs 　vsides 　box 　border	HTML5 لا يدعمها. تحديد الجزء المرئي من الحواف الخارجية.
rules	none 　groups 　rows 　cols 　all	HTML5 لا يدعمها. تحديد الجزء المرئي من الحواف الداخلية.
summary	text	HTML5 لا يدعم. يحدد تلخيص الجدول.
width	pixels 　%	HTML5 لا يدعم. يحدد عرض الجدول.

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

دعم <table> العلامة خصائص العالمية في HTML.

خصائص الأحداث

دعم <table> العلامة خصائص الأحداث في HTML.

مزيد من الأمثلة عبر الإنترنت

جدول بدون حواف
جدول بدون حواف

رأس الجدول (Heading)
هذا المثال يوضح كيفية عرض رأس الجدول.

جدول يحتوي على عنوان
هذا المثال يوضح جدولا يحتوي على عنوان (caption).

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

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

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

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

المقالات ذات الصلة

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

دليل مرجع DOM HTML:مفهوم الجدول

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