استثمر للحياة

برمجة و تصميم و تطوير المواقع

الجداول في HTML

حجم الخط

استثمر للحياة

الجداول Tables كانت و لا تزال هي العصب الرئيسي لتنسيق صفحة فى HTML و إضفاء عليها صيغة مميزة .
كما انها تستخدم فى عرض بيانات مجدولة .

انشاء جدول

لابد ان نبدء بالوسم <table> و ننتهى بالوسم<table/> . و يمكن تحديد الاطار لجدول  بواسطة <table border="1" w>

و يبدء إي صف  في الجدول بالوسم <tr> و ينتهى بالوسم <tr/> . و العمود  أو الخلية بالوسم <td> و ينتهى بالوسم <td/>

مثال

<html>
<body>
<h4>جدول له صف واحد و عمود واحد</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>جدول مكون من صف واحد و 3 اعمدة و بدون اطار كمان</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>جدول مكون من 2 صف و 6 عمود و يا بلاش:</h4>
<table border="1">
<tr>
<td>A</td>
  <td>B</td>
  <td>C</td>
<td>D</td>
  <td>E</td>
  <td>F</td>  
</tr>
<tr>
<td>100</td>
  <td>200</td>
  <td>300</td>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
</body>
</html>

التنفيذ

investolife


 التوضيح : خد بالك و انتبه



investolife

 احتراف الجداول

 في بعض الاحيان حتى نستطيع تنظيم صفحتنا بشكل جيد نحتاج ان نحدد عرض للجدول سواء بنسبة مئوية 80% مثلا او
بالنقاط 700px . و لكن نحن لا نحتاج تحديد طول للجدول - إلا نادراً -  لان صفحة الانترنت ممتدة طولياً . فى المثال القادم
سنحدد طول و عرض للجدول و ايضا نحدد العنوان الرئيس للجدول و هو صف او عمود يحتوى على وصف للخلايا التى تليه
و يستخدم معه الوسم <th> </th>

مثل

 

<table width="150px" height="100px" border="1">
 <tr>
 <th>الاسم</th>
 <th>السن</th>
 <th>المرتب</th>
 </tr>
 <tr>
 <td>محمد</td>
 <td>20</td>
 <td>500</td>
 </tr>
 <tr>
 <td>عادل</td>
 <td>50</td>
 <td>700</td>
 </tr>
 <tr>
 <td>احمد</td>
 <td>23</td>
 <td>200</td>
 </tr>
 </table>w

 

ملحوظة : استخدمنا  width="150px"q لتحديد عرض الجدول ب 150 بكسل فقط و كان يمكن تحديد العرض ب 80% مثلا من عرض الشاشة فنكتب  width="80%" q

كما استخدمنا  height لتحديد الطول .

تنفيذه

investolife

 دمج الخلايا

مع مراعاة ان الوسم يستخدم لكتابة عنوان رئيسى للجدول . و يستخدم لها الخاصية colspan لتمتد الخلية على عمودين .

مثال

 

<h4>خلية تمتد على عمودين:</h4>
<table border="1">
<tr>
<th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

تنفيذه

investolife


أو يستخدم لها الخاصية rowspan لدمج خلية على صفين


مثال

 

<h4>خلية تمتد على صفين:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

تنفيذه

i

 ادراج جدول داخل جدول

 

<html>
<body>
<table border="1">
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
  </td>
  <td>This cell contains a table:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>
<li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

تنفيذه


investolife

 

الشرح

investolife

 

 كما يمكن وضع قائمة مرتبة داخل خلية جدول و سنشرحها لها مع شرح القوائم Lists  .

 لضبط المسافة بين الخلايا cellspacing
مثال

 

<table border="1"  cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

تنفيذه

 ترك مسافة بين الكتابة و اطار الجدول cellpadding


مثال

 

<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

 

تنفيذه

investolife

 انواع الاطارات و اشكالها

مثال

 

<html>
<body>

<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support 
the "frame" attribute.
</p>

<h4>With frame="border":</h4>
<table frame="border">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="box":</h4>
<table frame="box">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="void":</h4>
<table frame="void">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="above":</h4>
<table frame="above">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="below":</h4>
<table frame="below">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
</body>
</html>

 

شاهد المثال

 

ثانيا ادخال جدول داخل جدول أوعى وشك 
 مثال

 

الموضوع  :  الجداول في HTML المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468