الجداول HTML Tables

الدرس السابق الدرس التالي
 الجداول HTML Tables
تسمح جداول HTML لمطوري الويب بترتيب البيانات في صفوف وأعمدة.
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
 
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
 
<h2>HTML Table</h2>
 
<table>
<tr>
     <th> الشركة </th>
     <th> جهة الاتصال </th>
     <th> البلد </th>
   </tr>
   <tr>
     <td> ألفريدز فوتيركيست </ td>
     <td> ماريا أندرس </ td>
     <td> ألمانيا </td>
   </tr>
   <tr>
     <td> Centro Comercial Moctezuma </td>
     <td> فرانسيسكو تشانغ </ td>
     <td> المكسيك </ td>
   </tr>
   <tr>
     <td> إرنست هاندل </ td>
     <td> رولاند مندل </ td>
     <td> النمسا </td>
   </tr>
   <tr>
     <td> تجارة الجزر </ td>
     <td> هيلين بينيت </td>
     <td> المملكة المتحدة </td>
   </tr>
   <tr>
     <td> يضحك باخوس Winecellars </td>
     <td> يوشي تاناموري </ td>
     <td> كندا </td>
   </tr>
   <tr>
     <td> Magazzini Alimentari Riuniti </td>
     <td> جيوفاني روفيلي </ td>
     <td> إيطاليا </td>
   </tr></tr>
</table>
 
</body>
</html>
حدد جدول  Define an HTML Table
يتكون الجدول في HTML من خلايا جدول داخل الصفوف والأعمدة
مثال
جدول HTML بسيط:
 <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
 
<h2>A basic HTML table</h2>
 
<table style="width:100%">
 <tr>
     <th> الشركة </th>
     <th> جهة الاتصال </th>
     <th> البلد </th>
   </tr>
   <tr>
     <td> ألفريدز فوتيركيست </ td>
     <td> ماريا أندرس </ td>
     <td> ألمانيا </td>
   </tr>
   <tr>
     <td> Centro Comercial Moctezuma </td>
     <td> فرانسيسكو تشانغ </ td>
     <td> المكسيك </ td>
   </tr>
</table>
 
<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>
 
</body>
</html>


خلايا الجدول-Table Cells
يتم تعريف كل خلية من خلايا الجدول بعلامة <td> و </ td>.
td  لتقف على بيانات الجدول.
كل ما يقع بين <td> و </ td> يمثل محتوى خلية الجدول.
مثال
 <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
 
<h2> تحدد عناصر TD خلايا الجدول </ h2>
 
<table style="width:100%">
  <tr>
     <td> اميل </ td>
     <td> توبياس </ td>
     <td> لينوس </ td>
  </tr>
</table>
 
<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>
 
</body>
</html>

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

صفوف الجدول-Table Rows
يبدأ كل صف في الجدول بعلامة <tr> وينتهي بعلامة </tr>.
tr  للتوقف على صف الجدول.
مثال
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
 
<h2> تحدد عناصر TR صفوف الجدول </ h2>
 
<table style="width:100%">
  <tr>
      <td> اميل </ td>
     <td> توبياس </ td>
     <td> لينوس </ td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
 
<p> لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول. </ p>
 
</body>
</html>


يمكن أن يكون لديك العديد من الصفوف كما تريد في الجدول ، فقط تأكد من أن عدد الخلايا هو نفسه في كل صف.

ملاحظة: هناك أوقات يمكن أن يحتوي فيها صف على خلايا أقل أو أكثر من خلايا أخرى. سوف تتعلم عن ذلك في فصل لاحق.

 Table Headers-رؤوس الجدول
في بعض الأحيان تريد أن تكون خلاياك رؤوسًا ، وفي هذه الحالات ، استخدم علامة <th> بدلاً من علامة <td>:

مثال
اجعل الصف الأول عبارة عن رؤوس (Headers) جدول: 
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>
 
<h2>تحدد عناصر TH رؤوس الجدول</h2>
 
<table style="width:100%">
  <tr>
    <th>الشخص 1</th>
    <th>الشخص 2</th>
    <th>الشخص 3</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>عمر</td>
    <td>ابراهيم</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
 
<p>لفهم المثال بشكل أفضل ، أضفنا حدودًا إلى الجدول.</p>
 
</body>
</html>
بشكل افتراضي ، يكون النص الموجود في عناصر <th> غامقًا ومتوسطًا ، ولكن يمكنك تغيير ذلك باستخدام CSS.


الدرس السابق الدرس التالي
القسم: