HTML الوسم <table>

تعريفه

نستخدم الوسم <table> لعرض جدول في الصفحة.
ملاحظة: الجدول لا يظهر أي خطوط حول الأسطر و الأعمدة الموضوعة فيه إلا إن قمت بتعديل تصميمه بواسطة CSS.

وسوم أساسية نضيفها في الجدول

بداخل الوسم <table> نستخدم الوسوم التالية بهدف تحديد طريقة بنائه:

• <tr> لإضافة سطر فيه.
• <th> لإضافة حقل عبارة عن عنوان في السطر.
• <td> لإضافة حقل عادي في السطر.

وسوم إختيارية نضيفها في الجدول

بداخل الوسم <table> يمكن إضافة الوسوم التالية بهدف تحسين طريقة ظهوره:

• <caption> لإضافة وصف للجدول.
• <colgroup> لتقسيم أعمدة الجدول لمجموعات بهدف تعديل تصميمها.
• <thead> لتجميع الأسطر التي تحتوي العناوين بهدف تعديل تصميمها.
• <tbody> لتجميع الأسطر التي تحتوي المعلومات العادية بهدف تعديل تصميمها.
• <tfoot> لتجميع الأسطر التي نضعها في آخر الجدول بهدف تعديل تصميمها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <table>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 4 أسطر و كل سطر فيه 3 خانات.

<table>
	
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Mark</th>
	</tr>
	
	<tr>
		<td>1</td>
		<td>Mhamad Harmush</td>
		<td>A</td>
	</tr>
	<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>2</td>
		<td>Rima Houssayni</td>
		<td>C</td>
	</tr>
	<!-- هنا قمنا بتعريف السطر الرابع في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>3</td>
		<td>Youssef Jabber</td>
		<td>B</td>
	</tr>
</table>
		

جرب الكود

في المثال التالي قمنا بإضافة عنوان للجدول.

<table>
	
	<tr>Final semester marks</tr>
	...
</table>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

table {
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
	border-color: gray;
}