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

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;
}
	
إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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