Οι προεπιλεγμένοι πίνακες HTML φαίνονται αρκετά απίθανοι—να τους εντυπωσιάσουν με μερικά όμορφα εφέ CSS.

Η προσθήκη πίνακα στον ιστότοπό σας είναι ένας χρήσιμος τρόπος για να παρουσιάσετε με σαφήνεια μεγάλο όγκο πληροφοριών. Οι πίνακες παρέχουν επίσης αποτελεσματική χρήση του χώρου και σας επιτρέπουν να διαβάζετε και να συγκρίνετε πιο εύκολα σύνθετα δεδομένα.

Μπορείτε να σχεδιάσετε πίνακες ώστε να είναι πιο ελκυστικοί οπτικά χρησιμοποιώντας CSS. Κάτι τέτοιο μπορεί επίσης να βελτιώσει τη συνολική εμπειρία χρήστη για τον ιστότοπό σας.

Μοντέρνος σχεδιασμός μεμονωμένων γραμμών και στηλών

Μπορείτε να προσθέσετε ένα απλό σχέδιο πίνακα με μεμονωμένες γραμμές και στήλες και χωρίς συγχωνευμένα κελιά. Το στυλ του πίνακα διασφαλίζει επίσης ότι η ιστοσελίδα σας είναι ελκυστική για τον χρήστη. Εκτός από το στυλ του τραπεζιού, υπάρχουν και άλλα δροσερά εφέ HTML και Διατάξεις ιστοτόπων εμφάνισης CSS μπορείτε να προσθέσετε στον ιστότοπό σας.

Μπορείτε να δείτε τον κώδικα για αυτήν την άσκηση στο δικό της Αποθετήριο GitHub.

instagram viewer
  1. Σε ένα νέο αρχείο HTML, προσθέστε τη βασική δομή κώδικα HTML:
    html>
    <html>
    <κεφάλι>
    <τίτλος>Το απλό μου τραπέζιτίτλος>
    κεφάλι>
    <σώμα>

    σώμα>
    html>
  2. Μέσα στο σώμα, προσθέστε ετικέτες πίνακα:
    <τραπέζι>

    τραπέζι>
  3. Το στοιχείο του πίνακα HTML πρέπει να περιέχει σειρά τραπεζιού ετικέτες για κάθε σειρά μέσα στον πίνακα. Η επάνω σειρά χρησιμοποιείται συνήθως για επικεφαλίδες. Χρήση κεφαλίδα πίνακα Ετικέτες HTML που αντιπροσωπεύουν κάθε στήλη στον πίνακα:
    <tr>
    <ου>Κεφαλίδα 1ου>
    <ου>Κεφαλίδα 2ου>
    <ου>Κεφαλίδα 3ου>
    tr>
  4. Προσθέστε περισσότερες σειρές κάτω από τη σειρά κεφαλίδας. Χρήση δεδομένα πίνακα Ετικέτες HTML για την προσθήκη δεδομένων σε κάθε κελί του πίνακα:
    <tr>
    <td>Σειρά 1, Στήλη 1td>
    <td>Σειρά 1, Στήλη 2td>
    <td>Σειρά 1, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 2, Στήλη 1td>
    <td>Σειρά 2, Στήλη 2td>
    <td>Σειρά 2, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 3, Στήλη 1td>
    <td>Σειρά 3, Στήλη 2td>
    <td>Σειρά 3, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 4, Στήλη 1td>
    <td>Σειρά 4, Στήλη 2td>
    <td>Σειρά 4, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 5, Στήλη 1td>
    <td>Σειρά 5, Στήλη 2td>
    <td>Σειρά 5, Στήλη 3td>
    tr>
  5. Προσθέστε μια ετικέτα στυλ μέσα στην ετικέτα κεφαλής. Προσθέστε κάποιο γενικό στυλ στον πίνακα, όπως σκιές, στρογγυλεμένες γωνίες τραπεζιού, γραμματοσειρές και περιθώρια:
    <στυλ>
    τραπέζι {
    σύνορα-κατάρρευση: κατάρρευση;
    πλάτος: 100%;
    χρώμα: #333;
    γραμματοσειρά-οικογένεια: Arial, Σανς σέριφ;
    μέγεθος γραμματοσειράς: 14px;
    στοίχιση κειμένου: αριστερά;
    σύνορα-ακτίνα: 10px;
    ξεχείλισμα: κρυμμένος;
    κουτί-σκιά: 0 0 20pxrgba(0, 0, 0, 0.1);
    περιθώριο: αυτο;
    περιθώριο-κορυφή: 50px;
    περιθώριο-κάτω: 50px;
     } 
    στυλ>
  6. Δώστε στυλ στην κεφαλίδα του πίνακα για να της δώσετε χρώμα φόντου και στοιχισμένο κείμενο:
    τραπέζιου {
    χρώμα του φόντου: #ff9800;
    χρώμα: #fff;
    βάρος γραμματοσειράς: τολμηρός;
    υλικό παραγεμίσματος: 10px;
    κείμενο-μετασχηματισμός: κεφαλαίο;
    διάστιχο: 1px;
    σύνορα-κορυφή: 1pxστερεός#fff;
    σύνορο-κάτω: 1pxστερεός#cccc;
    }
  7. Δώστε στυλ στις σειρές του πίνακα έτσι ώστε να εναλλάσσονται τα γκρι και τα λευκά χρώματα και να προσθέσετε ένα εφέ όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τη σειρά:
    τραπέζιtr:nth-child (ακόμα)td {
    χρώμα του φόντου: #f2f2f2;
    }
    τραπέζιtr:φτερουγίζωtd {
    χρώμα του φόντου: #ffedcc;
    }
  8. Δώστε στυλ στα δεδομένα μέσα στα κελιά του πίνακα:
    τραπέζιtd {
    χρώμα του φόντου: #fff;
    υλικό παραγεμίσματος: 10px;
    σύνορο-κάτω: 1pxστερεός#cccc;
    βάρος γραμματοσειράς: τολμηρός;
    }
  9. Ανοίξτε το αρχείο HTML για να προβάλετε τον πίνακα σε ένα πρόγραμμα περιήγησης ιστού:

Σχέδιο κυτταρικού τραπεζιού με πολλές γραμμές

Ορισμένοι πίνακες περιλαμβάνουν στήλες με συγχωνευμένες σειρές για να σχηματίσουν ένα κελί με πολλές γραμμές.

  1. Καταργήστε όλες τις τρέχουσες σειρές του πίνακα, διατηρώντας μόνο την επάνω με τις επικεφαλίδες:
    <τραπέζι>
    <tr>
    <ου>Κεφαλίδα 1ου>
    <ου>Κεφαλίδα 2ου>
    <ου>Κεφαλίδα 3ου>
    tr>
    τραπέζι>
  2. Δημιουργήστε ένα κελί με πολλές γραμμές χρησιμοποιώντας το χαρακτηριστικό rowspan. Αυτό θα επεκτείνει αυτό το κελί στον καθορισμένο αριθμό σειρών.
     Τμήμα 1 
    <tr>
    <tdεύρος σειρών="2">Κελλί πολλαπλών γραμμώνtd>
    <td>Σειρά 1, Στήλη 2td>
    <td>Σειρά 1, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 2, Στήλη 2td>
    <td>Σειρά 2, Στήλη 3td>
    tr>
  3. Όταν προσθέτετε μια άλλη γραμμή πολλαπλών κελιών με διαφορετική τιμή εύρους γραμμής, προσθέστε τον αντίστοιχο αριθμό σειρές τραπεζιών Ετικέτες HTML. Αυτό γίνεται για να ταιριάζει με το ύψος ή τον αριθμό των σειρών που εκτείνεται το κελί. Για παράδειγμα, εάν ένα κελί έχει εύρος γραμμών 3, θα χρειαστεί να προσθέσετε τρεις σειρές στις άλλες στήλες για να ευθυγραμμίσετε σωστά τον πίνακα.
     Τομέας 2 
    <tr>
    <tdεύρος σειρών="3">Κελλί πολλαπλών γραμμώνtd>
    <td>Σειρά 3, Στήλη 2td>
    <td>Σειρά 3, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 4, Στήλη 2td>
    <td>Σειρά 4, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 5, Στήλη 2td>
    <td>Σειρά 5, Στήλη 3td>
    tr>
  4. Ανοίξτε το αρχείο HTML για να προβάλετε τον πίνακα σε ένα πρόγραμμα περιήγησης ιστού:

Σχεδίαση πίνακα συγχωνευμένων γραμμών

Παρόμοια με τα κελιά με πολλές γραμμές, οι πίνακες μπορούν επίσης να έχουν σειρές που συγχωνεύονται σε πολλές στήλες.

  1. Καταργήστε όλες τις τρέχουσες σειρές του πίνακα, διατηρώντας μόνο την επάνω με τις επικεφαλίδες:
    <τραπέζι>
    <tr>
    <ου>Κεφαλίδα 1ου>
    <ου>Κεφαλίδα 2ου>
    <ου>Κεφαλίδα 3ου>
    tr>
    τραπέζι>
  2. Προσθέστε περισσότερες σειρές πίνακα στον πίνακα. Χρησιμοποιήστε το χαρακτηριστικό colspan για να συγχωνεύσετε μία από τις σειρές σε 3 στήλες:
     Τμήμα 1 
    <tr>
    <tdστυλ="χρώμα φόντου: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>Σειρά 2, Στήλη 1td>
    <td>Σειρά 2, Στήλη 2td>
    <td>Σειρά 2, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 3, Στήλη 1td>
    <td>Σειρά 3, Στήλη 2td>
    <td>Σειρά 3, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 4, Στήλη 1td>
    <td>Σειρά 4, Στήλη 2td>
    <td>Σειρά 4, Στήλη 3td>
    tr>
  3. Προσθέστε μια άλλη συγχωνευμένη σειρά για να διαχωρίσετε τις ενότητες του πίνακα:
     Τομέας 2 
    <tr>
    <tdστυλ="χρώμα φόντου: #ffedcc"colspan="3">Ε2td>
    tr>
    <tr>
    <td>Σειρά 6, Στήλη 1td>
    <td>Σειρά 6, Στήλη 2td>
    <td>Σειρά 6, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 7, Στήλη 1td>
    <td>Σειρά 7, Στήλη 2td>
    <td>Σειρά 7, Στήλη 3td>
    tr>
    <tr>
    <td>Σειρά 8, Στήλη 1td>
    <td>Σειρά 8, Στήλη 2td>
    <td>Σειρά 8, Στήλη 3td>
    tr>
  4. Ανοίξτε το αρχείο HTML για να προβάλετε τον πίνακα σε ένα πρόγραμμα περιήγησης ιστού:

Χρησιμοποιήστε ελκυστικούς πίνακες για να αξιοποιήσετε στο έπακρο τα δεδομένα σας

Οι πίνακες HTML είναι ένας πολύ καλός τρόπος εμφάνισης δομημένων δεδομένων στον ιστότοπό σας. Μπορείτε να τα διαμορφώσετε με CSS για να βελτιώσετε την προεπιλεγμένη εμφάνιση. Ωστόσο, φροντίστε να μην παρασυρθείτε και να χρησιμοποιήσετε πίνακες για διάταξη—για λόγους προσβασιμότητας, κρατήστε τους αυστηρά για δεδομένα.

Οι μεγαλύτεροι πίνακες μπορεί να είναι επίπονη για τη δημιουργία και την ενημέρωση, ειδικά αν χρησιμοποιείτε στήλες και γραμμές που εκτείνονται. Μπορείτε να γράψετε τον δικό σας κώδικα για να δημιουργήσετε τη σήμανση ή να επωφεληθείτε από πιο φιλικές συντακτικές όπως το Markdown.