فضائيات| مكتبة الدريم بوكس | مركز رفع الصور | فضائيات نيوز
تعليم الفوتوشوب | صور الدريم بوكس | الارقام السريه لمعظم الرسيفرات | أكواد الألوان

جديد فضائيات

العودة   الإبداع الفضائي > المنتديات التقنية > دورة تعلم لغة HTML للمبتدئين

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

 
LinkBack أدوات الموضوع
  #1  
قديم 12 ربيع الأول 1431هـ / 25-02-2010م, 02:34
الصورة الرمزية Sat 2010
I ♥ JoRdan

 


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

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

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

كود PHP:
<table

- الامر الاساسي في ادراج الجداول و تندرج تحته باقي الاوامر
كود PHP:
<tr

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


كود PHP:
<td

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

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

- الخاصية border
تستخدم لاضافة حدود للجدول وتحديد سماكتها
وتستخدم كالتالي :
كود PHP:
<table border="x"


مثال
كود PHP:
<table border="5"

الجداول و تنسيقها في لغة الــ html
- خاصية العرض width
نستخدم هذه الخاصية لتحديد عرض الجدول
وتستخدم كالتالي :
كود PHP:
<table width="xxx"

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

كود PHP:
<table width="20%">‎ 



مثال
كود PHP:
<table width="80%">‎ 


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

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


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

- cellspacing
نستخدم هذه الخاصية لتحديد المسافة بين كل خلية من خلايا الجدول
وتستخدم كالتالي :
كود PHP:
<table cellspacing="10"



- cellpadding
نستخدم هذه الخاصية لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية
وتستخدم كالتالي :
كود PHP:
<table cellpadding="10"



- align
نستخدم هذه الخاصية لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
وتستخدم كالتالي :
كود PHP:
<table align="Left"

كود PHP:
<table align="right"



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

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



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

- valign

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

مثال
كود PHP:
<tr valign="top"

كود PHP:
<tr valign="middle"

كود PHP:
<tr valign="bottom"

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

- 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

الصور المرفقة
نوع الملف: gif 2-25-2010 1-21-24 AM.gif‏ (11.4 كيلوبايت, المشاهدات 6093)
نوع الملف: gif 2-25-2010 1-30-15 AM.gif‏ (2.5 كيلوبايت, المشاهدات 6023)
نوع الملف: gif 2-25-2010 1-33-20 AM.gif‏ (3.7 كيلوبايت, المشاهدات 5989)
نوع الملف: gif 2-25-2010 1-49-07 AM.gif‏ (2.4 كيلوبايت, المشاهدات 6015)
نوع الملف: gif 2-25-2010 1-56-52 AM.gif‏ (2.7 كيلوبايت, المشاهدات 6105)



من مواضيعى في فضائيات تم رسميا صدور النسخة 4.1.3 الرسمية في منطقة الأعضاء - vBulletin : vBulletin 4.1.3 Now Available
شرح بالصوره تشغيل الجي بوكس علي صور ® PLi
النوفا من جديد على الجاما شحنة بتاريخ 2/12/2008
احدث اصدارات اجهزة سوني سات بتاريخ 18/7/2008 مع البولسات والاب سات
تفعيل او تعطيل المتواجدين الان
SoftCam All Strong Digi TV 1-6-2009
قديم 30 جمادى الأولى 1431هـ / 13-05-2010م, 15:59   رقم المشاركة : [3]
حبيب أبو زكريا
 

افتراضي

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

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




من مواضيعى في فضائيات MGcamd 1.35 For GEMINI
صورة merlin3 oe2.0 من تعديلي بنكهة السرعه والثبات
EDG-Nemesis-4.4_DM500 المعربة والخاصة بهذا المنتدى
صورة gemini 470 مع اميو crombocam لرواد الابداع الفضائي
صورة Evolution2.2 معدله ورائعه وقويه
صورة PLi®Jade3 سكن Xline_iolite وإنفراد بالجديد والحصري,Mgcamd1.35a &CCcam,2.1.4/CCcamInfo
exclusive غير متواجد حالياً  
قديم 18 رمضان 1431هـ / 27-08-2010م, 23:14   رقم المشاركة : [4]
عضو جديد
 

افتراضي

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




booop غير متواجد حالياً  
قديم 18 جمادى الأولى 1432هـ / 21-04-2011م, 02:54   رقم المشاركة : [6]
عضو جديد
 

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

يسلمووووووو




من مواضيعى في فضائيات الان الترددات: على برنامج و احد مع كرك .
سرين عبد الله غير متواجد حالياً  
قديم 18 جمادى الأولى 1432هـ / 21-04-2011م, 13:28   رقم المشاركة : [7]
نائب المدير العام
 

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

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

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




من مواضيعى في فضائيات باكب خاص بمنتدى ألإبداع الفضائي لدريم بوكس s500 العادي
أحدث إصدار SRT Loader V:1.9.3
Gemini² Project 4.0 DM8000
•• أحدث صور OoZooN CVS 09.06.29 | DM8000
•• أحدث صور OoZooN CVS 280209 Full| DM7025
••cccaminfo² 0.7.1
•ADD• غير متواجد حالياً  
قديم 11 رجب 1432هـ / 12-06-2011م, 13:05   رقم المشاركة : [9]
موقوف
 

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

fhv; hggi td;l




مودلاير غير متواجد حالياً  
قديم 11 رجب 1432هـ / 12-06-2011م, 13:06   رقم المشاركة : [10]
موقوف
 

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

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




مودلاير غير متواجد حالياً  
قديم 25 محرم 1433هـ / 20-12-2011م, 10:38   رقم المشاركة : [11]
عضو جديد
 

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

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




top secret غير متواجد حالياً  
قديم 18 ربيع الأول 1433هـ / 10-02-2012م, 12:40   رقم المشاركة : [12]
HD1
عضو جديد
 

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

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




من مواضيعى في فضائيات لمشاهدة قنوات الجزيرة الرياضية وأبوظبي الرياضية عن طريق vlc
HD1 غير متواجد حالياً  
قديم 17 جمادى الأولى 1434هـ / 28-03-2013م, 17:06   رقم المشاركة : [13]
موقوف
 

افتراضي رد: الجداول و تنسيقها في لغة ال html

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




فيانكوميجا غير متواجد حالياً  
قديم 12 ربيع الثاني 1436هـ / 1-02-2015م, 20:11   رقم المشاركة : [14]
عضو جديد
 

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

شكرا لك

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




al3aredh غير متواجد حالياً  

الكلمات الدلالية
, , , , ,

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


أدوات الموضوع



الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن » 08:16.
Powered by vBulletin
.Copyright ©2000 - 2017, Jelsoft Enterprises Ltd

تابعنا على الفيس بوك جديد مواضيع المنتدى تابعنا على تويتر Google+‎
أضغط اعجبنى ليصلك جديدنا على الفيس بوك