Φτιάχνοντας Tables αλλά με CSS

[Anastasis 48]

Margin = Εξωτερικό περιθώριο
Padding =Εσωτερικό περιθώριο

Μερικές οδηγίες: Τι κώδικα συνιστώ να βάλεις.
1) Πρώτα από όλα θα κάνεις ένα reset. Πολλοί browsers θεωρούν τα δικά τους δεδομένα (τις δικές τους εντολές) ως σωστά δεδομένα. Και επειδή μόνο σωστά δεν είναι, εσύ πρέπει να τονίσεις ότι υπάρχουν στάνταρτ δεδομένα (w3 standards). Το reset λοιπόν σημαίνει το γνωστό και κλασσικό 2 + 2 = 4, ότι δηλαδή δεν θες ο κάθε browser να κάνει το μακρύ του και το κοντό του και ότι εσύ θες να χρησιμοποιείς τα στάνταρς.

ΥΓ: W3 = Τρία "w", δηλαδή το γνωστό μας: www...... Είναι η εταιρεία που έφτιαξε τις μισές γλώσσες του internet, όπως π.χ τα css και την html.

Σε ότι αφορά το reset των margin / padding βάλε:

 

κώδικας:

* { margin:0px; padding:0px; }

ΥΓ: Το αστεράκι σημαίνει: παντού / σε όλα. Ότι δηλαδή πουθενά δεν θα έχεις margin / padding εκτός από τα μέρη που θες να βάλεις εσύ. Πουθενά, δεν θα ξεπετάγονται ανεπιθύμητα περιθώρια.


2) Μετά φτιάξε τον πίνακα σου να έχει ότι περιθώριο θες με αυτόν τον κώδικα:

κώδικας:

table { margin-left:10px; margin-right:10px;}

ΥΓ: Όπου 10px = το μέγεθος του περιθωρίου όσο το θες.

Σημ: Αντί για table μπορείς να βάλεις TD, δηλαδή "Table Data". TD είναι το κάθε "κελί", το κάθε cell. Να, δες εδώ στο καρό: #. Βλέπεις τρεις σειρές (rows), 3 στήλες (columns) και 9 td (cells).

Tip: Στα css υπάρχουν κάποιες συντομεύσεις (shortcuts) για να μην γράφεις συνέχεια τα ιδια και τα ίδια. Π.χ αντί να γράψεις: margin-left:10px, margin-right:10px, margin-top:10px, margin-bottom:10px; μπορεις να γράψεις κατευθείαν margin:10px και ξεμπέρδεψες.

Ή margin:15px auto. Το "15" θα πιάσει το top / bottom και το "auto" το left / right. Να το θυμάσαι από τους δείκτες του ρολογιού: 12 top, 3 right, 6 bottom, 9 left.

Σημ: Το ίδιο ισχύει και για το padding εκτός από το "auto" το οποίο για ένα μυστηριώδη λόγο έχει bug.

Να σου κάνω μια ερώτηση; Τι ανάλυση οθόνης έχεις;