رؤوس الجداول HTML Table Headers

الدرس السابق الدرس التالي
 يمكن أن تحتوي جداول HTML على رؤوس-Headers لكل عمود أو صف ، أو للعديد من الأعمدة / الصفوف.
رؤوس جداول -HTML Table Headers
يتم تحديد رؤوس الجدول بالعناصر th ، حيث يمثل كل عنصرth  خلية جدول.
مثال
 
  <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> رؤوس الجدول </h2>
<p> استخدم عنصر TH لتحديد رؤوس الجدول </p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <th>اللقب</th>
    <th>السن</th>
  </tr>
  <tr>
    <td>محمد</td>
    <td>بن ادم</td>
    <td>50</td>
  </tr>
  <tr>
    <td>ايمن</td>
    <td>البدري</td>
    <td>94</td>
  </tr>
</table>
</body>
</html>

رؤوس الجدول العمودي Vertical Table Headers
لاستخدام العمود الأول كرؤوس للجدول ، حدد الخلية الأولى في كل صف كعنصرth  :
مثال
 
<!DOCTYPE html><html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> رؤوس الجدول العمودي </h2>
<p> يصبح العمود الأول رؤوسًا للجدول إذا قمت بتعيين خلية الجدول الأولى في كل صف جدول إلى عنصر  : </p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <td>جليلو</td>
    <td>حمزة</td>
  </tr>
  <tr>
    <th>الاسم</th>
    <td>عمر</td>
    <td>ادم</td>
  </tr>
  <tr>
    <th>السن</th>  
    <td>50</td>
    <td>94</td>
  </tr>
</table>
 
</body>
</html>

محاذاة رؤوس الجدول Align Table Headers
بشكل افتراضي ، تكون رؤوس الجدول table headers  غامقة bold  و في الوسط:
لمحاذاة رؤوس الجدول إلى اليسار ، استخدم خاصية محاذاة النص  text-align :
مثال
 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h2> محاذاة الرؤوس إلى اليسار </h2>
<p> لمحاذاة رؤوس الجدول إلى اليسار ، استخدم خاصية محاذاة النص  . </p>
<table style="width:100%">
  <tr>
    <th>الاسم</th>
    <th>اللقب</th>
    <th>السن</th>
  </tr>
  <tr>
    <td>عمر</td>
    <td>المهنداوي</td>
    <td>50</td>
  </tr>
  <tr>
    <td>فريد</td>
    <td>الفريدي</td>
    <td>94</td>
  </tr>
</table>
 
</body>
</html>

رأس أعمدة متعددة Header for Multiple Columns
يمكن أن يكون لديك رأس header  يمتد على عمودين أو أكثر.
للقيام بذلك ، استخدم سمة colspan على عنصر <th>:
مثال
 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2> رأس يمتد على عمودين </h2>
<p> استخدم سمة colspan للحصول على رأس يمتد على عدة أعمدة. </p>
<table style="width:100%">
  <tr>
    <th colspan="2">الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>احمد</td>
    <td>مصطفى</td>
    <td>50</td>
  </tr>
  <tr>
    <td>ابراهيم</td>
    <td>حمزة</td>
    <td>94</td>
  </tr>
</table>
</body>
</html>

الجدول التوضيحي  Table Caption
يمكنك إضافة تسمية توضيحية تعمل كعنوان للجدول بأكمله.
لإضافة تعليق إلى جدول ، استخدم علامة <caption>:
مثال
 
<!DOCTYPE html><html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>
<h2> تسمية توضيحية للجدول </h2>
<p> لإضافة تسمية توضيحية إلى جدول ، استخدم علامة التسمية التوضيحية. </p>
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>شهر</th>
    <th>مدخرات</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
</body>
</html>

ملاحظة: يجب إدراج علامة <caption> مباشرة بعد علامة <table>.
الدرس السابق الدرس التالي
القسم: