الإبداع الفضائي - الجداول و تنسيقها في لغة الــ html

الجداول و تنسيقها في لغة الــ html
إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جداً مثله مثل أي أداة من أدوات HTML

الاوامر الاساسيه لادراج جدول

كود PHP:

   <table>

- الامر الاساسي في ادراج الجداول و تندرج تحته باقي الاوامر

كود PHP:

   <tr>

Table Row وسوم تعريف الصف في الجدول

كود PHP:

   <td>

Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية

الخصائص التي تستخدم في تنسيق الجدول

- الخاصية border
تستخدم لاضافة حدود للجدول وتحديد سماكتها
وتستخدم كالتالي :

كود PHP:

   <table border="x">

مثال

كود PHP:

   <table border="5">

https://www.fadaeyat.co/vb/attachmen...1&d=1267050683

- خاصية العرض width
نستخدم هذه الخاصية لتحديد عرض الجدول
وتستخدم كالتالي :

كود PHP:

   <table width="xxx">

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

كود PHP:

   <table width="300">

كود PHP:

   ‎<table width="20%">‎

مثال

كود PHP:

   ‎<table width="80%">‎

https://www.fadaeyat.co/vb/attachmen...1&d=1267050909

- خاصية الارتفاع height
نستخدم هذه الخاصية لتحديد لتحديد ارتفاع الجدول
وتستخدم كالتالي :

كود PHP:

   <table height="xxx">

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

كود PHP:

   <table height="300">

كود PHP:

   <table height="20%">

مثال

كود PHP:

   <html> <head> <title> الجداول </title> </head> <body> <table border="3" width="200" height="25%"> <tr> <td> خليه </td> <td> خليه </td></tr> <tr> <td> خليه </td> <td> خليه </td> </tr> </table> </body> </html>

- cellspacing
نستخدم هذه الخاصية لتحديد المسافة بين كل خلية من خلايا الجدول
وتستخدم كالتالي :

كود PHP:

   <table cellspacing="10">

- cellpadding
نستخدم هذه الخاصية لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية

وتستخدم كالتالي :

كود PHP:

   <table cellpadding="10">

- align
نستخدم هذه الخاصية لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left

وتستخدم كالتالي :

كود PHP:

   <table align="Left">

كود PHP:

   <table align="right">

https://www.fadaeyat.co/vb/attachmen...1&d=1267050129

- bgcolor
نستخدم هذه الخاصية لتحديد لون الخلفية للجدول و تستطيع أختيار اللون أما بالاسماء أو عن طريق الــ hex كود

وتستخدم كالتالي :

كود PHP:

   <table bgcolor="#666633">

خصائص الخلايا

- align

نستخدم هذه الخاصية لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي
center = الوسط
left = اليسار
right = لليمين

وتستخدم كالتالي :

كود PHP:

   <td align="xxxxx">

مثال

كود PHP:

   <td align="center">

كود PHP:

   <td align="left">

كود PHP:

   <td align="right">

https://www.fadaeyat.co/vb/attachmen...1&d=1267051789

- valign

نستخدم هذه الخاصية لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي:
bottom = القاع
middle = الوسط
top = الاعلى

وتستخدم كالتالي :

كود PHP:

   <tr valign="xxxxx">

مثال

كود PHP:

   <tr valign="top">

كود PHP:

   <tr valign="middle">

كود PHP:

   <tr valign="bottom">

https://www.fadaeyat.co/vb/attachmen...1&d=1267052256

- bgcolor
نستخدم هذه الخاصية لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <table> ويتم تطبيق اللون المحدد هنا في هذه الخاصيه .و تستطيع أيضا أختيار اللون أما بالاسماء أو عن طريق الــ hex كود

وتستخدم كالتالي :

كود PHP:

<tr bgcolor="xxxxx">

مثال

كود PHP:

<tr bgcolor="#666633">

- width
نستخدم هذه الخاصية لتحديد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية

- height
نستخدم هذه الخاصية لتحديد الإرتفاع المطلوب للخلية

- colspan
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً
وتستخدم كالتالي :

كود PHP:

   <td colspan="n">

حيث n هو عدد الخلايا التي سيتم دمجها

- rowspan
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً

وتستخدم كالتالي :

كود PHP:

   <td rowspan="n">

حيث n هو عدد الخلايا التي سيتم دمجها

- caption

الوسوم الأخيرة المستخدمة في الجداول هي <caption> ... <‎/caption> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <table> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.
وتستخدم كالتالي :

كود PHP:

   <caption>عنولت الجدول هنا<‎/caption>

مثال

كود PHP:

    <caption>تعديلات صور الدريم بوكس<‎/caption>