Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Α' Λυκείου | Εφαρμογές Πληροφορικής -

EL49190 - ΝΙΚΟΣ ΛΥΜΠΕΡΤΑΣ

Ενότητες μαθήματος

05. HTML - Πίνακες (Tables) (<table> <tr> <th> <td>)

04. HTML - Λίστες (Lists) (<ul... 06. HTML - Διαχείριση φακέλων...

Σε πολλές ιστοσελίδες μπορεί να συναντήσουμε πίνακες σαν τον παρακάτω:

 

Αριθμός Φανέλας Όνομα Επίθετο Θέση
14 Σάσα Βεζένκοφ Forward
33 Νίκολα Μιλουτίνοφ Center
16 Κώστας Παπανικολάου Forward
22 Τάιλερ Ντόρσεϊ Guard
0 Τόμας Γουόκαπ Guard

 

Κάθε πίνακας ξεκινάει με το tag <table> και τελειώνει με το </table>

Στη διάθεσή μας έχουμε τα εξής elements που σχετίζονται με τους πίνακες και μπαίνουν εντός του <table>:

<tr> .. </tr> : Table Row, δημιουργεί μια καινούργια γραμμή στον πίνακα.

<th> .. </th>: Table Header, Τα τοποθετούμε μέσα στις γραμμές <tr> και συνήθως τα χρησιμοποιούμε στην πρώτη γραμμή του πίνακα που περιέχει την επικεφαλίδα της κάθε στήλης. Κάθε <th> δημιουργεί ένα νέο κελί στη συγκεκριμένη γραμμή του πίνακα.

<td> .. </td>: Table Data. Λειτουργεί όπως και το <th>, μόνο που δημιουργεί κελιά τα οποία θα περιέχουν απλό περιεχόμενο και όχι επικεφαλίδες.

 

Παράδειγμα:

<table>  Αρχή του πίνακα

    <tr>    Αρχή νέας γραμμής

        <th>Αριθμός Φανέλας</th> Νέο κελί επικεφαλίδας

        <th>Όνομα</th> Νέο κελί επικεφαλίδας

        <th>Επίθετο</th>

        <th>Θέση</th>

    </tr> Τέλος γραμμής

    <tr>   Αρχή νέας γραμμής

        <td>14</td> Νέο κελί δεδομένων

        <td>Σάσα</td> Νέο κελί δεδομένων

        <td>Βεζένκοφ</td>

        <td>Forward</td>

     </tr> Τέλος γραμμής

...

</table> Τελός του πίνακα

 

Δοκιμάστε να προσθέσετε μία καινούργια γραμμή με δεδομένα στο παράδειγμα του w3schools

 

Για να προσθέσουμε περιγράμματα (borders) στον πίνακα θα πρέπει να χρησιμοποιήσουμε τη css. Είναι κάτι που θα μάθουμε αργότερα οπότε προς το παρόν δεν θα ασχοληθούμε με αυτά. Μπορούμε όμως με το attribute bgcolor (που έχουμε χρησιμοποιήσει στο <body> σε προηγούμενο μάθημα) να αλλάξουμε το χρώμα στο φόντο μίας ολόκληρης γραμμής ή ενός μεμονομένου κελιού. 

 

Παραδείγματα:

<tr bgcolor="lightGreen"> : Θα χρωματίσει το φόντο ολόκληρης της γραμμής με ανοιχτό πράσινο

<td bgcolor="yellow"> : Θα χρωματίσει το φόντο του συγκεκριμένου κελιού με κίτρινο. Το ίδιο μπορώ να κάνω και στα κελιά επικεφαλίδων <th>.

 

Τώρα θα πρέπει να είστε έτοιμοι να προσθέσετε πίνακες στις σελίδες σας.