AngularJS Tables

Στην AngularJS μπορούμε να εμφανίσουμε πολύ εύκολα tables με τη χρήση της ng-repeat.

 

Δοκιμάστε!

 

CSS Tables

CSS Tables

Η εμφάνιση ενός πίνακα σε HTML μπορεί να βελτιωθεί σημαντικά με CSS.

Για να καθορίσετε το περίγραμμα ενός πίνακα, χρησιμοποιήστε την ιδιότητα border.

Το πλάτος και το ύψος ενός πίνακα ορίζονται από τις ιδιότητες width και height.

Η ιδιότητα text-align ορίζει την οριζόντια ευθυγράμμιση ( όπως αριστερά , δεξιά ή στο κέντρο ) και η vertical-align ορίζει την κατακόρυφη στοίχιση ( όπως πάνω, κάτω , ή μεσαίο ) του περιεχομένου σε th ή td.

Για να ελέγξετε το χώρο μεταξύ των περιγραμμάτων και του περιεχομένου σε έναν πίνακα , χρησιμοποιήστε την ιδιότητα padding σε td και th.

Προσθέστε border-bottom σε th και td για οριζόντια διαχωριστική γραμμή.

Χρησιμοποιήστε το hover σε tr για να επισημάνετε σειρές του πίνακα όταν περνάει το ποντίκι από πάνω τους.

Για ζέβρα – ριγέ πίνακες , χρησιμοποιήστε το nth-child() και προσθέσετε ένα background-color σε όλες τις ζυγές (ή μονές) σειρές του πίνακα.

Ένας responsive πίνακας θα εμφανίσει μια οριζόντια γραμμή κύλισης , αν η οθόνη είναι πολύ μικρή για να εμφανιστεί το πλήρες περιεχόμενο. Προσθέστε ένα div με overflow-x:aut γύρω από το table για να γίνει responsive.

 

Δοκιμάστε!