إعلان
تعلم الآن

HTML الوسم <table>

تعريفه

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


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

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

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

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

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

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

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم 1 18 4 مدعوم مدعوم 1.0

خصائصه

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

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 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;
}
	

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة