كورس HTML

شرح الوسم tfoot و th و thead و time و الوسم Title في html

صورة
صدام العويري
اخر تحديث :

شرح الوسم <tfoot> في HTML

تعريف الوسم <tfoot>

نستخدم الوسم <tfoot> لتجميع الأسطر الموضوعة في آخر الجدول بهدف تعديل تصميمها بواسطة CSS لتظهر بشكل مختلف عن باقي الأسطر الموضوعة فيه.


معلومة تقنية

في العادة عند تجميع السطر أو الأسطر الأخيرة في الجدول بداخل هذا الوسم فإننا نقوم بتجميع باقي الأسطر بداخل وسوم أخرى هي الوسم <thead> الذي نضع فيه السطر أو الأسطر التي تعتبر بمثابة عناوين فيه, و الوسم <tbody> الذي نضع فيه الأسطر التي تعتبر كمعلومات عادية في الجدول.

دعم المتصفحات للوسم <tfoot>

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

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

خصائص الوسم <tfoot>

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

إستخدام الوسم <tfoot>

في المثال التالي قمنا بإنشاء جدول يتألف من 5 أسطر مع تجميع أسطره على النحو التالي:

  • السطر الأول وضعناه بداخل وسم <thead> لأنه يحتوي عنواين أسطر الجدول.

  • الأسطر التي تليه وضعناه بداخل وسم <tbody> لأنه تحتوي معلومات الجدول العادية.

  • السطر الأخير وضعناه بداخل وسم <tfoot> لأنه يحتوي النتائج النهائية لمعلومات الجدول.

جميع الخانات التي قمنا بوضعها في الجدول سيتم إعطاؤها تصميم بشكل تلقائي نسبةً لكود التصميم الذي وضعناه للوسم <thead> و <tbody> و <tfoot> التي وضعناها بداخلها.

مثال

				<table>
				<!-- <thead> السطر الأول في الجدول وضعناه بداخل الوسم -->
				<thead>
				<tr>
				<th>ID</th>
				<th>Name</th>
				</tr>
				<thead>
				<!-- <tbody> الأسطر التي تحتوي معلومات عادية في الجدول وضعناها بداخل الوسم -->
				<tbody>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				</tr>
				<tr>
				<td>2</td>
				<td>rima</td>
				</tr>
				<tr>
				<td>3</td>
				<td>youssef</td>
				</tr>
				</tbody>
				<!-- <tfoot> السطر الأخير في الجدول وضعناه بداخل الوسم -->
				</tfoot>
				<tr>
				<td>Total</td>
				<td>3 users</td>
				</tr>
				</tfoot>
				</table>

التصميم الإفتراضي للوسم <tfoot>

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

			  tfoot {
			  display: table-row-group;
			  vertical-align: middle;
			  border-color: inherit;
			  }

شرح الوسم <th> في HTML

تعريف الوسم <th>

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

دعم المتصفحات للوسم <th>

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

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

خصائص الوسم <th>


الخاصية abbr

يمكن إضافتها للوسم لوضع إسم مختصر للوسم, هذا الإسم لا يظهر أمام المستخدم و لكنه مفيد في حال كان المستخدم يعتمد على قارئ الشاشة ( Screen Reader ) لكي يقرأ له محتوى الصفحة حيث سيقوم بقراءته له.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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


الخاصية colspan

في حال أردت جعل الخانة تظهر على أكثر من عمود في نفس السطر يجب إضافة هذه الخاصية للوسم و إعطاءها رقم يمثل على كم عمود ستظهر كقيمة.
كمثال بسيط, إذا قلت <th colspan="2"> فهذا يجعل الخانة تظهر على عمودين في نفس السطر.

ملاحظة: أكبر قيمة يمكن تمريرها لها هي 1000, و في حال قمت بوضع قيمة أكبر من ذلك سيتم وضع القيمة الإفتراضية له و التي تساوي 1.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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


الخاصية rowspan

في حال أردت جعل الخانة تظهر على أكثر من سطر تحت نفس العمود يجب إضافة هذه الخاصية للوسم و إعطاءها رقم يمثل على كم سطر ستظهر كقيمة.
كمثال بسيط, إذا قلت <th rowspan="2"> فهذا يجعل الخانة تظهر على سطرين تحت نفس العمود.

ملاحظة: أكبر قيمة يمكن تمريرها لها هي 1000, و في حال قمت بوضع قيمة أكبر من ذلك سيتم وضع القيمة الإفتراضية له و التي تساوي 1.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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


الخاصية scope

يمكن إضافتها للوسم بهدف تحديد ما هو دوره بالضبط في الجدول و على أساس دوره يمكن تطبيق كود CSS عليه ليظهر بالشكل المناسب.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية scope لتحديد ما هو دور الخانة.

القيمة معناها
row للإشارة إلى أنها عنوان لسطر.
col للإشارة إلى أنها عنوان لعمود.
rowgroup للإشارة إلى أنها عنوان يتألف من عدة أسطر.
colgroup للإشارة إلى أنها عنوان يتألف من عدة أعمدة.
auto هذه القيمة الإفتراضي في حال لم يتم وضع أي قيمة.

إستخدام الوسم <th>

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

المثال الأول

				<table>
				<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
				<tr>
				<th>ID</th>
				<th>User</th>
				<th>Phone</th>
				</tr>
				<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				</tr>
				<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				</tr>
				</table>


في المثال التالي قمنا بجعل الخانة الثالثة الموجودة في السطر الأول تظهر على عمودين.

المثال الثاني

				<table>
				<!-- في هذا السطر جعلنا الخانة الأخيرة تظهر على عامودين في نفس السطر -->
				<tr>
				<th>ID</th>
				<th>User</th>
				<th colspan="2">Phone</th>
				</tr>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				<td>03986532</td>
				</tr>
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				<td>76124578</td>
				</tr>
				<tr>
				<td>3</td>
				<td>hala</td>
				<td>76804712</td>
				<td></td>
				</tr>
				</table>


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

المثال الثالث

				<table>
				<!-- في هذا السطر جعلنا الخانة الأولى و الثانية يظهران على سطرين تحت نفس
				العمود, كما أننا جعلنا الخانة الأخيرة فيه تظهر على عامودين في نفس السطر -->
				<tr>
				<th rowspan="2">ID</th>
				<th rowspan="2">User</th>
				<th colspan="2">Phone</th>
				</tr>
				<tr>
				<th>First</th>
				<th>Second</th>
				</tr>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				<td>70123456</td>
				<td>03986532</td>
				</tr>
				<tr>
				<td>2</td>
				<td>mira</td>
				<td>03102013</td>
				<td>76124578</td>
				</tr>
				<tr>
				<td>3</td>
				<td>hala</td>
				<td>76804712</td>
				<td></td>
				</tr>
				</table>


في المثال التالي قمنا بإضافة الخاصية scope لبعض الحقول بهدف إضافة كود CSS للحقول نسبةً لها.

المثال الرابع

				<table>
				<!-- هذه الخانات وضعناها كعنوانين في الجدول و أضفنا لها الخاصية
				حتى يتم تطبيق كود التصميم الموضوع كعنوان للأعمدة عليها scope="col" -->
				<tr>
				<th scope="col">Player</th>
				<th scope="col">Level</th>
				<th scope="col">Score</th>
				</tr>
				<!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية 
				حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها -->
				<tr>
				<th scope="row">Mhamad</th>
				<td>224</td>
				<td>50875135</td>
				</tr>
				<!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية 
				حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها -->
				<tr>
				<th scope="row">Bilal</th>
				<td>203</td>
				<td>46897655</td>
				</tr>
				<!-- scope="col" الخانة الأولى في هذا السطر أضفنا لها الخاصية 
				حتى يتم تطبيق كود التصميم الموضوع كعنوان للأسطر عليها -->
				<tr>
				<th scope="row">Sara</th>
				<td>198</td>
				<td>42159753</td>
				</tr>
				</table>

التصميم الإفتراضي للوسم <th>

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

			  th {
			  display: table-cell;
			  vertical-align: inherit;
			  font-weight: bold;
			  text-align: center;
			  }

شرح الوسم <thead> في HTML

تعريف الوسم <thead>

نستخدم الوسم <thead> لتجميع الأسطر الموضوعة كعناوين في أعلى الجدول بهدف تعديل تصميمها بواسطة CSS لتظهر بشكل مختلف عن باقي الأسطر الموضوعة فيه.


معلومة تقنية

في العادة عند تجميع السطر أو الأسطر الأولى في الجدول بداخل هذا الوسم فإننا نقوم بتجميع باقي الأسطر بداخل وسوم أخرى هي الوسم <tbody> الذي نضع فيه الأسطر التي تعتبر كمعلومات عادية في الجدول و الوسم <tfoot> الذي نضع فيه السطر أو الأسطر الأخيرة في الجدول و التي تكون بمثابة نتائج نهائية فيه.

دعم المتصفحات للوسم <thead>

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

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

خصائص الوسم <thead>

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

إستخدام الوسم <thead>

في المثال التالي قمنا بإنشاء جدول يتألف من 5 أسطر مع تجميع أسطره على النحو التالي:

  • السطر الأول وضعناه بداخل وسم <thead> لأنه يحتوي عنواين أسطر الجدول.

  • الأسطر التي تليه وضعناه بداخل وسم <tbody> لأنه تحتوي معلومات الجدول العادية.

  • السطر الأخير وضعناه بداخل وسم <tfoot> لأنه يحتوي النتائج النهائية لمعلومات الجدول.

جميع الخانات التي قمنا بوضعها في الجدول سيتم إعطاؤها تصميم بشكل تلقائي نسبةً لكود التصميم الذي وضعناه للوسم <thead> و <tbody> و <tfoot> التي وضعناها بداخلها.

مثال

				<table>
				<!-- <thead> السطر الأول في الجدول وضعناه بداخل الوسم -->
				<thead>
				<tr>
				<th>ID</th>
				<th>Name</th>
				</tr>
				<thead>
				<!-- <tbody> الأسطر التي تحتوي معلومات عادية في الجدول وضعناها بداخل الوسم -->
				<tbody>
				<tr>
				<td>1</td>
				<td>mhamad</td>
				</tr>
				<tr>
				<td>2</td>
				<td>rima</td>
				</tr>
				<tr>
				<td>3</td>
				<td>youssef</td>
				</tr>
				</tbody>
				<!-- <tfoot> السطر الأخير في الجدول وضعناه بداخل الوسم -->
				</tfoot>
				<tr>
				<td>Total</td>
				<td>3 users</td>
				</tr>
				</tfoot>
				</table>

التصميم الإفتراضي للوسم <thead>

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

			  thead {
			  display: table-header-group;
			  vertical-align: middle;
			  border-color: inherit;
			  }

شرح الوسم <time> في HTML

تعريف الوسم <time>

نستخدم الوسم <time> على النحو التالي بهدف جعل محركات البحث تفهم التاريخ و الوقت المشار إليه في النص بشكل أفضل.

			  <time datetime="hidden-time">visible-time</time>

  • مكان الكلمة visible-time نمرر النص العادي الذي سيكون عبارة عن وقت ما و الذي سيظهر في الصفحة.

  • مكان الكلمة hidden-time نمرر التاريخ و الوقت بشكل معين حتى تفهمه محركات البحث.

دعم المتصفحات للوسم <time>

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
62 ≤18 22 49 7 62 62 22 46 4 8.0

خصائص الوسم <time>

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

الأسلوب إستخدامه
yyyy لتحديد السنة فقط.
مثال: 2019
yyyy-mm لتحديد السنة و الشهر.
مثال: 2019-05
yyyy-mm-dd لتحديد السنة و الشهر و اليوم.
مثال: 2019-05-23
yy-mm لتحديد أول رقمين في السنة و الشهر.
مثال: 19-05
yyyy-Wn لتحديد السنة و رقم أسبوع محدد فيها.
مثال: 2019-W17
hh:mm لتحديد الساعة و عدد الدقائق.
مثال: 14:30
hh:mm:ss لتحديد الساعة و عدد الدقائق و الثواني.
مثال: 14:30:27
hh:mm:ss:ms لتحديد الساعة و عدد الدقائق و الثواني و أجزاء الثانية الحالية.
مثال: 14:30:27.145
yyyy-mm-ddThh:mm:ss:ms لتحديد التاريخ و الوقت بشكل دقيق جداً.
مثال: 2019-05-23T14:30:27.145
yyyy-mm-dd hh:mm:ss:ms هنا قمنا أيضاً بتحديد التاريخ و الوقت مع وضع مسافة فارغة بدل الحرف T.
مثال: 2019-05-23 14:30:27.145

إستخدام الوسم <time>

في المثال التالي قمنا بوضع التاريخ و الوقت المذكورين في النص بداخل <time>.

مثال

				The game starts at <time datetime="2020-09-01T20:00:00">20:00</time>.

التصميم الإفتراضي للوسم <time>

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

يمكنك إضافة تصميم خاص لإبراز الوقت الذي يتم ذكره داخل الوسم <time> بواسطة CSS حتى لو لم ترد ذكر التاريخ أو الوقت كالتالي.

مثال

				time {
				color: red;
				font-weight: bold;
				}

شرح الوسم <title>في HTML

تعريف الوسم <title>

نستخدم الوسم <title> بداخل الوسم <head> لتحديد عنوان الصفحة الذي سيظهر في تبويب المتصفح


معلومة تقنية

إن لم تضع عنوان للصفحة بداخل هذا الوسم فإن إسم ملف الذي يحتوي كود الصفحة هو ما سيظهر في تبويب المتصفح و هذا سيء للغاية بالنسبة للمستخدم و بالنسبة لمحركات البحث.

دعم المتصفحات للوسم <title>

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

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 مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائص الوسم <title>

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

إستخدام الوسم <title>

في المثال التالي قمنا بإضافة عنوان للصفحة بواسطة الوسوم <title>.

مثال

				<!DOCTYPE html>
				<html>
				<head>
				<title>I am changed</title>
				</head>
				</html>

التصميم الإفتراضي للوسم <title>

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

			  title {
			  display: none;
			  }

نصائح و ملاحظات

  • النص الذي تضعه بداخل الوسم <title> مهم جداً بالنسبة لمحركات البحث, لهذا حاول استخدام عنوان قد يبحث عنه المستخدم.

  • محركات البحث تظهر حوالي 50-60 حرف من النص الموضوع بداخل الوسم <title> و ليس كله إن كان أكبر من ذلك.

  • لا تقم بوضع أكثر من <title> في نفس الصفحة.

تعديل المقال
الأقسام

مقالات قد تهمك