Tables σε αργή κίνηση

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

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

Tables σε αργή κίνηση

Δημοσίευση από skeftomilos » 11 Μαρ 2006 03:22

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

Ας ξεκινήσουμε από το πρώτο. Για τον Internet Explorer (5 και 6) η απάντηση είναι όχι, το table εμφανίζεται ξαφνικά ολόκληρο μόλις κατέβει όλο το περιεχόμενό του. Δε βρήκα καμία λύση σε αυτό το πρόβλημα. Ίσως και να μην είναι τόσο τραγικό, ειδικά αν το συγκρίνουμε με τα προβλήματα των άλλων browsers. Ας δούμε πρώτα ένα demo με έναν απλό πίνακα τριών στηλών να κατεβαίνει σε slow-motion.

- Simple

Όσον αφορά τον IE συμβαίνει πάντα το ίδιο, απότομη εμφάνιση του table, οπότε θα εστιάσουμε το ενδιαφέρον μας στους άλλους browsers. Τόσο ο Firefox όσο και ο Opera αρχικά τεντώνουν την πρώτη στήλη στο 100% του πλάτους μέχρι να αρχίσει να κατεβαίνει η δεύτερη, παρόλο που έχουμε δώσει width="25%". Πρόκειται σαφώς για πρόβλημα που πρέπει να λυθεί. Ας δοκιμάσουμε να προσθέσουμε ένα αρχικό <td colspan="3"> πριν από τη γραμμή με τις τρεις στήλες.

- Header span3

Τα πράγματα έγιναν κάπως καλύτερα, με τη έννοια ότι η πρώτη στήλη αρχικά τεντώνεται στο 33% αντί για το 100%, όμως εμείς την θέλουμε στο 25%. Μάλλον πρέπει να βάλουμε από ένα header cell για κάθε στήλη, αντί για ένα μονοκόμματο.

- Header cells

Αυτό δουλεύει εντάξει, αλλά αυτά τα τρία header cells πιάνουν χώρο που δε μπορούμε να μηδενίσουμε. Αν μπορούμε να αξιοποιήσουμε αυτό το χώρο έχει καλώς, διαφορετικά έχουμε πρόβλημα. Το ζητούμενο λοιπόν είναι να βρούμε κάποια λύση που να μην περιλαμβάνει από ένα header για κάθε στήλη. Ψάχνοντας το HTML specification βρήκα δύο tags που δεν έχει τύχει να συναντήσω στην πράξη, τα colgroup και col. Ο ρόλος τους είναι να βρίσκονται στην αρχή του table και να ορίζουν τα χαρακτηριστικά των στηλών πριν αυτές αρχίσουν να κατεβαίνουν, όπως width, align και nowrap. Με λίγα λόγια είναι αυτό ακριβώς που θέλουμε. Άραγε υπάρχει επαρκής υποστήριξη των browsers γι αυτά τα tags; Μία δοκιμή θα μας πείσει.

- Colgroup

Για το width υπάρχει υποστήριξη αλλά είναι buggy. O Firefox τις περισσότερες φορές εμφανίζει σωστά τις στήλες, αλλά πότε-πότε συρρικνώνει την πρώτη στήλη σαν να είχε πλάτος 0. Ο Opera τα πάει αρκετά καλά, το ίδιο και ο IE (5 και 6). Αν προσθέσουμε κι ένα ενιαίο header cell με πλατιά εικόνα κάνουν την εμφάνισή τους και άλλα bugs.

- Colgroup + Header span3 + image

Οι Firefox και Opera μπερδεύονται με την πλατιά εικόνα και μεγαλώνουν χωρίς λόγο το πλάτος της πρώτης στήλης. Στο τέλος συμμαζεύουν τη κατάσταση αλλά το οπτικό «εφέ» είναι δυσάρεστο. Άρα δεν είναι καλή ιδέα να συνδυάσουμε το colgroup με ενιαίο header.

Χωρίς να παίρνω και όρκο πιστεύω ότι βρήκα μια αρκετά ασφαλή λύση συνδυάζοντας colgroup με ορισμό width στα cells των στηλών. Firefox και Opera δείχνουν να δουλεύουν με τον επιθυμητό τρόπο:

- Colgroup + td widths

Αυτά είχα να πω για τα tables και τα προβλήματά τους. Αν έχετε να προτείνετε κανένα άλλο τέχνασμα θα ήταν καλή ιδέα να το δοκιμάσουμε να δούμε πώς δουλεύει. Για τις δοκιμές αυτές έκανα χρήση των ειδικών δυνατοτήτων της ASP.NET. Όποιος ενδιαφέρεται μπορεί να εξετάσει τα αρχεία κώδικα όλων αυτών των πειραμάτων. Το ποιο ενδιαφέρον σημείο είναι η κλάση SlowPage στο αρχείο SlowPage.js. Για να τρέξετε στον υπολογιστή σας τις σελίδες σε αργή κίνηση θα πρέπει πρώτα να δημιουργήσετε μια IIS Application για το φάκελο της εφαρμογής, μέσω του IIS snap-in. Φυσικά προϋπόθεση είναι να έχετε εγκατεστημένο τον IIS, και μαζί του το .NET Framework 1.1.
Συνημμένα
Slow-Page-Rendering.zip
(19.96 KiB) Μεταφορτώθηκε 900 φορές
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.


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

Tables σε αργή κίνηση

Δημοσίευση από patriot » 11 Μαρ 2006 13:29

1) Πριν διαβάσω την τελευταία παράγραφο ετοιμαζόμουν να ρωτήσω γιατί κάνει τόση ώρα να φορτώσει. Αν έχεις βάλει τίποτα ειδικό κώδικα. Διαβάζοντας την υποθέτω σωστά, σωστά; Υπάρχει κανένας άλλος ιδιαίτερος λόγος που το έκανες εκτός από το να κάνει τόση ώρα για να προλάβουμε να το παρατηρήσουμε;

2) Να γιατί προτιμώ τα div's :P!!
(Ή μάλλον για να ακριβολογούμε είναι καλύτερα τα div's έστω και αν εγώ λατρεύω τα tables.)

Χρησιμότατο tutorial. Προσωπικά ευχαριστώ γιατί όπως είπα λατρεύω τα tables.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Tables σε αργή κίνηση

Δημοσίευση από skeftomilos » 11 Μαρ 2006 19:24

patriot έγραψε:Υπάρχει κανένας άλλος ιδιαίτερος λόγος που το έκανες εκτός από το να κάνει τόση ώρα για να προλάβουμε να το παρατηρήσουμε;
Όχι, μόνο αυτός είναι ο λόγος. Τρέχοντας μια σελίδα στον υπολογιστή φαίνεται πάντα εντάξει, και τα προβλήματα εμφανίζονται ξαφνικά μόλις ανέβει στον server. Νομίζω ότι ο συνήθης τρόπος για την πρόκληση τεχνιτής καθυστέρησης είναι τα proxies, με τα οποία όμως δεν έχω εμπειρία. Το συγκεκριμένο ASP.NET σκριπτάκι μοιάζει να κάνει τη δουλειά του αρκετά καλά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Tables σε αργή κίνηση

Δημοσίευση από patriot » 12 Μαρ 2006 21:14

Το συγκεκριμένο ASP.NET σκριπτάκι μοιάζει να κάνει τη δουλειά του αρκετά καλά.
Αμέ... τέλεια!! :yea: :yea:
Όχι δεν είναι ενοχλητικό μην ανησυχείς.

Ευχαριστώ για την απάντηση. :wink:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Tables σε αργή κίνηση

Δημοσίευση από ThyClub » 12 Μαρ 2006 22:17

Βασικά με FF και σε 56άρα γραμμή μόνο το τελευταίο παράδειγμα φάνηκε να πάει "σωστά" .

Όλα τα παραπάνω απλά μου πετάγαν ολόκληρο το table στην μούρη... Κάνω κάτι λάθος :question:

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

Tables σε αργή κίνηση

Δημοσίευση από skeftomilos » 13 Μαρ 2006 05:58

Και σε μένα το ίδιο συμβαίνει. :) Έχω την εντύπωση πώς εξαρτάται από τον τρόπο που έρχονται κομμένα τα πακέτα με την HTML. Γενικά ο Firefox με προβλημάτισε με τη συμπεριφορά του σε αυτές τις δοκιμές.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Tables σε αργή κίνηση

Δημοσίευση από ThyClub » 13 Μαρ 2006 09:34

Bad bad firefox :P

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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