22/02/2024
تعلم أساسيات HTML

الدرس الرابع عشر – الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة

الجداول HTML Tables تستخدم لتنظيم البيانات أو الداتا في صفوف وأعمدة وسنقوم بشرح طريقة انشاء الجدول وتنسيقه بطرق مختلفة بالتفصيل والأمثلة


انشاء الجداول HTML Tables

لإنشاء الجدول نستخدم العنصر <table> ، ثم لعمل الصفوف نستخدم العنصر <tr>، ولرأس الجدول نستخدم العنصر <th> ، ولكل خليه نستخدم العنصر <td> .

بشكل تلقائي سيكون النص بداخل <th> بخط ثقيل bold ويتم محاذاته للمنتصف centered .
وكذلك بشكل تلقائي سيكون النص بداخل <td> نص عادي regular ويتم محاذاته إلى اليسار left-aligned .

ملحوظة: العنصر <td> والذي يحتوي على الداتا في الجدول، يمكن كذلك أن تكون هذه الداتا نص أو صورة أو قائمة أو جداول أخرى … وهكذا.

كما فى المثال التالى:

<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

ويظهر الجدول كالتالى في المتصفح:

الجداول HTML Tables

اضافة اطار للجداول HTML Tables Border – (الجداول HTML Tables)

لإضافة اطار للجدول نستخدم خاصية CSS والتي تسمى border كما في المثال التالي:

table, th, td {
  border: 1px solid black;
}

ولا تنسى اضافة الإطار border للجدول والخلايا معا، ويظهر الجدول فى المتصفح كما فى المثال التالى:


اضافة اطار أحادى للجداول HTML Tables Collapsed Border

لجعل اطار الجدول احادي بدلا من الإطار المزدوج العادي، نستخدم خاصية CSS التى تسمى border-collapse ، كما في المثال التالي:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

وتظهر في المتصفح كالتالي:

الجداول HTML Tables

توسيع المسافة داخل خلايا الجدول HTML Table Cell Padding

المسافة الداخلية Padding هي المسافة بين محتوى الخلية واطار الخلية، إذا لم تحدد قيمة Padding سوف يتم عرض الجدول بدون مسافات داخلية. ولإضافة مسافة داخلية نستخدم خاصية CSS والتي تسمى padding كما في المثال التالي:

th, td {
  padding: 15px;
}

ويظهر الجدول في المتصفح كالتالى:

الجداول HTML Tables

محاذاة النص لليسار فى الجدول HTML Table left-align

كما وضحنا سابقا، فإن رأس الجدول تكون بشكل تلقائى بخط ثقيل ومحاذاه للمنتصف. ولجعل المحاذاه لليسار نستخدم خاصية CSS وهى text-align كالتالى كما فى المثال:

th {
  text-align: left;
}

اضافة مسافة بين خلايا الجدول وبعضها HTML Table Border Spacing

لإضافة مسافة بين خلايا الجدول نستخدم خاصية CSS والتى تسمى border-spacing كالتالى كما فى المثال:

table {
  border-spacing: 5px;
}

ويظهر الجدول فى المتصفح كالتالى:

ملحوظة: إذا كان اطار الجدول من النوع الأحادى Collapsed Border سيكون border-spacing بدون تأثير.


دمج خلايا فى أكثر من عمود للجدول HTML Table Span Columns

لجعل الخلية تمتد لأكثر من عمود، نستخدم السمة colspan كالتالى كما فى المثال:

 <table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table> 

ويظهر الجدول فى المتصفح كالتالي:

الجداول HTML Tables

دمج خلايا فى أكثر من صف للجدول HTML Table Span Rows

لجعل الخلية تمتد لأكثر من صف، نستخدم السمة rowspan كالتالى كما فى المثال:

 <table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table> 

ويظهر الجدول كالتالى فى المتصفح:

الجداول HTML Tables

اضافة نص توضيحى للجدول HTML Table Caption – (الجداول HTML Tables)

لإضافة النص التوضيحى نستخدم العنصر <caption> حيث يجب أن يكون بعد العنصر <table> مباشرة كالتالى كما فى المثال:

 <table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table> 

ويظهر الجدول فى المتصفح كالتالى:

الجداول HTML Tables


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →