Υποενότητα 5.1: HTML σε Πίνακες

Ο πίνακας και τα στοιχεία του

Η δομή ενός πίνακα ορίζεται στo HTML με την ετικέτα (tag) <table> . Κάθε σειρά (row) κελιών (cells)  ορίζονται με την ετικέτα (tag) <tr> .

Οι πίνακες έχουν κεφαλίδες (headers) που ορίζονται με την ετικέτα (tag) <th> και το σώμα του πίνακα, τα κελιά (cells), καθορίζονται από την ετικέτα <td> .

Επιπλέον, τα διάφορα μέρη ενός πίνακα μπορούν να ομαδοποιηθούν. Οι κεφαλίδες μπορούν να ομαδοποιηθούν χρησιμοποιώντας την ετικέτα <thead> και το κύριο περιεχόμενο του σώματος χρησιμοποιώντας την ετικέτα <tbody> .

Οι πίνακες μπορούν επίσης να έχουν υποσέλιδα (footers) ορίζονται με την ετικέτα <tfoot> .
Μπορούν επίσης να έχουν λεζάντα (caption) με την ετικέτα <caption>

ΔΟΜΗ ΠΙΝΑΚΑ

Ο HTML κώδικας:

<table>
  <caption> STRUCTURE</caption>
   <thead>
     <tr> <th>HHH</th> <th>HHH</th> <th>HHH</th> </tr>
   </thead>
   <tfoot>
     <tr> <td>fff</td> <td>fff</td> <td>fff</td> </tr>
   </tfoot>
   <tbody>
     <tr> <td>CCC</td> <td>CCC</td> <td>CCC</td> </tr>
     <tr> <td>CCC</td> <td>CCC</td> <td>CCC</td> </tr>
   </tbody>
 </table>

θα δημιουργήσει μια σελίδα που εμφανίζεται ως:

Η ομαδοποίηση περιεχομένων μπορεί να είναι χρήσιμη για την εφαρμογή διαφορετικών μορφών στα διάφορα τμήματα.
Περισσότερες πληροφορίες: https://www.w3schools.com/tags/tag_thead.asp

Κατασκευή πίνακα

Για να κατασκευάσουμε έναν πίνακα θα πρέπει να χρησιμοποιήσουμε τα δομικά στοιχεία που εξηγούνται στην προηγούμενη σελίδα.
Έτσι, ένα παράδειγμα ενός πίνακα με 2 κελιά σε 3 σειρές είναι:

Κώδικας:

<table>
  <tr>
    <th>
        Header 1
    </th>
    <th>
        Header 2
    </th>
  </tr>
  <tr>
    <td>
        Content 1 of row 2
    </td>
    <td>
        Content 2 of row 2
    </td>
  </tr>
  <tr>
    <td>
        Content 1 of row 3
    </td>
    <td>
        Content 2 of row 3
    </td>
  </tr>
</table>

Ας υποθέσουμε ότι θέλετε να ομαδοποιήσετε τον παραπάνω πίνακα χρησιμοποιώντας τα <thead> και<tbody>. Πώς νομίζετε ότι θα φαίνεται ο τροποποιημένος κώδικας;

Κώδικας:

<table>
  <thead>
    <tr>
      <th>
        Header 1
      </th>
      <th>
        Header 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Content 1 of row 2
      </td>
      <td>
        Content 2 of row 2
      </td>
    </tr>
    <tr>
      <td>
        Content 1 of row 3
      </td>
      <td>
        Content 2 of row 3
      </td>
    </tr>
  </tbody>
</table>

Ας υποθέσουμε ότι θέλετε να προσθέσετε στον παραπάνω πίνακα  <caption> και <tfoot>. Πώς νομίζετε ότι θα φαίνεται ο τροποποιημένος κώδικας;

Κώδικας:

<table>
  <caption> 
          CAPTION
  </caption>
  <thead>
     <tr>
        <th>
          Header 1
        </th>
        <th>
          Header 2
        </th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>
          Content 1 of row 2
        </td>
        <td>
          Content 2 of row 2
        </td>
     </tr>
     <tr>
        <td>
          Content 1 of row 3
        </td>
        <td>
          Content 2 of row 3
        </td>
     </tr>
  </tbody>
  <tfoot>
     <tr>
        <td>
          Footer 1 of row 4
        </td>
        <td>
          Footer 2 of row 4
        </td>
     </tr>
  </tfoot>
</table>

Άσκηση

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice05.1.01.html στον φάκελο "Exercises".
2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται ο πίνακας:

Θα πρέπει να περιλάβετετ τις ετικέτες <thead> και <tbody> tags.

Λύση: