تطبيق وصل wassll لمتابعة مخصصات المحروقات

الجداول في HTML

الجداول ( Tables ) تسمح بعرض البيانات بشكل مرتب و جميل و مفهوم و مقسم لأعمدة و أسطر.

لإنشاء جدول ( Table ) نستخدم وسم الجداول <table> </table> و هو الوسم الرئيسي لإدراج الجداول.

كما نعرف جميعنا أن الجداول تُمثِّل الدور الأكبر في صفحات الويب أي أن وسم <table> هو وسم تعريف الجداول داخل صفحات الويب.

و يملك هذا الوسم عدة وسوم معه يتم إستخدامهم بداخل الوسم <table> للحصول على جدول جيد و جذاب و من هذه الوسم:

1. وسم <tr> </tr> هو المسؤول عن إدارج الصفوف في الجدول و هو إختصار للمصطلح Table Row.
2. وسم <td> </td> هو الوسم المسؤول عن إدراج الخلايا داخل الصفوف و تعريف محتويات كل خلية وهو إختصار Table Data.
3. وسم <th> </th> يتم إستخدامه من أجل إضافة خانة في السطر و هي تمثل عنوان, أي أن النص الذي نقوم بوضعه فيها يظهر بخط عريض في المنتصف.

هذه هي الوسوم التي نبدأ بها لإدراج الجداول, دعونا نأخذ بعض الأمثلة و شرح كل مثال على حدى.

مثال 1

<table>
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
</table>

بعد إدراج بداية الوسم <table> ونهاية الوسم </table> هناك سؤالين ينبغي الإجابة عنهم وهما:

1. كم عدد الصفوف التي نريدها في الجداول؟
2. كم عدد الخلايا داخل كل صف؟

في المثال السابق قٌمنا بإنشاء جدول يوجد به صفين عن طريق الوسم <tr> أي أنه الوسم المسؤول عن إدراج الصفوف داخل الجدول و يُستخدَم الوسم <tr> بعدد الصفوف التي نُريدها.

قُمنا بإنشاء صفين يجب إضافة الوسم <tr> مرتين و إذا كنت اُريد إنشاء ثلاث صفوف يجب كتابة وسم <tr> ثلاث مرات.

بعد إنشاء الصفوف يجب علينا تحديد الخلايا في كل صف و في المثال السابق قُمنا بإنشاء خليتين داخل كل صف عن طريق الوسم <td>.

و بنفس عدد الخلايا التي نُريدها يجب إضافة الوسم <td> في المثال السابق قمنا بإنشاءه بإضافة الوسم <td> مرتين.

الخصائص التي تستخدم مع الوسم <table>

لكل وسم من الوسوم السابقة خصائص خاصة به و هي التي تُحدد جمال الجدول أو الصف أو الخلايا.

أشكال معرفة التعامل مع الجداول

1. مستوى الجدول ككل.
2. مستوى الصفوف ككل أو كل صف على حدى.
3. مستوى الخلايا ككل أو كل خلية على حدى.

لكن في ظل كل تلك المستويات التي تستخدم مع الخصائص لكل وسم هناك خصائص مشتركة تُستخدَم مع كل الوسوم.

• الخاصية border: تقوم بإضافة حدود للجدول و تحديد سماكتها و القيمة الإفتراضية لها هي الصفر 0 و كما يمكنك التحكم في سمك الجدول من خلال البيكسل px.
• الخاصية width: تستخدم لتحديد عرض الجدول ككل و هنا إسلوبين لتحديد عرض الجدول من خلال النسبة المئوية أو من خلال البيكسل.
• الخاصية height: تستخدم لتحديد إرتفاع الجدول ككل من خلال النسبة المئوية أو البيكسل.
• الخاصية cellspacing: تتحكم هذه الخاصية في تحديد المسافات بين كل خلية من خلايا الجدول و يتحكم بها بالبيكسل.
• الخاصية cellpadding: تستخدم لتحديد المسافة الفاصلة بين الحدود و بداية النص في كل خلية أو نقل تحديد حجم الهامش لخلايا الجدول.
• الخاصية align: هذه الخاصية تتحكم في مكان الجدول على المتصفح سواء على اليمين و اليسار و قيمها left و right.
• الخاصية bgcolor: تستخدم في تحديد لون خلفية الجدول كاملاً.

مثال 2

<table border="10" width="50%" height="50px" cellpadding="10"
align="left" bgcolor="yellow">
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
</table>

أضفنا جدول ووضعنا له بعض الخصائص التي تعرفنا عليها سابقاً و بداخل الجدول كتبنا كلمة Muhammad في كل خلية.

الوسم <tr> في الجداول HTML

كما تعرفنا على أن وسم <tr> هو الوسم المستخدم في إدراج الصفوف داخل الجداول و يتم إضافة هذا الوسم بعدد الصفوف التي نريدها داخل كل الجداول.

سوف نتعرف على الخصائص المستخدمة مع الوسم <tr> بالإضافة إلى بعض الأمثلة لتسهيل التعامل مع الصفوف داخل الجداول.

الخصائص المستخدمة مع الوسم <tr>

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

1. خاصية align: تستخدم لتحديد محاذاة النص أُفقياً داخل الخلايا التي يتكون منها الصف و القيم المستخدمة مع هذه هي (left, center, right).
2. خاصية valign: تستخدم لتحديد المحاذاة العمودية للنص داخل خلايا الصف, إما أعلى أو أسفل أو في المنتصف أو على إمتداد الخط الأساسي و يأخذ القيم (top, bottom, middle, baseline).
3. خاصية bgcolor: تُستخدَم لتحديد لون الخلفية للخلايا التي يتكون منها الصف و هنا يتم تجاهل لون الخلفية المحدد للوسم <table> و يتم تطبيق اللون المحدد.

بعد أن تعرفنا على الوسم <tr> و الخصائص المستخدمة معه, يجب الآن تطبيق بعض الأمثله للتوضيح اكثر في التعامل مع الوسم <tr>.

مثال 3

<table border="5" width="50%" height="50%">
	<tr align="left">
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr align="right">
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr align="center">
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
</table>

قمنا بإنشاء جدول يتكون من ثلاث صفوف و إثنان من الخلايا داخل كل صف و كما قمنا بإضافة بعض الخصائص على الوسم الرئيسي المستخدم في استحضار الجداول <table>.

و قمنا بإضافة طول الجدول يساوي 50% و كما قمنا بإضافة عرض الجدول 50% و إضافة محاذاة حول الجدول بنسبة 5px.

و إستخدمنا مع الوسم الخاص في إستحضار الصفوف داخل الجداول وهو <tr> في الصف الأول.

و قمنا بإعطاء الخاصية ALIGN القيمة left لتكون الخلايا على يسار الصف.

و في الصف الثاني قُمنا بإعطاء خاصية ALIGN قيمة right لتكون الخلايا على يمين الصف.

و قمنا بإضافة نفس الخاصية ALIGN للصف الثالث والقيمة center لتكون الخلايا في منتصف الصف و سيكون الناتج في المتصفح بالشكل.

الوسم <td> في HTML

الوسم <td> هو المسؤول عن إدراج الخلايا داخل الصف.

كما تحدثنا عن الصفوف أنه يجب إضافة الوسم <tr> بعدد الصفوف في الجداول.

و هو لا يختلف عن وسم إدراج الخلايا داخل الصفوف عن الوسم <tr> و بذلك يجب إضافة الوسم <td> بعدد الخلايا التي نريدها داخل الصف.

إذا كنت تريد خليتين داخل كل صف, يجب إضافة الوسم <td> مرتين داخل الوسم <tr>.

الخصائص المستخدمة مع الوسم <td> لغة HTML

توجد خصائص عديدة يتم إستخدامها مع الوسم <td> و هذه الخصائص هي:

1. الخاصية align: تحدد محاذاة النص في الخلفية أفقياً و تأخذ القيم (left, right. center).
2. الخاصية valign: تحدد المحاذاة العمودية للنص و تأخذ القيم (top, middle, bottom, baseline).
3. الخاصية width: تحدد عرض الخلفية و يتم ذلك بكتابة القيمة المباشرة للعرض المطلوب و تتحكم في العرض عن طريق البيكسل أو النسبة المئوية حسبما يفضل المبرمج.
4. الخاصية height: تحدد الإرتفاع المطلوب و يتم أيضاً بكتابة القيمة المباشرة للإرتفاع المطلوب و تتحكم في الإرتفاع عن طريق البيكسل أو النسبة المئوية.
5. الخاصية bgcolor: تحدد لون خلفية الخلية و تحدثنا عن تلك الخاصية سابقاً في دروس سابقة.
6. الخاصية colspan: تقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أٌفقياً, ويكون شكلها كالتالي شريطتاً بمحل حرف "t" نحدد الخلاية الذي نريد دمجها.
7. الخاصية rowspan: تقوم بدمج الخلية مع العدد المطلوب من الخلاية التي تليها عمودياً.

مثال 4

سنقوم بإنشاء جدول به ثلاث صفوف و داخل الجدول ثلاث خلاية بداخل كل صف.

<table border="5">
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
	<tr>
		<td>Muhammad</td>
		<td>Muhammad</td>
	</tr>
</table>

قمنا بإنشاء جدول عن طريق الوسم المسؤول لإدراج الجداول وهو الوسم <table>.

كما قمنا بإنشاء ثلاث صفوف داخل الجدول عن طريق الوسم المسؤول لإدراج الصفوف داخل الجدول وهو الوسم <tr> ويجب كتابة الوسم <tr> بعدد الصفوف التي نريدها.

و قمنا بإنشاء ثلاث خلايا داخل كل صف عن طريق الوسم المسؤول لإدراج الخلايا داخل الصف وهو <td>.

و يجب تكرار كتابة الوسم <td> بعدد الخلايا التي نريدها.

في المثال السابق لم نقم بإسناد اي خاصية للخلاية, سوف نأخذ مثال آخر يوضح الخصائص.

مثال 5

<table border="5" width="300" height="100">
	<tr>
		<td align="left">tech</td>
		<td align="center">tech</td>
		<td align="right">tech</td>
	</tr>
	<tr>
		<td width="50px">tech</td>
		<td height="50px">tech</td>
		<td bgcolor="#909090">tech</td>
	</tr>
	<tr>
		<td>tech</td>
		<td>tech</td>
		<td>tech</td>
	</tr>
</table>

قمنا بإنشاء جدول عن طريق الوسم المسؤول لإدراج الجداول وهو الوسم <table> و حددنا له بعض الخصائص.

1. خاصية border وحددنا لها القيمة 5 أي يعني سيكون هناك border حول الجدول بمقدار 5.
2. عرض الجدول عن طريق خاصية width و أخذ 300px.
3. و طول الجدول عن طريق الخاصية height واخذ 100px.

قمنا بإنشاء ثلاث صفوف عن الطريق الوسم المستخدم في إدراج الصفوف داخل الجدول و هو <tr>.

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

و قمنا بإستخدام الخاصية align لتحديد مكان النص في الخليه, و في الثلاث خلايا بتحديد الخصائص, و إستخدمنا جميع القيم وهي left , center ,right.

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

اما في الصف الثاني الموجود به ايضاً ثلاث خلايا قمنا بتحديد خصائص على كل خليه.

في الخليه الأولى قمنا بتحديد خاصية width التي تقوم بتحديد عرض الخلية و سوف يكون العرض بقدار 50px في الخلية.

أما في الخليه الثانية في الصف الثاني قُمنا بتحديد طول الخلية عن طريق الخاصية height وسيكون طول الخليه بمقدار 50px.

و في الخلايا الثلاثه داخل الصف الثاني قمنا بتحديد اللون الرمادي عن طريق الخاصية bgcolor.

و في الصف الثالث قمنا بإنشاء ثلاث خلايا لكن لم نقوم بإنشاء أي خصائص على أي خلية موجوده داخل الصف الثالث.

مثال 6

<table border="5" height="100" width="300">
	<tr>
		<td colspan="2">tech</td>
	</tr>
	<tr>
		<td>tech</td>
		<td>tech</td>
		<td>tech</td>
		<td>tech</td>
	</tr>
	<tr>
		<td colspan="3">tech</td>
	</tr>
</table>

أنشأنا جدول عن طريق الوسم المسؤول لإدراج الجداولوو تم تحديد بعض الخصائص المذكورة في المثال.

و أنشأنا ثلاث صفوف داخل الجدول و يوجد داخل الصف الأول خلية واحدة لكنها تستخدم خاصية colspan و نحن نعرف أن تلك الخاصية تقوم بدمج الخلايا.

و في المثال في الصف الأول قمنا بدمج مساحة الخلية لتكون ذو مساحة خليتين وتم تحديد 2 بعدد دمج الخلايا.

و في الصف الثاني قمنا بإنشاء 4 خلايا داخل الصف لكن لم يتم تحديد أي خصائص.

أما في الصف الثالث يوجد به خلية واحدة و تم إعطاء خاصية colspan3 و بذلك تم دمج ثلاث خلايا في خليه واحدة.

مثال 7

<table border="5" height="100" width="300">
	<tr>
		<td rowspan="4">tech</td>
		<td>tech</td>
	</tr>
	<tr>
		<td>tech</td>
	</tr>
	<tr>
		<td>tech</td>
	</tr>
	<tr>
		<td>tech</td>
	</tr>
</table>

أنشأنا جدول يوجد به أربع صفوف

الصف الأول يوجد خليتين لكن تم تحديد خاصية rowspan على الخلية الأولى لتقوم بدمج أربع خلايا أفقياً مع بعضهم.

و باقي الصفوف و الخلايا لم يتم تحديد أي خصائص عليها.