الجداول و تنسيقها في لغة الــ html

Sat 2010 · #1

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

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

كود PHP:


  
   
<table>

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

كود PHP:


  
   
<tr>

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

كود PHP:


  
   
<td>

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

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

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

كود PHP:


  
   
<table border="x">

مثال

كود PHP:


  
   
<table border="5">

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

كود PHP:


  
   
<table width="xxx">

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

كود PHP:


  
   
<table width="300">

كود PHP:


  
   
‎<table width="20%">‎

مثال

كود PHP:


  
   
‎<table width="80%">‎

- خاصية الارتفاع 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">

- 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">

- valign

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

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

كود PHP:


  
   
<tr valign="xxxxx">

مثال

كود PHP:


  
   
<tr valign="top">

كود PHP:


  
   
<tr valign="middle">

كود PHP:


  
   
<tr valign="bottom">

- 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>

مقالات ممكن أن تعجبك :

المصدر: الإبداع الفضائي - من قسم: دورة تعلم لغة HTML للمبتدئين

سلطان الغرام

دمت لنا بهذا الابداع اخى
تقديرى......

exclusive

بارك الله فيك ابو زكريا على العلم النافع والشرح الرائع

لك مني كل التقدير والاحترام

booop

شرح جبار جدا ثانكس الله يخليك لنا

eloued39004

بارك الله فيك اخي

سرين عبد الله

يسلمووووووو

•ADD•

بارك الله فيك ابو زكريا على العلم النافع والشرح الرائع

لك مني كل التقدير والاحترام

احمدحسون

بارك الله فيييييييييك

مودلاير

fhv; hggi td;l

مودلاير

بارك الله فيكم

top secret

مشكور على الفائدة

HD1

بارك الله فيك
كنت محتاج أعرف كيف طريقة المحاذاة والحمد لله وجدتها في موضوعك
مشكور

فيانكوميجا

مشكوووووووووووووووووووووووووووووور

al3aredh

شكرا لك

هل هناك طريقة لوضع اعلانات قوقل بين الصور .

	رقم المشاركة : [7]
•ADD• كبار الشخصيات	رد: الجداول و تنسيقها في لغة الــ html بارك الله فيك ابو زكريا على العلم النافع والشرح الرائع لك مني كل التقدير والاحترام
•ADD• كبار الشخصيات	من مواضيعى في فضائيات enigma2-plugin-extensions-dflash_0.20_mipsel 3.0 Release DM800se •• أحدث إصدار نسخة أصلية Release 3.0-dm500HD_Date: 20101111 •• أحدث إصدار نسخة أصلية DM7025 RELEASE 3.0.0 20101111 •• أحدث إصدار نسخة أصلية DM8000- Release 3.0 -20101111 Release-DM 800-3.0
	إقتباس

	رقم المشاركة : [9]
مودلاير موقوف	رد: الجداول و تنسيقها في لغة الــ html fhv; hggi td;l
مودلاير موقوف
	إقتباس

	رقم المشاركة : [10]
مودلاير موقوف	رد: الجداول و تنسيقها في لغة الــ html بارك الله فيكم
مودلاير موقوف
	إقتباس

	رقم المشاركة : [13]
فيانكوميجا موقوف	رد: الجداول و تنسيقها في لغة ال html مشكوووووووووووووووووووووووووووووور
فيانكوميجا موقوف
	إقتباس

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق

الجداول و تنسيقها في لغة الــ html

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

الجداول و تنسيقها في لغة الــ html