Γιατί πρέπει να αποφεύγετε να χρησιμοποιείτε πλούσιους πίνακες

Τοποθετημένοι πίνακες επιβραδύνουν τις ιστοσελίδες σας προς τα κάτω

Οι ιστοσελίδες πρέπει να κατεβάζουν γρήγορα, αλλά οι ένθετοι πίνακες μπορούν να επιβραδύνουν τη διαδικασία. Μην αφήσετε κανέναν να σας πει ότι περισσότεροι άνθρωποι χρησιμοποιούν ευρυζωνικό ή υψηλής ταχύτητας Internet, οπότε δεν χρειάζεται να ανησυχείτε για το πόσο γρήγορα φορτώνουν οι σελίδες σας. Με το ποσό του περιεχομένου στον Ιστό, μια σελίδα ή μια τοποθεσία που φορτώνει αργά θα έχει λιγότερους επισκέπτες από αυτόν που φορτώνει γρήγορα. Η ταχύτητα είναι πολύ σημαντική.

Τι είναι ένας ενσωματωμένος πίνακας;

Ένας ενσωματωμένος πίνακας είναι ένας πίνακας HTML που έχει έναν άλλο πίνακα μέσα του. Για παράδειγμα:




Στήλη 1
Στήλη 2
Στήλη 3

Στήλη 1




ένθετη στήλη στήλης 1
ένθετη στήλη στήλης 2



Στήλη 3

Στήλη 1
Στήλη 2
Στήλη 3

Φυγοκεντρικοί πίνακες προκαλούν σελίδες για λήψη αργότερα

Ένας απλός πίνακας σε μια ιστοσελίδα δεν θα προκαλέσει τη λήψη σελίδας πιο αργά (για λόγους). Αλλά τη στιγμή που βάζετε ένα τραπέζι σε ένα άλλο τραπέζι, γίνεται πιο περίπλοκο για το πρόγραμμα περιήγησης, ώστε η σελίδα να φορτώνεται πιο αργά. Και όσο περισσότεροι πίνακες έχετε ενθέσει μέσα ο ένας στον άλλο, τόσο πιο αργή θα φορτωθεί η σελίδα.

Όταν δημιουργείτε μια σελίδα με πίνακες, λάβετε υπόψη ότι όσο περισσότερους πίνακες βρίσκονται εντός των πινάκων, τόσο αργότερα η σελίδα θα φορτωθεί. Κανονικά, όταν φορτώνεται μια σελίδα, το πρόγραμμα περιήγησης ξεκινά από το επάνω μέρος της HTML και φορτώνει τη σελίδα στη συνέχεια. Ωστόσο, με τα ένθετα πινάκια, πρέπει να βρει το τέλος του πίνακα, ώστε να μπορεί να εμφανίσει ολόκληρο το πράγμα.

Πίνακες για τη διάταξη

Δεν πρέπει να χρησιμοποιείτε πίνακες για τη διάταξη στις ιστοσελίδες σας. Απαιτούν σχεδόν πάντοτε να χρησιμοποιείτε ενσωματωμένα τραπέζια, έτσι ώστε μια ιστοσελίδα Web-layout πίνακα να φορτώνεται πιο αργά από το ίδιο σχέδιο που παρέχεται στο CSS.

Επίσης, αν προσπαθείτε να γράψετε έγκυρο XHTML, οι πίνακες δεν θα πρέπει να χρησιμοποιούνται καθόλου για τη διάταξη. Οι πίνακες είναι για πίνακες δεδομένων (όπως υπολογιστικά φύλλα), όχι για διάταξη. Αντ 'αυτού, θα πρέπει να χρησιμοποιήσετε το CSS για το layout - τα σχέδια -CSS γίνονται πιο γρήγορα και θα σας βοηθήσουν να διατηρήσετε έγκυρη XHTML.

Σχεδιάζοντας ταχύτερους πίνακες φόρτωσης

Αν σχεδιάζετε έναν πίνακα με πολλές σειρές, μπορεί συχνά να φορτωθεί πιο γρήγορα αν γράφετε κάθε σειρά ως ξεχωριστό πίνακα. Για παράδειγμα, θα μπορούσατε να γράψετε έναν πίνακα όπως αυτό:




κορυφαία σειρά

αριστερή στήλη
δεξιά στήλη

Αν όμως γράψετε το ίδιο τραπέζι με δύο τραπέζια, θα φαινόταν να φορτώνεται πιο γρήγορα, επειδή το πρόγραμμα περιήγησης θα έκανε το πρώτο και στη συνέχεια θα αποδώσει το δεύτερο, παρά την απόδοση όλου του πίνακα ταυτόχρονα. Το κόλπο είναι να βεβαιωθείτε ότι κάθε τραπέζι έχει πανομοιότυπα πλάτη και άλλα στυλ (όπως padding, περιθώρια και σύνορα).



κορυφαία σειρά




αριστερή στήλη
δεξιά στήλη

Μετατρέποντας τους πίνακες που έχουν τοποθετηθεί σε ένα πίνακα

Μπορεί να αισθάνεστε ότι όλα αυτά είναι καλά στοιχεία, αλλά έχετε έναν πίνακα που πρέπει να έχει ένα άλλο πίνακα ένθερμο σε αυτό. Παρόλο που αυτό μπορεί να ισχύει, συχνά μπορείτε να μετατρέψετε τους ενσωματωμένους πίνακες σε ελαφρώς πιο περίπλοκα απλά τραπέζια χρησιμοποιώντας τα χαρακτηριστικά και τα στοιχεία στα κελιά του πίνακα. Για παράδειγμα, στον ενσωματωμένο πίνακα στην κορυφή, μπορώ να μετατρέψω αυτό σε ένα μόνο πίνακα με μόνο το χαρακτηριστικό colspan :





Στήλη 1
colspan = "2" > Στήλη 2
Στήλη 3

Στήλη 1
ένθετη στήλη στήλης 1
ένθετη στήλη στήλης 2
Στήλη 3

Στήλη 1
colspan = "2" > Στήλη 2
Στήλη 3

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