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

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

Για να κατασκευάσουμε έναν πίνακα θα πρέπει να χρησιμοποιήσουμε τα δομικά στοιχεία που εξηγούνται στην προηγούμενη σελίδα.
Έτσι, ένα παράδειγμα ενός πίνακα με 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>