CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Σχόλια από τον χώρο του Web Design, Web Development.

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

Απάντηση
Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27618
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cordis » 12 Δεκ 2005 18:45

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

Pure CSS με χρήση DIV;
Σκέτα Tables με το formatting επάνω τους;
Tables με το formatting τους σε CSS;

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

παραδείγματα πολλά δεν έχω με σκέτο CSS για να πω γνώμη, από την άλλη μπορώ να καταλάβω πως το να βάλεις όλο το formatting μέσα στο table είναι δύσχρηστο, κακό στην διαχείριση και γεμίζει τον κόσμο σκουπίδια χαλώντας σου το SEO.

Η μέση λύση μου φαντάζει πιο λογική, πιο εύκολη στην αρχική κατασκευή, πιο ευκολονόητη στην μορφή, και εύκολη στην συντήρηση. Αυτήν ακολουθώ, αν και ποτέ δεν δήλωσα designer, ένας απλός προγραμματιστής είμαι παιδιά.. ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από RADICAL » 12 Δεκ 2005 20:16

Όπως δείχνουν τα πράγματα το pure css είναι η σωστή λύση.

Πέρα από τα θέματα usability, accesibility, media καθώς και από τον διαχωρισμό ουσιαστικά πλέον των projects (programmer, web designer, editor, publisher)
και όλα τα σχετικά που ο cherouvim έχει επισημάνει (πολύ καλύτερα από μένα) σε διάφορα post,
το να χρησιμοποιεί κανείς tables για όλο το content της σελίδας είναι "λάθος" καθώς δεν είναι αυτή ουσιαστικά η λειτουργία του.
Αυτό βέβαια δεν σημαίνει πως πρέπει να ξεχάσουμε και το tag <table>
Όταν θες να δείξεις έναν πίνακα τότε σίγουρα το σωστό είναι να τον να εμφανίσεις σε ένα table.
Γίνεται βέβαια και με css αλλά δεν υπάρχει λόγος.
Εφόσον είναι πίνακας τον βάζεις σε table.
(Μέσα σε ένα div όμως σεταρισμένο από το style sheet. :wink: )

Οτιδήποτε άλλο περιεχόμενο δεν χρειάζεται table πόσο μάλλον να μπει όλη η σελίδα μέσα σε ένα.
Ακούω συχνά από designers πως δεν μπορούν να συγκρατήσουν τα περιεχόμενα τους με css αλλά αυτό δεν είναι αλήθεια.
Το θέμα είναι πως δεν έχουμε συνηθίσει ακόμα να σχεδιάζουμε σωστά με css.

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

Γενικά πάντως το να σχεδιάζεις ακόμα με tables δεν είναι και λάθος για τον οποιοδήποτε
απλά αμα είσαι επαγγελματίας πρέπει αναγκαστικά για δικό σου συμφέρον να ακολουθείς τις εξελίξεις στον χώρου σου και να συμβαδίζεις με τις νέα δεδομένα.
Και εδώ μάλιστα δεν μιλάμε για ένα ακόμη trend η μια μόδα που θα περάσει αλλά πλέον για το σωστό τρόπο σχεδίασης.
Εικόνα

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cherouvim » 12 Δεκ 2005 21:21

Symfono me ton RADICAL.
Pantos paides den tithete thema gnomis kai prosopikis apopsis. Ta pragmata ehoun ypothei kai oristei edo kai polla hronia apo tous protomastores tou mesou tou opoiou hrisimopoioume.W3C.

Tables are bad for layout.
Tables are good for tabular data.

Einai telios grafiko na vlepo atoma pou den ehoun diavasei oute ena blog entry, vivlio, tutorial, specification gia to thema na kordonontai kai na fonazoun oti i apopsi tous einai sosti. To oti mporei kapios na htizei sites me tables, <HTML BGCOLOR=', inline CSS, onclick='xxx', images gia spacers kai javascript image preloaders, kai na vgazei lefta kai na aftoapokaleitai web developer alla parolafta na min kserei pios einai o useit.com, to w3c, to gecko engine kai to wasp mporei na ton kanei epagelmatia logo tou oti vgazei hrima alla stin ousia einai katoteros apo tous protoetis panepistimion pou htizoun sites ston cocoon me XSLT transformators kai valid CSS/XHTML.

Oso gia ti plisi egefalou pou leei i Michelle, afto onomazetai 'Educate your clients' kai einai kati pou profanos to ekane kapios pou iksere apla i Michelle to metefrase lathos. Opos lathos metefrase kai o Basilakisweb ti lista me tis diorthosis pou evgala gia tin af sto rose.gr kai tin onomase 'kakovoula sholia'.

To google einai o filos sas, hrisimopoihste to. Me olo to sevasmo, afto to forum einai oraio alla apo mono tou den dynatai na dosei kathari kai sosti gnosi. Min vgalei kaneis symperasmata gia to thema mesa apo afta pou tha ypothoune se afto to thread. Horis entatiko research kai trivi sto thema den ginete na apofasizoume kai na leme oti theloume.

Keep it up

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από agrippas » 12 Δεκ 2005 21:41

Το πρόβλημα της διαχείρισης το λύνει το CSS, είτε το φτιάχνεις για <div> είτε για <td>. Αν θέλεις να τα κάνεις όλα με div tags πρέπει να έχεις στο μυαλό σου όλες τις ανωμαλίες του κάθε browser (κυρίως του Explorer).

Εγώ σε πολύ ιδιότροπα sites μπορεί να βάλω ένα table να κρατάει όλο το layout και αν χρειαστώ μικρότερα κουτάκια μέσα τα κάνω με div. Κανονικά δεν πρέπει, αλλά καμιά φορά κάνει τη ζωή μου πιο εύκολη. Σε πιο στρωτά sites δεν ανακατεύω καθόλου tables παρά μόνο όταν έχω να δείξω data με μορφή πίνακα. Χρησιμοποιώ CSS και στις δύο προσεγγίσεις.

Για να λύσω το πρόβλημα με τις ασυμβατότητες χωρίς κομπογιαννέ hacks, φτιάχνω το css να είναι dynamic και να αλλάζει ανάλογα με το browser.

Και από θέμα οικονομίας να το πάρουμε, άλλο να γράφεις <table><tr><td>blah</td></tr></table> και άλλο <div>blah</div>. 66% λιγότερος κώδικας = 66% πιο γρήγορο display στο browser.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ThyClub » 12 Δεκ 2005 22:09

Το έχουμε πεί πολλές φορές. Το κέρδος του να χρησιμοποιείς tableless designs vs "ευκολία" του table.

Σε λίγο καιρό με τις νέες εκδόσεις των browsers ο κόσμος όλο και θα απομακρύνεται απο τα table layouts. Η γραμμή έχει χαραχτεί.

Δεν έχω να πω κάτι άλλο μιας και το θέμα έχει εξαντληθεί :D

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27618
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cordis » 12 Δεκ 2005 22:10

είναι αλήθεια ότι το rendering των tables είναι περίεργο. Σε άλλους πιο αργό, σε άλλους πιο γρήγορο... με τους "γρηγορότερους" να χάνουν σε αξιοπιστία. Αλλά μήπως και το rendering των div δεν είναι κι αυτό με την σειρά του προβληματικό; άλλα δείχνει ο ένας κι άλλα ο άλλος. Μαεστρία χρειάζεται και στα δύο και ο καλός ο μάστορας κάνει θαύματα είτε με το ένα είτε με το άλλο.

Ας μη γινόμαστε ακραίοι. Δεν μπορείς να πεις αν κάποιος είναι επαγγελματίας ή όχι από την μεθοδολογία που ακολουθεί, αλλά από την ποιότητα της δουλειάς του. Αλλιώς με την ίδια ευκολία θα μπορούσα να πω ότι όποιος προγραμματιστής δεν χρησιμοποιεί inheritance δεν είναι επαγγελματίας ανεξάρτητα από την ποιότητα και την αξιοπιστία της παραγόμενης εφαρμογής. Τα ράσα δεν κάνουν τον παπά. ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cherouvim » 12 Δεκ 2005 23:45

agrippas έγραψε:Για να λύσω το πρόβλημα με τις ασυμβατότητες χωρίς κομπογιαννέ hacks, φτιάχνω το css να είναι dynamic και να αλλάζει ανάλογα με το browser.
To content negotiation pou kaneis to hrisimopoiousa kai ego alla kateliksa se css hacks. Einai pio grigora kai pio apla.

@cordis: Enoeitai oti ta rasa den kanoun to papa, alla enas programer pou den kserei to inheritance to 2005 pragmatika prepei na gyrisei piso sto sholeio kai na ksanaprogramatisei epagelmatika meta apo 2 hronia diavasmatos.

Otan milame gia tahytita sto CSS den leme posi ora tha hriastei to rendering sto browser. Oi ypologistes mas einai grigoroi kai rendaroun ena nested table 20 epipedon se merika miliseconds. To thema tahytitas exei na kanei me to megethos tou HTML kodika pou polles fores simainei lefta gia ton browser hristi kinitou i gia ton idioktiti server pou exei 100.000 unique visits tin imera. Posa lefta kerdizei an apo ta 33kb tag-soup html kodika perasei se 3.3kb katharou css styled content gia kathe user click?

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από dva_dev » 13 Δεκ 2005 09:38

agrippas έγραψε: Και από θέμα οικονομίας να το πάρουμε, άλλο να γράφεις <table><tr><td>blah</td></tr></table> και άλλο <div>blah</div>. 66% λιγότερος κώδικας = 66% πιο γρήγορο display στο browser.
Μπορείς να εξηγήσεις λιγάκι γιατί αφαιρώντας 66% κώδικα από μια σελίδα έχεις και 66% γρηγορότερο display σε μια σελίδα;

Αν υποθέσουμε ότι έχω μια σελίδα 100kb (μόνο κείμενο) από τον οποίο τα 10kb (το 10% της σελίδας) είναι html κώδικας και το υπόλοιπο κείμενο, και μειώσω κατά 66% το μέγεθος του κώδικα, θα έχω λοιπόν μια σελίδα με 3,4% html (3,4kb) και τα υπόλοιπα 90kb κείμενο.
Εχω λοιπόν μια νέα σελίδα 93,4kb σε σχέση με την παλιά που ήταν 100kb.
Αν ο υπολογιστής μου είναι αργός και κάνει π.χ. 100sec για να δείξει την παλιά σελίδα γιατί θα κάνει 66% πιο γρήγορα να δείξει τη νέα σελίδα (μόνο 34 sec);

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από Basilakis » 13 Δεκ 2005 11:13

Loion kala ola afta pou leme, omws gia poio logo na mhn xrhsimopoioume kai ta dyo. Egw prwsopika bazw kai divs gia osa xreiazomai kai tables gia ta kyria keimena ktlp. Ena thelw na valw ena text kai mia fwtografia apo dipla pio efkola to kanw me divs para me tables. Etsi loipon lyste mou thn aporia ean einai asxhmo afto pou kanw egw. Kai ta 2 se ena!

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από agrippas » 13 Δεκ 2005 15:38

dva_dev έγραψε:
agrippas έγραψε: Και από θέμα οικονομίας να το πάρουμε, άλλο να γράφεις <table><tr><td>blah</td></tr></table> και άλλο <div>blah</div>. 66% λιγότερος κώδικας = 66% πιο γρήγορο display στο browser.
Μπορείς να εξηγήσεις λιγάκι γιατί αφαιρώντας 66% κώδικα από μια σελίδα έχεις και 66% γρηγορότερο display σε μια σελίδα;
Εννοώ 66% οικονομία στα html tags κάτι που αν δεν είχε καθόλου κείμενο η σελίδα θα έβγαζε κατά 66% μικρότερο αρχείο άρα και μικρότερο χρόνο download/display. Το πόση αναλογία κειμένου έχει μια σελίδα δεν είναι σταθερό. Δεν έλαβα υπόψη αυτό που είπε ο cordis για το χρόνο rendering των tables και των divs από τους browsers. Sorry για την ανακριβή διατύπωση και διατίθεμαι να πληρώσω αποζημίωση μέχρι 2 εκατομμυρίων ευρώ σε κάθε θιγέντα.

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από sibas » 14 Δεκ 2005 00:32

Η δικιά μου γνώμη και πάντα για μεγάλα site το css είναι ότι καλύτερο.
(Από την στιγμή βέβαια που λύσει κάποιος τα προβλήματα ασυμβατότητας.)
Διαχείριση, οικονομία, ταχύτητα, άμεσες αλλαγές όποτε το θελήσεις σε όλο το site, είναι μερικά χαρακτηριστικά που πρέπει να τα σκεφτεί καλύτερα κάποιος που ανήκει στον χώρο, ειδικά αν είναι στάσιμος στα tables, τα tables είναι καλά λειτουργούν σχεδόν παντού, αλλά για να κάνεις μια αλλαγή σε όλο το site μάλλον θα το σκεφτείς περισσότερο από ότι χρειάζεται + όλα αυτά τα <table><tr><td> που σε μικρές σε όγκο σελίδες δεν έχεις πρόβλήμα αλλά σε μεγάλες το bandwidth το τρώνε άσκοπα και χωρίς να το καταλαβαίνεις.
Δεν θα αργήσουν πολύ όλοι οι μεγάλοι browsers να υποστηρίζουν 100% το css και μην ξεχνάμε ότι έρχεται και το css3,
όποιος μείνει στα tables αυτός θα χάσει.
Έτσι λοιπόν Pure CSS με χρήση DIV.

Άβαταρ μέλους
ForzaInter
Δημοσιεύσεις: 340
Εγγραφή: 22 Οκτ 2005 22:37
Τοποθεσία: Διπλανό δωμάτιο

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από ForzaInter » 14 Δεκ 2005 15:40

Τα divs όμως, απ'ότι έχω καταλάβει έχουν μια παράξενη συμπεριφορά. Αν κάνεις κάποιες αλλαγές σε κάποια διπλανά κομμάτια,π.χ tables, το div πάει βόλτα. Το position πρέπει να είναι absolute ή relative? :roll:

Επίσης, χρήση σκέτου css ενδείκνυται, χωρίς καν tables, ή divs? Πάντως, τις ταμπλέτες τις βάζεις κάπου και μένουν εκεί, βρέξει-χιονίσει.Σωστά?
I told you we would make it to the sunshine one day...you just got there a little quicker

Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από skeftomilos » 15 Δεκ 2005 11:13

Agrippas έγραψε:Και από θέμα οικονομίας να το πάρουμε, άλλο να γράφεις <table><tr><td>blah</td></tr></table> και άλλο <div>blah</div>. 66% λιγότερος κώδικας = 66% πιο γρήγορο display στο browser.
Σωστό αυτό, εκτός από την περίπτωση που ο server στέλνει ζιπαρισμένα τα αρχεία, οπότε όλα αυτά τα επαναλαμβανόμενα tags συμπιέζονται πολύ καλά.

Να θέσω και μια άλλη παράμετρο. Σήμερα πάρα πολλά sites σερβίρουν δυναμικό περιεχόμενο, και τα δεδομένα δε βρίσκονται αποθηκευμένα σε XHTML αρχεία αλλά σε databases. Για την εμφάνιση των δεδομένων φροντίζουν templates. Στο κάτω-κάτω ακόμα και οι σελίδες PHP, ASP, JSP κ.λπ. μπορούν να θεωρηθούν ένα είδος template. Υπό αυτές τις συνθήκες το βασικότερο όφελος του CSS design χάνεται, ενώ ταυτόχρονα το gzip αφαιρεί τι δεύτερο σημαντικότερο όφελος. Τι μένει λοιπόν για να αντισταθμίσει τα μεγάλα πρακτικά σημερινά προβλήματα του CSS; Τι θα κερδίσει ο developer Cordis αν μάθει και μετά εφαρμόσει όλα τα παρανοϊκά CSS hacks που έχουν εφευρεθεί; Θέλετε ένα hack; Ορίστε, να το Tan hack: :P

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

* html #bevel-lr &#123;left&#58; 3px; lef\t&#58; 0px;&#125;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από RADICAL » 16 Δεκ 2005 15:49

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

Ο developer Cordis όπως λές δέν χρειάζεται να μάθει css όσο καιρό κάνει την δουλειά του και είναι ευχαριστημένος με το αποτέλεσμα των tables.
Και δεν χρειάζεται γιατί είναι προγραμματιστής και όχι designer.
Και εδώ ερχόμαστε σε αυτά που έχουμε πέι παραπάνω για τους διαφορετικούς ρόλους που χρειάζονται πλέον για να γίνει μια μεγάλη εφαρμογή. Ο προγραμματιστής π.χ. δεν έχει καμία ανάμειξη με το interface το οποίο πλέον φτιάχνει άλλος και άλλος μπορεί επίσης να είναι ο publisher.
Εγώ π.χ. αυτήν την εποχή δουλεύω για μiα εφαρμογή σε java και στα jsp που φτιάχνω δέν έχω γράψει ούτε μια γραμμή κώδικα java, καθώς ότι χρειάζομαι πλεόν γίνεται με taglibs που μου φτιάχνει ο προγραμματιστής που και αυτός με την σειρά του δεν ακουμπάει κάν τα jsp και τα css.

Με αυτά θυμήθηκα κάποιες αγγελίες εργασίας που έχω δει κατα καιρούς
που είναι ένας τύπος και γράφει:
Ζητάμε Άτομο με άριστη γνώση html, php, java, asp, javascript, CSS,
mysql,(το καλύτερο τώρα) Photoshop καθώς και (το κορυφαίο) Καλή γνώση Μacromedia Flash θα εκτιμηθεί. :o email:theloenanatakeneiola@yahoo.com :P

Τι ακριβώς ψάχνει αυτός δλδ? Δέν γίνονται όλα μαζί.
Άλλη η δουλέια του προγραμματιστή, άλλη του designer, άλλη του γραφίστα και πάει λέγοντας....
Εικόνα

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27618
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

CSS με Tables ή χωρίς Tables... λες με σκέτα tables;

Δημοσίευση από cordis » 17 Δεκ 2005 11:44

κι εγώ νομίζω ότι θα ήταν πολύ δύσκολο να γυρίσει μια σελίδα σαν το freestuff.gr ας πουμε σε tableless design
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Απάντηση

Επιστροφή στο “Web Usability & Accessibility”

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

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