Δημιουργός πίνακα HTML

Πώς να δημιουργήσετε έναν πίνακα HTML

1. Συμπληρώστε το πλέγμα. Χρησιμοποιήστε Προσθήκη γραμμής, Προσθήκη στήλης, Αφαίρεση τελευταίας γραμμής και Αφαίρεση τελευταίας στήλης ή τα κουμπιά × δίπλα σε κάθε γραμμή και στήλη. Το Νέος κενός πίνακας ξεκινά ξανά από ένα κενό πλέγμα 3 × 3.
2. Για να αξιοποιήσετε υπάρχοντα δεδομένα, επικολλήστε CSV ή κελιά που αντιγράψατε από Excel, LibreOffice ή Google Sheets στο Εισαγωγή δεδομένων CSV ή υπολογιστικού φύλλου, ελέγξτε το Διαχωριστικό και πατήστε Εισαγωγή. Μπορείτε επίσης να επικολλήσετε ένα μπλοκ κελιών υπολογιστικού φύλλου απευθείας σε οποιοδήποτε κελί του πλέγματος.
3. Προσθέστε μια Λεζάντα και επιλέξτε αν Η πρώτη γραμμή είναι γραμμή κεφαλίδας και Η πρώτη στήλη είναι στήλη κεφαλίδας.
4. Στην ενότητα Στυλ, διαλέξτε Χωρίς στυλ, Κλάση CSS ή Ενσωματωμένα στυλ και προσαρμόστε το Χρώμα περιγράμματος, το Φόντο κεφαλίδας και τις Γραμμές με εναλλασσόμενο χρώμα αν θέλετε.
5. Ελέγξτε την Προεπισκόπηση και μετά πατήστε Αντιγραφή HTML ή κατεβάστε τον κώδικα ως αρχείο .html.

Προσβάσιμη σήμανση πινάκων

Ένας πίνακας είναι προσβάσιμος μόνο όταν οι αναγνώστες οθόνης μπορούν να καταλάβουν ποια κελιά είναι κεφαλίδες και τι περιγράφουν. Το εργαλείο γράφει τη δομή που συνιστούν το πρότυπο HTML και οι τεχνικές WCAG:

• Το <caption> δίνει όνομα στον πίνακα. Οι αναγνώστες οθόνης το ανακοινώνουν όταν μπαίνουν στον πίνακα και βοηθά κάθε αναγνώστη να καταλάβει τι βλέπει. Κρατήστε το σύντομο και περιγραφικό.
• Τα <thead> και <tbody> διαχωρίζουν τη γραμμή κεφαλίδας από τις γραμμές δεδομένων. Τα προγράμματα περιήγησης μπορούν να επαναλαμβάνουν το <thead> σε κάθε εκτυπωμένη σελίδα.
• Το <th scope="col"> σημειώνει κάθε κεφαλίδα στήλης και, με το Η πρώτη στήλη είναι στήλη κεφαλίδας, το <th scope="row"> σημειώνει το πρώτο κελί κάθε γραμμής. Όταν ένας χρήστης αναγνώστη οθόνης μετακινείται σε κελί δεδομένων, ο αναγνώστης μπορεί να διαβάσει φωναχτά τις αντίστοιχες κεφαλίδες, όπως «Pro, Τιμή, 12 €».

Χρησιμοποιείτε πίνακες μόνο για δεδομένα σε μορφή πίνακα και ποτέ για τη διάταξη της σελίδας. Αποφύγετε τα συγχωνευμένα κελιά όταν γίνεται: τα απλά πλέγματα με μία γραμμή κεφαλίδας και, αν χρειάζεται, μία στήλη κεφαλίδας διαβάζονται ευκολότερα με υποστηρικτικές τεχνολογίες.

Επιλογές στυλ

• Το Χωρίς στυλ γράφει απλή σήμανση που κληρονομεί τα στυλ πινάκων του ιστότοπού σας. Είναι η καλύτερη επιλογή για CMS ή για ιστότοπο με σύστημα σχεδίασης.
• Η Κλάση CSS προσθέτει class="…" στο <table> και δείχνει ένα αντίστοιχο μπλοκ CSS για να το επικολλήσετε στο φύλλο στυλ σας. Το Όνομα κλάσης καθαρίζεται σε γράμματα, ψηφία, παύλες και κάτω παύλες ώστε να είναι πάντα έγκυρος επιλογέας.
• Τα Ενσωματωμένα στυλ βάζουν χαρακτηριστικά style σε κάθε στοιχείο. Είναι πολυάριθμα, αλλά είναι αυτό που χρειάζονται τα email σε HTML, αφού πολλά προγράμματα email αγνοούν τα μπλοκ <style>. Το κουμπί Λήψη προσθέτει το CSS σε στοιχείο <style> όταν χρησιμοποιείτε κλάση.

Στο CSS γράφονται μόνο πραγματικά δεκαεξαδικά χρώματα από τους επιλογείς χρώματος, οπότε τίποτα απρόσμενο δεν μπορεί να καταλήξει στα στυλ σας.

Escaping και ασφάλεια

Κάθε κελί περνά από escaping: τα <, > και & γίνονται <, > και &, ώστε κείμενο όπως <b> ή a < b να εμφανίζεται ακριβώς όπως πληκτρολογήθηκε αντί να ερμηνεύεται ως σήμανση. Οι αλλαγές γραμμής μέσα σε εισαγόμενα κελιά γίνονται <br>. Η προεπισκόπηση χτίζεται μόνο από αυτή τη σήμανση με escaping και περνά από έναν εξυγιαντή που κρατά μόνο στοιχεία πίνακα, οπότε ένα επικολλημένο σενάριο δεν μπορεί ποτέ να εκτελεστεί. Όλα γίνονται στο πρόγραμμα περιήγησής σας και τα δεδομένα σας δεν στέλνονται σε διακομιστή.