Λύσεις — Εφαρμογή 8 · Πίνακες ΚΑΙ η παράμετρος class (σελ. 42–45) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 8 · Πίνακες & η παράμετρος class (σελ. 42–45)

Ο κώδικας-λύση και ασκήσεις (δομή πίνακα, td vs th, colspan/rowspan, class & επιλογέας .όνομα, border-collapse). Γλώσσες HTML5+CSS.

Ο κώδικας-λύση της Εφαρμογής 8

Ερώτηση: Φτιάξτε πίνακα με επικεφαλίδες, μια κυψέλη που πιάνει 2 στήλες, και CSS με border-collapse.

Απάντηση:

<table>
  <tr><th>Όνομα</th><th>Α΄</th><th>Β΄</th></tr>
  <tr><td>Άννα</td><td>18</td><td>19</td></tr>
  <tr><td colspan="3">Σύνολο μαθητών: 1</td></tr>
</table>

table { border-collapse: collapse; }
td, th { border: 1px solid black; padding: 10px; }

• Το colspan="3" κάνει την κυψέλη να πιάσει 3 στήλες· το border-collapse ενώνει τα περιγράμματα.

Σύνοψη: (ενδεικτική) table>tr>th/td, colspan για συγχώνευση στηλών, CSS: border-collapse: collapse & td,th{border;padding}.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστή δομή table/tr/th/td + colspan + border-collapse.

Δομή πίνακα

Ερώτηση: Ποιες ετικέτες συνθέτουν έναν πίνακα και ποια η διαφορά <td> από <th>;

Απάντηση:

• <table> ο πίνακας, <tr> γραμμή, <td> κυψέλη δεδομένων, <th> κυψέλη επικεφαλίδας.
• Το <th> εμφανίζεται συνήθως έντονο & κεντραρισμένο (χαρακτηρίζει επικεφαλίδα)· το <td> είναι απλή κυψέλη δεδομένων.

Σύνοψη: (ενδεικτική) table (πίνακας) > tr (γραμμή) > td (κυψέλη δεδομένων)/th (επικεφαλίδα, έντονη-κεντραρισμένη).

Κριτήρια αξιολόγησης:

• Κριτήριο: table/tr/td/th + η διαφορά td vs th (επικεφαλίδα).

colspan vs rowspan

Ερώτηση: Ποια η διαφορά colspan από rowspan;

Απάντηση:

• colspan="ν": οριζόντια συγχώνευση — η κυψέλη πιάνει ν στήλες.
• rowspan="ν": κατακόρυφη συγχώνευση — η κυψέλη πιάνει ν γραμμές.
• Λόγω συγχώνευσης, οι υπόλοιπες γραμμές χρειάζονται λιγότερες κυψέλες (προσοχή στο μέτρημα, αλλιώς μένουν κενές θέσεις).

Σύνοψη: (ενδεικτική) colspan: πιάνει πολλές στήλες (οριζόντια). rowspan: πιάνει πολλές γραμμές (κατακόρυφα).

Κριτήρια αξιολόγησης:

• Κριτήριο: colspan→στήλες (οριζόντια), rowspan→γραμμές (κατακόρυφα).

Η παράμετρος class

Ερώτηση: Τι κάνει η παράμετρος class και πώς είναι ο επιλογέας κλάσης στη CSS;

Απάντηση:

• Η class δίνει σε στοιχεία ένα κοινό όνομα ώστε να μορφοποιούνται μαζί — ανεξάρτητα από ετικέτα.
• Στο CSS ο επιλογέας κλάσης ξεκινά με τελεία: .όνομα { … } (π.χ. <td class="highlight"> ↔ .highlight { background-color: yellow; }).

Σύνοψη: (ενδεικτική) class = κοινό όνομα σε στοιχεία (και διαφορετικών ετικετών). Επιλογέας κλάσης στη CSS: .όνομα { ... }.

Κριτήρια αξιολόγησης:

• Κριτήριο: class ομαδοποιεί + ο επιλογέας .όνομα (με τελεία).