الجداول

مقدمة في لغة تصميم الصفحات
الألوان	الجداول	الأساسيات	المقدمة	صفحة البداية
الوصلات التشعبية والميتا	النماذج	الصور والرسوم	الفقرات والقوائم	الخطوط

الجداول

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

<TABLE>..... </TABLE>	وسوم بداية ونهاية الجدول
<TR>..........</TR>	وسوم بداية ونهاية الصف في الجدول
<TD> محتوى الخلية </TD>	وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية

ولتوضيح ما سبق سوف أقوم بإنشاء جدول يحتوي على صفين واربعة خلايا ( أعمدة )وأرجو ملاحظة الأتي :

- سوف أقوم بكتابة الوسم <table> أولاً ثم اضع وسم الصف <tr> وبداخل وسم الصف اضع الوسم التالي <td </td> مكرراً على حسب عدد الخلايا ( الأعمدة ) داخل الصف ثم اغلق الصف بالوسم </tr> وأكرر نفس العملية بالنسبة للصف الثاني ثم في النهاية أغلق الجول يالوسم </table> كما في المثال التالي مع ملاحظة إن هذا الملف لم نحدد فيه عرض الجدول او الصفوف أو الخلايا وسوف نتطرق إلى هذا الأمر فيما بعد

الخصائص ( عرض الجدول ، عرض وارتفاع الصفوف والأعمدة وغير ذلك ) التي تستخدم مع وسوم الجدول <table>...........</table>

تقوم هذهالخاصية بإضافة حدود للجدول وتحددي سماكتها وتكون في بداية وسم الجدول كما في المثال التالي : <"table border="1 >	BORDER
تستخدم هذه الخاصية لتحديد عرض الجدول ككل وهناك اسلوبين إما تحديد بصورة مباشرة او نسبياً بكتابة رقم مئوي يحدد عرض الجدول حسب عرض نافدة التصفح كما في المثالين التاليين عرض بالتمام أي محدد بالبكسل <table width="600"> عرض نسبي حسب حجم الشاشة وهو الشائع في التصميم <table width="50%">	WIDTH
يحدد ارتفاع الجدول ويكون تحديد الأرتفاع من خلال قيمة مطلقة تحدد الأرتفاع بالبكسل أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح ومثال على ذلك : <"table height ="500> <"table height ="100%>	HEIGHT
لتحديد المسافة بين كل خلية من خلايا الجدول: مثال على ذلك <"table cellspacing="0">	CELLSPACING
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية : مثال على ذلك <"table cellpadding ="0 >	CELLPADDING
لتحديد محاداة الجدول في الصفحة يميناً أو يساراَ : مثال على ذلك أو <table aling = "left"> <div align="left">	ALIGN
يستخدم هذا الوسم لتحديد لون الخلفية : <table bgcolor="#FFFFFF"> وفي حالة كون الخلفية صورة فسوف يكون الوسم بالشكل التالي <table bgcolor="الرابطة الخاصو بالصورة ">	BGCOLOR

المثال التالي يوضح جدول محاداته في منتصف الصفحة ومقياس حده يساوي 1 والمسافىة بين خلاياه تساوي 3 وعرضه يساوي 50% ولون خلفيته أحمر ويتكون من صف واحد

تكون النتيجة كما يلي :