دورة HTML5 للمبتدئين

11 – الجداول Tables t في HTML5

مدخل

الجداول عنصر مهم جدا في تصميم الصفحات عن طريقها يمكننا تقسيم الصفحة وجعلها قائمة يمين وقائمة يسار والكتير من الأشياء المفيدة التي لا غنا لك عنها كما توظح الصورة جميع الجداول في العالم هيا عبارة عن صفوف وأعمدة

rows and columns

في html نفس الشيئ في البداية نقوم بفتح الإطار العام الأي جدول وهوا المربع الخارجي عن طريق

<table>
هدا هوا الإطار الخارجي
</table>

الأن داخل الإطار توجد صفوف وأعمدة في html نقوم بإنشائها عن طريق

  • الصفوف = <tr>
  • الأعمدة = <td>

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

متال :

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

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

النتيجة :

العناصر المهمة مع الجداول :

عنصر width هوا عنصر الدي يتحكم في حجم الجدول كم يشغل من الصفحة ويكون بالنسبة المئوية

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: powderblue;">
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="text-align: center;">
    <td>Cyber</td>
    <td>Code</td>
    <td>10</td>
</table>
</table>
</body>
</html>

النتيجة : عند تطبيق width=100%

Adding a Border

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

Collapsed Borders

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

Adding Cell Padding

th, td {
  padding: 15px;
}

Left-align Headings

th {
  text-align: left;
}

Adding Border Spacing

table {
  border-spacing: 5px;
}

Cells that Span Many Columns

وهي تعني أن هذا الصف يشغل عمودين او أكتر

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

Cells that Span Many Rows

وهي تعني أن هذا العمود يشغل صفين او أكتر

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

Adding a Caption

هوا عنوان الجدول

<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>
السابق
10 : البرمجة بلغة بايثون – المزيد حول أنواع البيانات
التالي
دورة MySQL للمبتدئين: الأساسيات – مقدمة

شاركنا برأيك