تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إضافة الجداول


الصفحة السابقة

يعد تنظيم الجداول أمرًا صعبًا بعض الشيء في HTML ، حيث إنه ضروري لتنظيم المعلومات: وهذا ما يوضح أنني أقدمها الآن. سيكون من الضروري بالفعل تداخل علامات HTML الجديدة بترتيب معين.

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

جدول بسيط


العلامة الأولى التي علينا معرفتها هي <table> </table> . تُستخدم هذه العلامة للإشارة إلى بداية ونهاية الجدول.

هذه العلامة من النوع block ، لذلك يجب وضعها خارج فقرة. على سبيل المثال:


<p>هذه فقرة قبل الجدول</p>

<table>
   <!--هنا نكتب مكونات الجدول -->
</table>     

حسنا ، ماذا نكتب داخل الجدول؟

هنا ، عليكم الاستعداد لنهر من العلامات الجديدة . للبدء برفق ، إليك علامتان جديدتان مهمتان للغاية:

  • <tr> </tr> : يشير إلى بداية ونهاية صف الجدول ؛
  • <td> </td> : يشير إلى بداية ونهاية محتويات الخلية.

في HTML ، يتم بناء جدول سطرا بسطر. في كل سطر ( ) ، نشير إلى محتويات الخلايا المختلفة ( ). بشكل تخطيطي ، يتم إنشاء جدول كما في الشكل التالي.

css img float
لدينا علامة سطر ( <tr>) تتضمن مجموعة من الخلايا ( <td>). على سبيل المثال ، إذا كنت أرغب في إنشاء جدول من صفين ، يحتوي على ثلاث خلايا لكل صف (ثلاثة أعمدة) ، سأضطر إلى كتابة هذا:

<table>
   <tr>
       <td>محمد</td>
       <td>20</td>
       <td>تونس</td>
   </tr>
   <tr>
       <td>علي</td>
       <td>28</td>
       <td>مصر </td>
   </tr>
</table>   

والنتيجة هي مخيبة للآمال بعض الشيء (الشكل التالي).

css img float

جدول بلا حدود

هل هذا جدول ؟ تمت كتابة النص بعد ذلك وليس هناك حدود!

نعم ، يبدو الجدول بدون CSS فارغًا. وبالتحديد ، إضافة الحدود بسيطة جدًا ، فأنت تعرف بالفعل كود CSS المطابق!


td 
{
    border: 1px solid black;
}              

وهنا النتيجة في الشكل التالي.

css img float

كل خلية لها حدودها الخاصة

حسنًا ، إنها ليست مثالية كما تريد. في الواقع ، نود أن يكون هناك حدود واحدة فقط بين خليتين ، ولكن هذا ليس هو الحال هنا.

لحسن الحظ ، هناك خاصية CSS خاصة بالجدول border-collapse، مما يعني "لصق الحدود فيما بينهما". يمكن أن تأخذ هذه الخاصية قيمتين:

  • Collapse : سيتم لصق الحدود معًا ، هذا هو التأثير الذي نبحث عنه هنا ؛
  • Separate : سيتم فصل الحدود (القيمة التلقائية)

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

يوضح الشكل التالي النتيجة التي تم الحصول عليها.

css img float

الحدود لصقها مع بعضها البعض

هذا أفضل!

خط الرأس
الآن بعد أن أصبح لدينا ما نريد ، سنضيف سطر العنوان في الجدول. في المثال أدناه ، العناوين هي "الاسم" و "العمر" و "الدولة". يتم إنشاء سطر العنوان بخط واحد <tr>كما فعلنا حتى الآن ، لكن الخلايا التي يحتوي عليها هي ، هذه المرة ، مؤطرة بالعلامات <th>وليس <td>!

<table>
   <tr>
       <th> الاسم </th>
       <th> العمر </th>
       <th> الدولة </th>
   </tr>

   <tr>
       <td>محمد</td>
       <td>20 </td>
       <td>تونس</td>
   </tr>
   <tr>
       <td>علي</td>
       <td>28 </td>
       <td>مصر</td>
   </tr>
</table>             

يسهل التعرف على خط الرأس لسببين:

  • الخلايا هي <th>بدلا من الخلايا <td>المعتادة.
  • هذا هو السطر الأول من الجدول (إنه سخيف ، لكنه لا يزال بحاجة إلى الدقة).

نظرًا لأن أسماء الخلايا مختلفة قليلاً عن الرأس ، يجب عليك التفكير في تحديث CSS لإعلامه بتطبيق حد على الخلايا العادية وعلى الرأس (الشكل التالي).


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

جدول مع رأس

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

عنوان الجدول

عادة ، يجب أن يكون لكل جدول عنوان. يُعلم العنوان الزائر بسرعة بمحتويات الجدول. مثالنا يتكون من قائمة من الناس ... نعم ، ولكن بعد ذلك؟ ماذا يمثل هذا؟ بدون عنوان الجدول ، كما ترى ، نحن ضائعون قليلاً.

لحسن الحظ ، هناك <caption>! يتم وضع هذه العلامة في بداية الجدول ، قبل الرأس مباشرةً. يحتوي على عنوان الجدول (الشكل التالي):


<table>
   <caption> الركاب على الرحلة 377</caption>

   <tr>
       <th> الاسم </th>
       <th> العمر </th>
       <th> الدولة </th>
   </tr>

   <tr>
       <td>محمد</td>
       <td>20 </td>
       <td>تونس</td>
   </tr>
   <tr>
       <td>علي</td>
       <td>28 </td>
       <td>مصر</td>
   </tr>
</table>                 
css img float

جدول مع العنوان

هو الآن أكثر أكثر وضوحا!

كن على علم بأنه يمكنك تغيير موضع العنوان باستخدام خاصية CSS caption-side والتي يمكن أن تأخذ قيمتين:

  • Top : سيتم وضع العنوان أعلى الجدول (تلقائي) ؛
  • Bottom : سيتم وضع العنوان أسفل الجدول.

جدول منظم


لقد تعلمنا أن نبني جداول بسيطة. هذه الجداول الصغيرة كافية في معظم الحالات ، لكنك ستحتاج إلى عمل جداول أكثر تعقيدًا.

سنكتشف تقنيتين خاصتين:

  • بالنسبة للجداول الكبيرة ، يمكن تقسيمها إلى ثلاثة أجزاء:
    • رأس الجدول
    • جسم الجدول
    • تذييل الجدول.
  • بالنسبة لبعض الجداول ، قد تحتاج إلى دمج الخلايا معًا.
تقسيم جدول كبير

إذا كان جدولك كبير بما يكفي ، فستكون مهتمًا بتقطيعه إلى عدة أجزاء. لهذا ، توجد علامات HTML تحدد "المناطق" الثلاثة للجدول:

  • الرأس (في الأعلى) : يتم تعريفه بالعلامات <thead></thead>؛
  • الجسم (في الوسط) : يتم تعريفه بواسطة المنارات <tbody></tbody>؛
  • التذييل ( في الأسفل) : يتم تعريفها بالعلامات <tfoot></tfoot>.

ماذا نضع في تذييل الجدول؟ بشكل عام ، إذا كان الجدول طويلًا ، فسينسخ فيه خلايا الرأس. يسمح لك ذلك برؤية ما يشير إليه كل عمود ، حتى في أسفل الجدول. بشكل تخطيطي ، يتم قطع جدول في ثلاثة أجزاء كما هو موضح في الشكل التالي.

css img float

جدول مقسم إلى عدة أجزاء

إنه أمر مربك بعض الشيء ولكن ينصح بكتابة العلامات بالترتيب التالي:

  1. <thead>
  2. <tfoot>
  3. <tbody>

في الكود ، نقوم أولاً بإبلاغ الجزء العلوي ، ثم الجزء السفلي ، وأخيرا الجزء الرئيسي (

<tbody>). سيعرض المتصفح كل عنصر في المكان المناسب ، لا تقلق. إليك الرمز الذي يجب كتابته لإنشاء الجدول في ثلاثة أجزاء:


<table>
    <caption> الركاب على الرحلة 377</caption>
                 
        <thead> 
            <tr>
                <th> الاسم </th>
                <th> العمر </th>
                 <th> الدولة </th>
            </tr>
        </thead>
                 
        <tfoot> 
            <tr>
                <th> الاسم </th>
                <th> العمر </th>
                <th> الدولة </th>
            </tr>
        </tfoot>
                 
        <tbody> 
            <tr>
                <th> الاسم </th>
                <th> العمر </th>
                <th> الدولة </th>
            </tr>
                         
            <tr>
                <td>محمد</td>
                <td>20 </td>
                <td>تونس</td>
            </tr>
            <tr>
                <td>علي</td>
                <td>28 </td>
                <td>مصر</td>
            </tr>
            <tr>
                <td>François</td>
                <td>43 </td>
                <td>فرنسا</td>
            </tr>
            <tr>
                <td>Martine</td>
                <td>34 </td>
                <td>فرنسا</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>13 </td>
                <td>استراليا</td>
            </tr>
            <tr>
                <td>Xu</td>
                <td>19 </td>
                <td>الصين</td>
            </tr>
        </tbody>
</table>              
انها ليست إلزامية لاستخدام هذه العلامات الثلاث ( <thead> ، <tbody>، <tfoot> ) في جميع الجداول. في الحقيقة ، ستستخدمها خاصة إذا كان الجدول كبير بما يكفي وتحتاج إلى تنظيمها بشكل أكثر وضوحًا. بالنسبة للجداول "الصغيرة" ، يمكنك إبقاء الكود بسيطا كما رأينا في البداية
3 ،2 ،1 ، ... الدمج

في بعض الجداول المعقدة ، ستحتاج إلى "دمج" الخلايا معًا. مثال على دمج؟ انظر إلى الجدول في الشكل التالي ، الذي يسرد مجموعة من الأفلام.

css img float

جدول يحتوي على عناوين الأفلام وجمهورها باللغة الفرنسية

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

  • دمج العمود : هذا ما فعلته للتو في هذا المثال. يتم الدمج أفقيا. سوف نستخدم السمة colspan.
  • دمج الصفوف : هنا ، سيتم تجميع سطرين معًا. سيتم الدمج عموديا. سوف نستخدم السمة rowspan.

كما تعلم ، يجب إعطاء قيمة للسمة ( إما colspan أو rowspan) من الضروري الإشارة إلى عدد الخلايا المراد دمجها معًا. في مثالنا ، قمنا بدمج خليتين: تلك الخاصة بعمود "Pour enfants ?" و عمود "Pour adolescents ?" يجب أن نكتب:


    <td colspan="2">             

... وهذا يعني: "هذه الخلية هي اندماج خليتين". من الممكن دمج المزيد من الخلايا في وقت واحد (ثلاثة أو أربعة أو خمسة ... بقدر ما تريد).

إليك رمز HTML الذي يسمح لي بإجراء الدمج المتوافق مع الجدول السابق:


<table>
   <tr>
       <th>Titre du film</th>
       <th>Pour enfants ?</th>
       <th>Pour adolescents ?</th>
   </tr>
   <tr>
       <td>Massacre à la tronçonneuse</td>
       <td >Non, trop violent</td>
       <td>Oui</td>
   </tr>
   <tr>
       <td>Les bisounours font du ski</td>
       <td>Oui, adapté</td>
       <td>Pas assez violent...</td>
   </tr>
   <tr>
       <td>Lucky Luke, seul contre tous</td>
       <td colspan="2">Pour toute la famille !</td>
   </tr>
</table>      
ملاحظة مهمة: ترى أن السطر 19 يحتوي على خليتين فقط بدلاً من ثلاث (هناك علامتان فقط <td>). هذا طبيعي لأنني أدمج الخليتين الأخيرتين معًا. و <td colspan="2">يشير إلى أن الخلية تأخذ مكان خليتين في وقت واحد.

و للدمج العمودي مع rowspan، كيف نفعل ذلك؟

هذه معقدة بعض الشيء. على سبيل المثال ، سنقوم "بعكس" ترتيب جدولنا: بدلاً من وضع عناوين الأفلام على اليسار ، سنضعها في الأعلى. هذه طريقة أخرى لرؤية الجدول: بدلاً من بنائه بالارتفاع ، يمكننا بناؤها بالطول.

في هذه الحالة ، colspan لم يعد مناسبًا ، بل rowspan يجب استخدامه:


    <table>
    <tr>
        <th>Titre du film</th>
        <td>Massacre à la tronçonneuse</td>
        <td>Les bisounours font du ski</td>
        <td>Lucky Luke, seul contre tous</td>
    </tr>
    <tr>
        <th>Pour enfants ?</th>
        <td>Non, trop violent</td>
        <td>Oui, adapté</td>
        <td rowspan="2">Pour toute la famille !</td>
    </tr>
    <tr>
        <th>Pour adolescents ?</th>
        <td>Oui</td>
        <td>Pas assez violent...</td>
    </tr>
 </table>        

النتيجة: يتم دمج الخلايا عموديًا (الشكل التالي)!

css img float

تم دمج الخلايا عموديا

لاحظ أنه يمكنك تغيير المحاذاة العمودية لنص خلايا الجدول مع الخاصية vertical-align التي رأيناها سابقا

الخلاصة


  • يتم إدراج جدول مع العلامة <table>ويتم تعريفه سطرا سطرا ب <tr>.
  • يحتوي كل سطر على خلايا <td>( خلايا عادية) أو <th>(خلايا الرأس)
  • يتم تعريف عنوان الجدول بـ <caption>.
  • يمكنك إضافة حدود لخلايا الجدول مع border . لدمج الحدود ، نستخدم خاصية CSS border- collapse.
  • يمكن تقسيم الجدول إلى ثلاثة أقسام: <thead>(رأس الجدول) ، <tbody>(جسم الجدول) و <tfoot>(أسفل الجدول). استخدام هذه العلامات ليست إلزامية.
  • يمكنك دمج الخلايا أفقيا مع السمة colspan أو عموديا مع rowspan يجب الإشارة إلى عدد الخلايا التي يجب دمجها.