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

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 17 Μαρ 2010 06:02

/ *
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EDIT// Τα παρακάτω γράφτηκαν με βάση το θέμα: Προσαρμογή κειμένου σε πίνακα
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* /



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.

Να σου κάνω μια ερώτηση; Τι ανάλυση οθόνης έχεις;
Τελευταία επεξεργασία από το μέλος patriot την 19 Μαρ 2010 02:29, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

geopap
Δημοσιεύσεις: 7
Εγγραφή: 30 Σεπ 2009 23:12

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

Δημοσίευση από geopap » 17 Μαρ 2010 23:56

Καταρχήν, να σε ευχαριστήσω για ότι έγραψες... :D

Η ανάλυση της οθόνης μου είναι 1280Χ1024

Σε κάποιες δοκιμές που έκανα απότι κατάλαβα, εμένα με ενδιαφέρει το Padding που όπως έγραψες και εσύ είναι για Εσωτερικό περιθώριο. Δεν είμαι σίγουρος αν πρέπει να χρησιμοποιήσω όμως το padding-right-left για το εσωτερικό του πίνακα ή κάποια άλλη εντολη.

Οφείλω να πώ, ότι κατέβασα ενα έτοιμο templates με CSS και άρχισα τα πειράματα. Χρησιμοποιω το FRONT PAGE και τώρα τελευταία ξεκίνησα και με Dreamweaver που είναι πιο εύκολο να αλλάξεις το CSS.

Στην αρχή όντως υπάρχει αυτο:

Κώδικας: Επιλογή όλων

* {
	padding : 0;
	margin : 0;
}
και επιτέλους καταλάβα τι ορίζει ακριβώς!

Κώδικας: Επιλογή όλων

#content { 
float : left; 
color : #000000; 
background : #FFFFFF; 
padding : 10px; 
min-height : 350px; 
width : 600px; 
display : inline; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px 
}
#content p {
	font-size : 1.3em;
	text-align : justify;
} 
#content h1 { 
color : #ff4c1c; 
font-weight : lighter; 
} 
#content h2 { 
padding : 20px 0 10px 0; 
color : #ff4c1c; 
font-weight : lighter; 
}
Μέσα στο content βάζω έναν απο τους πίνακες που χρησιμοποιώ:
<table border="1" cellpadding="0" cellspacing="0" width="520" height="60" id="table17">

Τον πίνακα τον έβαλα με το FRONT PAGE
Το κείμενο όμως μέσα στον πίνακα ακουμπάει στις γραμμές αριστερά και δεξιά. Αυτο θα ήθελα να αλλάξω.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 18 Μαρ 2010 12:28

Σημ: Θα χωρίσω την απάντηση σε 3-4 διαφορετικά μέρη για ευκολία.
geopap έγραψε:Η ανάλυση της οθόνης μου είναι 1280Χ1024
Ωραία ευχαριστώ. Ρώτησα για να ξέρω περίπου τι οπτικό πεδίο έχεις.

1)
Δεν είμαι σίγουρος αν πρέπει να χρησιμοποιήσω το padding-right-left για το εσωτερικό του πίνακα ή κάποια άλλη εντολη.
Λόγο του ότι δεν μπορούμε να βάλουμε το περιεχόμενο "έτσι χύμα", χωρίς κάποιες διευκρινήσεις, αναγκαζόμαστε να χωρίσουμε μια σελίδα σε πολλά μικρότερα μέρη. Αυτό το κάνουμε είτε με tables είτε με divs. Ότι και αν χρησιμοποιήσουμε όμως, μπορούμε -σε όση απόσταση θέλουμε και μας βολεύει- να τα διαχωρίσουμε μεταξύ τους (margin). Τώρα αν θέλουμε να βάλουμε στο εσωτερικό κάποιου κουτιού και άλλη απόσταση τότε θα προσθέσεις και λίγο padding.

Θα σου πω ένα παράδειγμα. Άνοιξε ένα νέο html document και σαν κώδικα css βάλε αυτό:

Κώδικας: Επιλογή όλων

#pinakas1 &#123;
      margin&#58;10px; background&#58;yellow; /* Το χρώμα μπαίνει για να βλέπουμε τι έχουμε */

#pinakas2 &#123;
      margin&#58;10px; padding&#58;50px; background&#58;pink;&#125;
Και μέσα στην html (ανάμεσα στο <body>ΕΔΩ</body>) σαν κώδικα βάλε αυτό:

Κώδικας: Επιλογή όλων

<table id="pinakas1"><tr><td>Περιεχόμενο 1ου πίνακα</tr></td></table>
<table id="pinakas2"><tr><td>Περιεχόμενο 2ου πίνακα</tr></td></table>
Θα παρατηρήσεις τα εξής:
1) Ότι οι 2 πίνακες μεταξύ τους απέχουν 10px
2) Το περιεχόμενο του ενός είναι "κολλημένο" στο όρια του πίνακα (by default πάνω και αριστερά)
3) Και ότι το περιεχόμενο του 2ου πίνακα βρίσκεται 50 ολόκληρα px (pixels) μακρυά από τα όρια του πίνακα (ότι δηλαδή δεν είναι καθόλου κολλημένο το περιεχόμενο στα όρια του πίνακα)

Συμπέρασμα: ότι και αν χρησιμοποιήσεις το αποτέλεσμα σε γενικές γραμμές είναι το ίδιο. Εσύ διαλέγεις το τι θα βάλεις ανάλογα με το τι θες.

Τέλος Νο1)
(Συνεχίζεται)
Τελευταία επεξεργασία από το μέλος patriot την 18 Μαρ 2010 12:34, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 18 Μαρ 2010 12:30

2)
Χτες σου έλεγα ότι εν συντομία μπορείς να γράψεις συντομεύσεις (shortcuts) στα css. Στα margin / padding πάνε έτσι:

Margin:
Τρόπος α) margin:10px; (εν πλήρη συντομία)
Τρόπος β) margin:10px 20px; (εν επίσης συντομία αλλά όχι πλήρη.) Το 10px πάει στο top / bottom. Το 20px στο left / right.
Τρόπος γ) margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; (αναλυτικά γραμμένα)

Ο τρόπος β) έχει ακόμα ένα: margin:10px auto; Το 10px εξακολουθεί να είναι στο top / bottom βέβαια. Και το auto εξακολουθεί να είναι στο left / right. Μόνο που του λες να υπολογίσει αυτόματα (auto) την απόσταση που θα έχει ο π.χ πίνακας από τον διπλανό π.χ πίνακα. Αυτό βέβαια προϋποθέτει να υπάρχει χώρος στα left / right. Αν το width είναι επίσης auto (όσο πάει δηλαδή) τότε δεν θα περισσεύει χώρος για εξωτερικό περιθώριο (margin).

Όπως με το margin, έτσι γίνεται και με το padding:
Τρόπος α) padding:10px; (εν πλήρη συντομία)
Τρόπος β) padding:10px 20px; (εν επίσης συντομία αλλά όχι πλήρη.) Το 10px πάει στο top / bottom. Το 20px στο left / right.
Τρόπος γ) padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; (αναλυτικά γραμμένα)

Εδώ όμως ο δεύτερος τρόπος του β) (που στο margin είναι: margin:10px auto;) δεν έχει το αντίστοιχο δεύτερο τρόπο σε padding. (Δηλαδή δεν υπάρχει padding:10px auto;) Γιατί; Ένας Θεός το ξέρει... Bug... Εκτός αν είναι κάτι που εγώ δεν έχω βρει μέχρι στιγμής... (Που δεν αποκλείεται βέβαια)

3)
Οφείλω να πώ, ότι κατέβασα ενα έτοιμο templates με CSS και άρχισα τα πειράματα. Χρησιμοποιω το FRONT PAGE και τώρα τελευταία ξεκίνησα και με Dreamweaver που είναι πιο εύκολο να αλλάξεις το CSS.
Καλή αρχή! :kaloe:
Και εγώ με την σειρά μου οφείλω να πω ότι εγώ δεν τα χρησιμοποίησα ποτέ μου αυτά τα προγράμματα (μου αρέσει να γράφω κώδικα... έτσι και αλλιώς σπάνια αν θα φτιάξω κάποια σελίδα και δεν με κουράζει ο κώδικας μία στις χίλιες να τον γράφω ολόκληρο) άρα εσύ θα πρέπει να μου δίνεις κάποιες έξτρα λεπτομέρειες για π.χ τι γράφει το τάδε κουμπί του π.χ Frontpage. Άμα χρειαστεί βέβαια.

4)
Στην αρχή όντως υπάρχει αυτο:

Κώδικας: Επιλογή όλων

* &#123;
	padding &#58; 0;
	margin &#58; 0;
&#125;
και επιτέλους καταλάβα τι ορίζει ακριβώς!
Μπορούσες και να ρωτήσεις ξέρεις, αντί να σε ταλαιπωρεί κάτι το άγνωστο! :wink:

Τέλος Νο2, Νο3, Νο4
(Συνεχίζεται)
Τελευταία επεξεργασία από το μέλος patriot την 19 Μαρ 2010 02:33, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 18 Μαρ 2010 12:32

5)

Κώδικας: Επιλογή όλων

bla, bla, bla, code.... &#40;ο κώδικας που μου έδωσες&#41;
Μέσα στο content βάζω έναν απο τους πίνακες που χρησιμοποιώ:
<table border="1" cellpadding="0" cellspacing="0" width="520" height="60" id="table17">

Τον πίνακα τον έβαλα με το FRONT PAGE
Το κείμενο όμως μέσα στον πίνακα ακουμπάει στις γραμμές αριστερά και δεξιά. Αυτο θα ήθελα να αλλάξω.
Έχεις τις εξής επιλογές:
1) Λύση με σκέτο table: Βάζεις ή στο cellpadding ή στο cellspacing κάτι άλλο εκτός από "0", ας πούμε "10px"
2) Λύση με css / και html: Βάζεις padding στο content αφού βγάλεις το border="1" από το table και το κάνεις border="0"
3) Λύση με σκέτο css: Προσθέτεις ένα κώδικα στο css (βλ. παρακάτω) και κάνει αυτό την δουλειά.

Και αντίστοιχα:
1) Δεν συνιστάται. Θα πρέπει να αλλάζεις ένα-ένα ΟΛΑ τα tables ΚΑΘΕ ΦΟΡΑ που θα θες να κάνεις κάποια αλλαγή
2) Συνιστάται μόνο 50%. Αν π.χ το θες το border τότε τι γίνεται;
3) Συνιστάται 100%. Το css αρχείο είναι ΕΝΑ αρχειάκι όλο και όλο που αλλάζει συγχρόνως ΟΛΑ τα html αρχεία σε ΟΛΑ τα tables και γλυτώνεις χρόνο και κόπο ΚΑΘΕ φορά.

Κώδικας: Επιλογή όλων

Ο κώδικας είναι αυτός&#58;
table &#123;
	border-collapse&#58;separate;
	border-spacing&#58;10px;
Τι είναι το border-collapse:seperate; Σύμφωνα με αυτό το άρθρο του πολύ γνωστού site http://www.w3schools.com "The border-collapse property sets whether the table borders are collapsed into a single border or separated"

Τέλος Νο5
(Συνεχίζεται)
Τελευταία επεξεργασία από το μέλος patriot την 19 Μαρ 2010 02:36, έχει επεξεργασθεί 3 φορές συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 18 Μαρ 2010 12:34

6)
Κάποιες διευκρινήσεις που καλό είναι να ξέρεις.
1) Συνιστώ να βάζεις παντού "0px" όχι σκέτο 0.
Πρώτον επειδή θα σε βοηθήσει να μην μπερδεύεσαι όταν βλέπεις τον κώδικα, μιας και θα γνωρίζεις εξ' αρχής ότι παντού είναι έτσι όπως τον έβαλες. Όχι "έτσι" εδώ, "αλλιώς" εκεί.
Και δεύτερον, λόγο αποφυγής μπερδευμάτων των browsers (browser conflicts) είναι καλύτερο "να διευκρινίζεις εξ' αρχής ότι αυτό που λες ΤΟ ΕΝΝΟΕΙΣ!!" όπως είχα πει και παλιότερα σε άλλο θέμα.

2) Συνιστώ να ξεχωρίζεις των κώδικα σου σε σημαντικά και ασήμαντα τμήματα. Π.χ πριν έβαλες float:left; και ακριβώς δίπλα* το color:#000000; Και αρκετά ποιο κάτω έβαλες και ένα display:inline; Όχι ότι είναι λάθος, αλλά σε ότι αφορά την εξυπηρέτιση δεν βοηθάει και πολύ. Είναι ποιο λογικό να γράψεις float:left; display:inline; δηλαδή τα σημαντικά τμήματα του κώδικα του π.χ πίνακα και μετά τα ασήμαντα. Το float και το display καθορίζουν ένα σημαντικό δεδομένο του κώδικα. Πολύ ποιο σημαντικό από ένα color που μπορεί να είναι μαύρο/άσπρο/γκρίζο/σκασίλα μας τι...

* = Για την ακρίβεια εσύ το έγραψες από κάτω, αλλά οι νοητές γραμμές που βάζουμε εμείς για να ξεχωρίζουμε με ευκολία τον κώδικα δεν ισχύουν στην όποια γλώσσα, π.χ στα css. Είτε γράψεις:

Κώδικας: Επιλογή όλων

float&#58;left; color&#58;#000000; /* δηλαδή δίπλα*/ 

είτε

Κώδικας: Επιλογή όλων

float&#58;left;
color&#58;#000000; /* &#40;δηλαδή αποκάτω&#41;*/ 
για τα css είναι το ίδιο πράγμα.

Εγώ ας πούμε τον αποπάνω κώδικα θα τον έγραφα έτσι:

Κώδικας: Επιλογή όλων

#content &#123; 
width&#58;600px; min-height&#58;350px; /* width & height δηλαδή αυτά που υποδηλώνουν την ύπαρξη του π.χ πίνακα. Χωρίς αυτά δεν μπορούμε καν να υπολογίσουμε το πόσος χώρος θα καταληφθεί, δηλαδή που θα μπει το κάθε τι. Λογικό να μπαίνουν πρώτα-πρώτα... */

margin-left&#58;0px; margin-right&#58;0px; margin-top&#58;0px; margin-bottom&#58;5px; padding&#58;10px; /* Εγώ θα έγραφα margin&#58;0px&#40;top&#41; 0px&#40;right&#41; 0px&#40;bottom&#41; 5px&#40;left&#41;.... όπως πάνε οι δεικτες του ρολογιού που σου είπα χτες&#41; και μετά το padding. Δεν έχει καμμιά ιδιαίτερη σημασία αν θα μπουν ως margin/padding ή ως padding/margin. Απλά συνήθως πάμε από έξω &#40;margin&#41; προς τα μέσα &#40;padding&#41;. &#40;Συνήθεια δικιά μου&#41; */

float&#58;left; display&#58;inline; /* Τώρα που διευκρινήσαμε το πόσο μεγάλος είναι π.χ ο πίνακας και πόση απόσταση θα έχει από ένα άλλο π.χ πίνακα, κοιτάζουμε να δούμε αν θα τον βάλουμε π.χ αριστερά. Το αν θα είναι display&#58;inline ή κάτι άλλο είναι άλλο θέμα, που αναλύω παρακάτω. */ 
3) Ότι κώδικα μου έδωσες, τον είχες γεμάτο από κενά. (π.χ: float : left; ) Μην αφήνεις κενά. Δεν συνιστάται γιατί παλιότεροι browsers μπερδεύονται. Αν και δεν πολύ ισχύει σήμερα, καλό είναι να γράφουμε σωστό κώδικα.

4) Δεν συνιστάται να δίνεις ονόματα στα divs / classes ονομάτων που υπάρχουν ήδη κατεχωρημένα από την όποια γλώσσα. Π.χ εσύ γράφεις ποιο πάνω την λέξη "table" (στο: <table border="1" cellpadding="0" cellspacing="0" width="520" height="60" id="table17">) . Αυτό μπορεί να δημιουργήσει μπερδέματα. Είναι προτιμότερο να γράφεις κάτι παρεμφερές, π.χ: tbl17, δηλαδή το ίδιο πράγμα (table) έχοντας την σιγουριά ότι δεν θα γίνει τίποτα.

Τελος Νο6 - Οριστικό τέλος
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

geopap
Δημοσιεύσεις: 7
Εγγραφή: 30 Σεπ 2009 23:12

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

Δημοσίευση από geopap » 19 Μαρ 2010 23:30

Με μια λέξη είσαι ΚΑΤΑΠΛΗΚΤΙΚΟΣ. Τα περιέγραγραψες όλα πολύ καλα.
Μετά από δύο μέρες "καψιμο" στον υπολογιστή δημιουργήθηκαν μερικά ερωτήματα ακόμη. Θα προσπαθήσω να τα εξηγήσω οσο γίνετε πιο αναλυτικά.


1ον

Μετά από την πολύ καλη σελίδα που έστειλες... ( http://www.w3schools.com ) κατάφερα με αρκετά πειράματα να κάνω ακριβώς τον πίνακα που χρησιμοποιω, αλλά με CSS. Κατάλαβα και τι εννοούσες με το καρό: # Τουλάχιστον έτσι νομίζω... :hammer:

Κώδικας: Επιλογή όλων

table
&#123;
border-collapse&#58;collapse;
width&#58;500px;
height&#58; 200px;
margin&#58;0px;
padding&#58;0px;
&#125;
table, td
&#123;
padding&#58;10px;
border&#58;1px solid black;
&#125;

 th
&#123;
text-align &#58; center;
background-color&#58;#FF6600;
color&#58;black;
&#125;

 tr
&#123;
text-align &#58; justify;
padding&#58;10px;
&#125;
Και στο body

Κώδικας: Επιλογή όλων

<body>
<table>
<tr>
<th>Επικεφαλίδα Επικεφαλίδα Επικεφαλίδα</th>

</tr>
<tr>
<td>κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενοκείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο</td>
</tr>

</table>
<p><b>Note&#58;</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results.</p>
</body>
Σίγουρα όμως θα έχω κάποια λαθάκια... π.χ. το margin:0px; padding:0px; χρειάζεται?

2ον
Το μεγαλύτερο πρόβλημα το συνάντησα όταν προσπάθησα να βάλω τον πίνακα που δημιούργησα στο content (όπως σου ειπα παραπάνω). Αυτο επειδή σε άλλα layout εχω και εκει πίνακες (πάντα με FRONT PAGE) που δεν συμφωνουν με ολα οσα έχω ορίσει. Οπότε δεν έβγαινε τίποτα σωστο. Επίσης, πότε πρέπει να χρησιμοποιείσω στο CSS "#" πότε "." και πότε να το αφήσω κενο?


3ον
Μετά.... πάλι από πολλά πειράματα, :idea: σκέφτηκα να ορίσω κάτι που να άλλαξε μόνο τους πίνακες του content (που έχω είδη με το FRONT PAGE). Ετσι λοιπόν έκανα αυτο...

Κώδικας: Επιλογή όλων

#content td &#123;
padding&#58;10px;
text-align &#58; justify;
&#125;

και στο id="table17" έβαλα id="content td"
Το αποτέλεσμα ήταν πολύ καλο. Κατάφερα να κάνω το κείμενο σε όλους τους πίνακες να έχει περιθώριο 10 px αριστερα ,δεξια και να μην αλλάξει κάτι άλλο από τους άλους πίνακες. Δεν καταφερα να κανω όμως κάτι με το th=επικεφαλίδα (αν το λέω σωστα) που μεγάλωσε το height. Δεν κατάλαβα το λόγο. Ισως φταίει το πρόγραμμα που χρησημοποιώ. Προσπάθησα να αλλάξω το height από το html αλλά μόνο μεγάλωνε.Ελπίζω να υπάρχει καπια λύση.

Τελος, εχω την ανάγκη να σ΄ευχαριστήσω που άνοιξες ενα τέτοιο θέμα.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

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

Δημοσίευση από patriot » 22 Μαρ 2010 07:37

geopap έγραψε:Μετά από την πολύ καλη σελίδα που έστειλες... ( http://www.w3schools.com )
Είναι αρκετά γνωστό εδώ στο freestuff. Σε γενικές γραμμές συνιστώ να γίνεις τακτικό μέλος εδώ. Θα βρεις πολλά χρήσιμα.
Κατάλαβα και τι εννοούσες με το καρό: # Τουλάχιστον έτσι νομίζω.................................. Επίσης, πότε πρέπει να χρησιμοποιήσω στο CSS "#" πότε "." και πότε να το αφήσω κενο?
Είναι μεγάλη ιστορία αυτό, γι' αυτό λέω να γράψω ένα νέο βοήθημα περί τούτου. Όμως επειδή τις τελευταίες 2 μέρες είμαι στο κρεββάτι δεν θα μπορέσω να το κάνω άνετα σήμερα. Σε πειράζει να περιμένεις 2-3 μέρες;

ή = Διορθωσούλα για να μην το ξανακάνεις λάθος :wink:

Κώδικας: Επιλογή όλων

table &#123;
margin&#58;0px;
padding&#58;0px;
/* Αυτός είναι ο κώδικας που έβαλες... απλά έσβησα το υπόλοιπο για να κερδίσουμε χώρο και χρόνο σε κατεβατά... Το έκανα και παρακάτω */
&#125;

table, td &#123;
padding&#58;10px;
&#125;

tr &#123;
text-align &#58; justify;
padding&#58;10px;
&#125;
Σίγουρα όμως θα έχω κάποια λαθάκια... π.χ. το margin:0px; padding:0px; χρειάζεται?
Ποιό από τα τρία;
1) Το margin του table χρειάζεται μόνο αν θες να βρίσκεται μακρυά από κάποιο άλλο αντικείμενο. Αλλά αφού το έχεις "0" τότε δεν χρειάζεται. Με την προϋπόθεση ότι έχεις βάλει το:

Κώδικας: Επιλογή όλων

* &#123;margin&#58;0px; padding&#58;0px;&#125; 
... που λέγαμε πριν, αφού κάνουν ακριβώς την ίδια δουλειά. Όσο για το padding δεν χρειάζεται καθόλου μέσα στο table. Άσχετα με προϋποθέσεις. ΔΕΝ μπαίνει padding μέσα σε table tag (Ξέρεις τι είναι τα tags; )

2) Το padding του table td χρειάζεται μόνο αν θες εσύ. Αν μάλιστα το θες, έχοντας συγχρόνως ορίσει το πλέον γνωστό:

Κώδικας: Επιλογή όλων

* &#123;margin&#58;0px; padding&#58;0px;&#125; 
... τότε επιβάλεται

3) Το padding του tr δεν χρειάζεται. Όπως και πριν: ΟΥΤΕ ΕΔΩ μπαίνει padding μέσα σε tr tag
Το μεγαλύτερο πρόβλημα το συνάντησα όταν προσπάθησα να βάλω τον πίνακα που δημιούργησα στο content (όπως σου ειπα παραπάνω). Αυτο επειδή σε άλλα layout εχω και εκει πίνακες (πάντα με FRONT PAGE) που δεν συμφωνουν με ολα οσα έχω ορίσει. Οπότε δεν έβγαινε τίποτα σωστο.
Τι προβλήματα; Τι έκανες;

Μετά.... πάλι από πολλά πειράματα, :idea: σκέφτηκα να ορίσω κάτι που να άλλαξε μόνο τους πίνακες του content (που έχω είδη με το FRONT PAGE). Ετσι λοιπόν έκανα αυτο...

Κώδικας: Επιλογή όλων

#content td &#123;
padding&#58;10px;
&#125;

και στο id="table17" έβαλα id="content td
Η ιδέα είναι άριστη. Μόνο που έκανες μερικά λαθάκια:
1) Έπρεπε ή να βάλεις μια παύλα (-) που να συνδέει αυτές τις δύο λέξεις, ή να βάλεις μόνο μία λεξη.
2) Αν ΔΕΝ βάλεις παύλα (που δεν έβαλες όντως) τότε σημαίνει άλλο πράγμα στα css από αυτό που σκέφτηκες, που δεν το έχεις μάθει ακόμα. (Δηλαδή τώρα είναι λάθος... σωστή σκέψη μεν, αλλά έπεσες στην περίπτωση δε, μιας και γίνεται αλλιώς)

2) ΑΝ ΒΑΛΕΙΣ παύλα, σημαίνει επίσης κάτι άλλο. Και τα δύο ανήκουν στην ίδια ομάδα του βοηθήματος που σου είπα ότι θα γράψω αύριο-μεθαύριο. Μέχρι τότε, συνιστώ να μην κάνεις πειράματα γιατί θα είναι πάρα πολλά για να τα μάθεις σε μια μέρα. Ήδη είπες "δύο μέρες 'καψιμο' στον υπολογιστή". Καλύτερα να μάθεις αυτά που σου είπα μέχρι στιγμής.
Το αποτέλεσμα ήταν πολύ καλο. Κατάφερα να κάνω το κείμενο σε όλους τους πίνακες να έχει περιθώριο 10 px αριστερα ,δεξια και να μην αλλάξει κάτι άλλο από τους άλους πίνακες. Δεν καταφερα να κανω όμως κάτι με το th=επικεφαλίδα (αν το λέω σωστα) που μεγάλωσε το height. Δεν κατάλαβα το λόγο. Ισως φταίει το πρόγραμμα που χρησημοποιώ. Προσπάθησα να αλλάξω το height από το html αλλά μόνο μεγάλωνε.Ελπίζω να υπάρχει καπια λύση.

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



Και τέλος, μέχρι την ώρα του βοηθήματος, πήγαινε να μάθεις τι είναι το lipsum για να μην γράφεις: "κείμενο, κείμενο, κείμενο, κείμενο"... συνέχεια. Είναι χρήσιμο σε κάθε designer που θέλει να υπολογίζει σωστά.

Κώδικας: Επιλογή όλων

<td>κείμενο κείμενο κείμενο κείμενο κείμενο </td>

Ας κάνω και εγώ μια ερώτηση. ( :P ) Ξέρεις τι είναι το doctype;

Κώδικας: Επιλογή όλων

<p><b>Note&#58;</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results.</p>
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

geopap
Δημοσιεύσεις: 7
Εγγραφή: 30 Σεπ 2009 23:12

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

Δημοσίευση από geopap » 27 Μαρ 2010 03:37

Είναι μεγάλη ιστορία αυτό, γι' αυτό λέω να γράψω ένα νέο βοήθημα περί τούτου. Όμως επειδή τις τελευταίες 2 μέρες είμαι στο κρεββάτι δεν θα μπορέσω να το κάνω άνετα σήμερα. Σε πειράζει να περιμένεις 2-3 μέρες;
Μπορώ και περιμένω... :wink: Άλλωστε το πιο σημαντικό είναι να καταλαβαίνουμε αυτα που γράφουμε. Εγω τουλαχιστον έχω μαθει αρκετά πράγματα παπαγαλία. Θα καταλάβεις και πιο κάτω.
Όσο για το padding δεν χρειάζεται καθόλου μέσα στο table. Άσχετα με προϋποθέσεις. ΔΕΝ μπαίνει padding μέσα σε table tag (Ξέρεις τι είναι τα tags; )
Από οτι ξέρω είναι λέξεις κλειδιά που αντιπροσωπεύουν κάτι... (μετα και από λίγο σκονάκι)
:D
Το μεγαλύτερο πρόβλημα το συνάντησα όταν προσπάθησα να βάλω τον πίνακα που δημιούργησα στο content (όπως σου ειπα παραπάνω). Αυτο επειδή σε άλλα layout εχω και εκει πίνακες (πάντα με FRONT PAGE) που δεν συμφωνουν με ολα οσα έχω ορίσει. Οπότε δεν έβγαινε τίποτα σωστο.
Τι προβλήματα; Τι έκανες;
Ετσι όπως κατάλαβα, ορίζοντας το td και tr να έχουν padding:10px; (στο #rightbox κ.τ.λ.) που είχα πίνακες, μεγάλωσαν κατα 20px. Πάντως το αποτέλεσμα δεν ήταν καλό. Γι'αυτό πήγα στην άλλη λύση που σου είπα.
Μέχρι τότε, συνιστώ να μην κάνεις πειράματα γιατί θα είναι πάρα πολλά για να τα μάθεις σε μια μέρα. Ήδη είπες "δύο μέρες 'καψιμο' στον υπολογιστή". Καλύτερα να μάθεις αυτά που σου είπα μέχρι στιγμής.
Πολύ σημαντικά αυτά που μου έχεις πει μέχρι τώρα και σε ευχαριστώ πολυ γιάυτο. Tα πειράματα όμως δεν γίνεται να τα σταματήσω... Κάθε μέρα βρίσκεις και με κάτι να ασχοληθείς. Οτι έχω μάθει μέχρι τώρα είναι καθαρά από πειράματα. Ετσι λοιπόν έκανα αυτό για να καταφέρω να έχω το padding:10px; μέσα στους πίνακες.

Κώδικας: Επιλογή όλων

#content h4 &#123;
padding &#58; 10px;
text-align &#58; justify;
color &#58; black;
&#125;
Όριζα το κείμενό μου h4 και μου βγήκε αυτό που ήθελα... Πάντως, δεν γνωρίζω γιατί χρησημοποίησα το "#" Γι'αυτο σου είπα οτι κάποια πράγματα τα έχω μάθει παπαγαλία.
Όσον αφορά το lipsum που μου είπες, η αλήθεια είναι οτι δεν έχω καταλάβει ακριβώς τι είναι.
Ας κάνω και εγώ μια ερώτηση. ( ) Ξέρεις τι είναι το doctype;

Πολύ καλή ερώτηση. Βρήκα αυτό w3.org και webdesignblog.gr
Κατάλαβα πόσο σημαντικό είναι αλλά οχι κάτι παραπάνω. Σηκώνώ τα χέρια. Υπάρχουν και νέες εκδόσεις για συγκεκριμένο doctype; Εγω για παράδειγμα χρησιμοποιώ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Δεν γνωρίζω αν πρέπει όμως. Στο validator.w3.org/ μου βγάζει 496 Errors, 71 warning(s). Τρέχα γύρευε δηλαδή... :D

Τέλος, για να μείνουμε λίγο ακόμη στους πίνακες. Αν θες να κάνεις έναν πίνακα με CSS χωρίς όμως να αλλάξεις κάτι από άλλους πίνακες που έχεις γίνεται? Δηλαδή να ορίσεις ότι αυτό είναι ο #pinakas1 με td ταδε και tr ταδε. Αυτό είναι ο #pinakas2 με td ταδε και tr ταδε που τα βάζεις μέσα στο #content γίνεται?

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες