.

Δεν είναι μυστικό για κανέναν σχεδιαστή διάταξης ότι τα τραπέζια είναι κακά. Είναι δύσκολο να προσαρμοστούν και να προσαρμοστούν. Εάν στην έκδοση επιτραπέζιου υπολογιστή του ιστότοπου εξακολουθεί να είναι αρκετά εύκολο να δημιουργήσετε έναν πίνακα, τότε όταν ξεκινά η προσαρμοστική διάταξη, όλα πάνε στο διάολο.

Στην πραγματικότητα, μια από τις αποτελεσματικές επιλογές είναι να δημιουργήσετε μια οριζόντια κύλιση για τον πίνακα. Δεν είναι δύσκολο να γίνει, αλλά δεν είναι αυτό που αφορά η σημερινή ανάρτηση. Ωστόσο, θα σας το δείξω.

Πρώτη μέθοδος προσαρμογής

<div class = "table-wrap" > <πίνακας > <το κεφάλι > <tr > <ου >Υπηρεσία</th> <ου >Περιγραφή</th> <ου >Τιμή</th> <ου >Εκπτωση</th> </tr> </thead> <το σώμα > <tr > <td >Διάταξη κινητού</td> <td >Διάταξη για τηλέφωνα</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td >Προσγείωση στο CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </πίνακας> </div>

Ας διαμορφώσουμε το όλο θέμα (κυρίως πρέπει να κάνουμε στυλ επιτραπέζιο περιτύλιγμα).

1 2 3 4 5 6 7 8 9 10 11 12 13

.table-wrap (table-wrap : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) .table-wrap ( overflow-y: scroll ; ) )

Αναδίπλωση πίνακα (στοίχιση κειμένου: κέντρο, οθόνη: inline-block; χρώμα φόντου: #fff; padding: 2rem 2rem; color: #000; ) @media οθόνη και (max-width: 600px) ( .table-wrap ( υπερχείλιση-y: κύλιση; ) )

Ως αποτέλεσμα, σε πλάτος ΕΩΣ 600 pixel, ο πίνακας θα πραγματοποιήσει κύλιση, αλλά ο ιστότοπος όχι. Βολικό, αλλά σήμερα θα ήθελα να μιλήσω για κάτι άλλο.
Βρήκα μια άλλη ενδιαφέρουσα προσέγγιση για την ανταπόκριση του πίνακα. Αποτελείται από τη χρήση ιδιοτήτων δεδομένων και ψευδοκλάσεων. Τώρα θα σου τα δείξω όλα.

Δεύτερη μέθοδος προσαρμογής

Αρχικά, ας αλλάξουμε τη σήμανση:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Υπηρεσία Περιγραφή Τιμή Εκπτωση Διάταξη κινητού Διάταξη για τηλέφωνα $3000 50% Προσγείωση στο CMS WordPress Δημιουργία ιστοσελίδας με διαχειριστή. πίνακας $3000 30%

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

Ορίστε τα βασικά στυλ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

body ( text-align : center ; padding-top : 10% ; font-family : sans-serif ; background-image : url ("bg.jpg" ) ; background-size: cover; height : 100vh; color : #fff ; ) .table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) πίνακας ( περίγραμμα : 1px solid #ccc ; πλάτος : 100% ; περιθώριο : 0 ; συμπλήρωση : 0 , σύμπτυξη περιγράμματος : σύμπτυξη , διάστιχο : 0 ; ) πίνακας tr ( περίγραμμα : 1 εικονοστοιχεία συμπαγές #ddd ; πλήρωση : 5 εικονοστοιχεία ; ) πίνακας th, πίνακας td ( padding : 10px ; : κέντρο ; περίγραμμα δεξιά : 1 εικονοστοιχείο συμπαγές #ddd ; ) πίνακας th (χρώμα : #fff ; χρώμα φόντου : #444 ; μετατροπή κειμένου : κεφαλαία ; μέγεθος γραμματοσειράς : 14 εικονοστοιχεία , διάστιχο : 1 εικονοστοιχεία ; )

body ( text-align: center; padding-top: 10%, font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; height: 100vh; color: #fff ; ) .table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( περίγραμμα: 1px solid #cccc; πλάτος: 100% ; περιθώριο: 0, συμπλήρωση: 0, σύμπτυξη περιγράμματος: σύμπτυξη, διάστιχο: 0; ) πίνακας tr ( περίγραμμα: 1 εικονοστοιχείο συμπαγές #ddd; συμπλήρωση: 5 εικονοστοιχεία; ) πίνακας th, πίνακας td ( συμπλήρωση: 10 εικονοστοιχεία, στοίχιση κειμένου : κέντρο, περίγραμμα-δεξιά: 1px συμπαγές #ddd; ) πίνακας th ( χρώμα: #fff; χρώμα φόντου: #444; μετατροπή κειμένου: κεφαλαία; μέγεθος γραμματοσειράς: 14 px; διάστιχο: 1 px; )

Μοιάζει με κανονικό πίνακα, φυσικά, μετακινώντας τον ιστότοπο κατά 320-420 pixel, θα δούμε μια οριζόντια κύλιση ολόκληρου του ιστότοπου. Όχι η ουσία.

Πώς να το διορθώσετε; προσθήκη στυλ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Οθόνη @media και (μέγιστο πλάτος: 600 px) (πίνακας ( περίγραμμα : 0 ; ) πίνακας thead ( οθόνη : κανένας ; ) πίνακας tr ( περιθώριο-κάτω : 10 εικονοστοιχεία ; εμφάνιση : μπλοκ ; πλαίσιο-κάτω : 2 εικονοστοιχεία συμπαγές #ddd ; ) πίνακας td ( οθόνη : μπλοκ , στοίχιση κειμένου : δεξιά ; μέγεθος γραμματοσειράς : 13 εικονοστοιχεία ; πλαίσιο-κάτω : 1 εικονοστοιχείο με κουκκίδες #ccc ; περίγραμμα-δεξιά : 1 εικονοστοιχείο συμπαγές διαφανές ; ) πίνακας td:last-child ( border-bottom : 0 ; ) πίνακας td:before ( περιεχόμενο : attr(data- ετικέτα) ; float : αριστερά ; μετατροπή κειμένου : κεφαλαία ; βάρος γραμματοσειράς : έντονη γραφή ; ) )

Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) ( πίνακας ( περίγραμμα: 0; ) επιτραπέζια προβολή (εμφάνιση: καμία; ) πίνακας tr (περιθώριο-κάτω: 10 εικονοστοιχεία; προβολή: μπλοκ; κάτω περιγράμματος: 2 εικονοστοιχεία συμπαγές #ddd; ) πίνακας td ( εμφάνιση: μπλοκ; στοίχιση κειμένου: δεξιά; μέγεθος γραμματοσειράς: 13 εικονοστοιχεία; κάτω περιθώριο: 1 εικονοστοιχείο με κουκκίδες #cccc; δεξιά περιγράμματα: 1 εικονοστοιχεία συμπαγές διαφανές; ) πίνακας td:last-child ( border-bottom: 0; ) πίνακας td:before ( περιεχόμενο: attr(data-label); float: αριστερά; text-transform: κεφαλαία; γραμματοσειρά-βάρος: bold; ) )

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

Εδώ είναι ένα άλλο στυλό:

Όπως μπορείτε να δείτε, μετατρέψαμε τις σειρές του πίνακα σε ένα μικρό μπλοκ που περιέχει όλες τις πληροφορίες. Νομίζω ότι αυτή η επιλογή προσαρμοστικότητας τραπεζιού είναι κατάλληλη για μικρά τραπέζια. Απολαύστε το φίλοι!

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

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

Αποκριτική επίδειξη πίνακα .

Σήμανση HTML

Δημιουργήσαμε ένα απλό HTMLτραπέζι, όσο χωράει στην οθόνη, όλα είναι εντάξει. Όταν μειωθεί το πλάτος της οθόνης, ο πίνακας θα κοπεί και δεν θα δούμε τα δεδομένα του ή θα γίνει πολύ μικρός και πάλι δεν θα δούμε τίποτα.

Μάλλον προσέξατε ότι τοποθέτησα το τραπέζι μέσα στην ετικέτα divκαι προφανώς για κάποιο λόγο. Η ίδια η ετικέτα divδεν δίνει τίποτα μέχρι να του αντιστοιχίσουμε στυλ.

Στυλ CSS

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

Div (
υπερχείλιση-x: auto;
)

Ας διαμορφώσουμε το στυλ των υπόλοιπων ετικετών του πίνακα:

πίνακας (
σύνορα-κατάρρευση: κατάρρευση; /* Εμφάνιση μόνο μεμονωμένων γραμμών */
διάστιχο: 0; /* Απόσταση μεταξύ κελιών */
πλάτος: 100%;
περίγραμμα: 1px συμπαγές #afb42b;
χρώμα: #212121;
}

Th, td (
text-align: αριστερά;
padding: 8px;
}

Στιλ ετικέτας tr(σειρά) αξίζει ένα ξεχωριστό σχόλιο. Έχει γίνει ήδη κανόνας οι σειρές τραπεζιών να έχουν ριγέ εμφάνιση (ζέβρα). Μια ψευδο-κλάση χρησιμοποιείται για αυτό :nth-childμε σημασία σε παρένθεση ακόμη και. Εννοια ακόμη και, εκχωρεί ιδιότητες σε όλα τα ζυγά στοιχεία, στην περίπτωσή μας αυτό είναι το χρώμα φόντου. Έτσι, το τραπέζι θα είναι ριγέ.

Windows: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Εάν ένας πίνακας HTML περιέχει πάρα πολλά δεδομένα, γίνεται ευρύτερος από τον διαθέσιμο χώρο στη σελίδα και αρχίζει να ξεχειλίζει. Για να διορθώσετε την κατάσταση, μπορείτε να προσθέσετε οριζόντια κύλιση στον πίνακα. Παράδειγμα:

1	2	3	4	5	6	7	8	9	10
Δεδομένα_Πίνακα_1	Πίνακας_δεδομένα_2	Πίνακας_δεδομένα_3	Πίνακας_δεδομένα_4	Δεδομένα_Πίνακα_5	Πίνακας_δεδομένα_6	Δεδομένα_Πίνακα_7	Πίνακας_δεδομένα_8	Πίνακας_δεδομένα_9	Δεδομένα_Πίνακα_10

HTML/XHTML. Κώδικας:

<τραπέζι>

<tr>

<ου>1</θ>

<ου>2</θ>

<ου>3</θ>

<ου>4</θ>

<ου>5</θ>

<ου>6</θ>

<ου>7</θ>

<ου>8</θ>

<ου>9</θ>

<ου>10</θ>

</tr>

<tr>

<td>Πίνακας_δεδομένα_1</td>

<td>Πίνακας_δεδομένα_2</td>

<td>Πίνακας_δεδομένα_3</td>

<td>Πίνακας_δεδομένα_4</td>

<td>Πίνακας_δεδομένα_5</td>

<td>Πίνακας_δεδομένα_6</td>

<td>Πίνακας_δεδομένα_7</td>

<td>Πίνακας_δεδομένα_8</td>

<td>Πίνακας_δεδομένα_9</td>

<td>Πίνακας_δεδομένα_10</td>

</tr>

</ τραπέζι>

τραπέζι(οθόνη: μπλοκ; υπερχείλιση-x: αυτόματη;)

/* Πρόσθετο CSS, απλώς για να δώσω στο παράδειγμα κάποια εμφάνιση: */

τραπέζι(συνοριακή κατάρρευση: κατάρρευση;)

τραπέζι td,th(επένδυση: 10 εικονοστοιχεία, περίγραμμα: 1 εικονοστοιχεία #000 στερεά;)

Σημείωση: Ιδιότητα CSS οθόνη: μπλοκτο κάνει έτσι ώστε ο πίνακας να καταλαμβάνει μόνο όσο πλάτος χρειάζεται για να χωρέσει τα δεδομένα χωρίς οπτική παραμόρφωση. Όχι πια, χωρίς να απλώνεται σε όλο το πλάτος του διαθέσιμου χώρου στη σελίδα. Ακόμα κι αν προστεθεί ο κώδικας CSS πλάτος: 100%. Παράδειγμα:

1	2	3
Δεδομένα_Πίνακα_1	Πίνακας_δεδομένα_2	Πίνακας_δεδομένα_3

Aliosque subditos et theme

Υπάρχουν πολλές διαδικτυακές υπηρεσίες για τη δημιουργία sitemap.xml. Ωστόσο, μπορείτε να το κάνετε μόνοι σας στον υπολογιστή σας χρησιμοποιώντας το πρόγραμμα περιήγησης lynx και πολλά βοηθητικά προγράμματα γραμμής εντολών Linux. Το παρακάτω είναι ένα παράδειγμα ενός σεναρίου bash που ονομάζεται "sitemap.sh" που τα χρησιμοποιεί. Σενάριο Bash που δημιουργεί το αρχείο sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat γάτα /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | ταξινόμηση | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ sitemap/sitemap.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 i\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...Τέλος" Μετά το αρχείο σεναρίου bash έτοιμο: "chmod +x sitemap.sh" για να το κάνετε εκτελέσιμο. Κάντε λήψη του sitemap.sh στο αρχείο sitemap.sh.tar.gz (Μετά τη λήψη και αποσυσκευασία του αρχείου, αντικαταστήστε το http://www.compmiscellanea στο αρχείο .com/ με το επιθυμητό όνομα τομέα του ιστότοπου με "www" και αντικαταστήστε το http://compmiscellanea.com/ με το επιθυμητό όνομα τομέα του ιστότοπου χωρίς "www". Αντί για "στατικό" στην τελευταία γραμμή του αρχείου, βάλτε τη γραμμή που Οι σύνδεσμοι πρέπει να περιέχουν, ώστε να έχουν αφαιρεθεί από τη λίστα. Στη συνέχεια, "chmod +x sitemap.sh". Στη συνέχεια εκτελέστε το sitemap.sh) Σχόλια Κάντε λήψη του sitemap2.sh με σχόλια γραμμή προς γραμμή στο sitemap2.sh. Αρχείο tar.gz. Πριν εκτελέσετε το σενάριο bash, πρέπει να δημιουργήσετε τρεις φακέλους. Επειδή το πρόγραμμα περιήγησης lynx σε ορισμένες περιπτώσεις μπορεί να χάσει ορισμένους συνδέσμους εάν το όνομα τομέα του ιστότοπου έχει καθοριστεί με ή χωρίς "www", το σενάριο bash εκτελείται δύο φορές το lynx, επεξεργασία του ιστότοπου ανά όνομα τομέα με "www" και επεξεργασία του ιστότοπου χρησιμοποιώντας όνομα τομέα χωρίς "www". Τα δύο αρχεία που προκύπτουν τοποθετούνται σε δύο διαφορετικούς φακέλους, εδώ είναι "/home/me/sitemap/www/" και "/home/me/sitemap/www2/". Και ο κατάλογος "/home/me/sitemap/sitemap/" προορίζεται για το sitemap.xml που δημιουργήθηκε. 1. Διαδρομή προς το bash #!/bin/bash 2. Μεταβείτε στο φάκελο - το πρόγραμμα περιήγησης lynx θα τοποθετήσει εκεί τα αρχεία που λαμβάνονται κατά την επεξεργασία του ιστότοπου ανά όνομα τομέα με "www" cd /home/me/sitemap/www/ 3.

Δεν υπάρχει ιδιότητα "float: bottom" στο CSS, αλλά το αποτέλεσμα μπορεί να επιτευχθεί με πολλούς άλλους τρόπους. Παράδειγμα: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Σύνδεσμος 1 Σύνδεσμος 2 Σύνδεσμος 3 Κυμαινόμενο HTML/XHTML κάτω. Κώδικας:

CSS. Κωδικός: .box1 (θέση: σχετική; επάνω: 0px; αριστερά: 0px; float: αριστερά; ύψος: auto; πλάτος: 100%;) .content1 (θέση: σχετική; επάνω: 0px; αριστερά: 0px; float: αριστερά; ύψος: αυτόματο; πλάτος: 100%;) .left1 (θέση: σχετική; επάνω: 0px; αριστερά: 0px; float: αριστερά; ύψος: auto; πλάτος: 64%;) .menu1 (θέση: σχετική; επάνω: 0px; αριστερά: 0 px; float: αριστερά; ύψος: αυτόματο; πλάτος: 36%;) .bottom1 (θέση: απόλυτη; κάτω: 0 px; δεξιά: 0 px;) /* Πρόσθετο CSS, απλώς για να δώσουμε στο παράδειγμα κάποια εμφάνιση */ . box1 (χρώμα: #ddd; στοίχιση κειμένου: κέντρο;).content1 (φόντο: #bbb;).αριστερά1 (λεπτό ύψος: 100 px; padding: 2%; text-align: justify; background: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (padding: 2%; float: right ; φόντο: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (θέση: σχετική; επάνω: 0px; αριστερά: 0px; float: αριστερά; ύψος: auto; πλάτος: 100%; padding: 0px; περιθώριο: 0 px;).menu1 a (χρώμα: #ddd; κείμενο-διακόσμηση: κανένα;).menu1 a:hover (κείμενο-διακόσμηση: υπογράμμιση;).bottom1 (επένδυση: 2%; χρώμα: #eee; φόντο: # 600;) Όλο το περιεχόμενο της ιστοσελίδας περιέχεται στο κοντέινερ box1. Μέσα σε αυτό υπάρχουν δύο δοχεία div: 1. περιεχόμενο1 με το πραγματικό περιεχόμενο στα αριστερά και ένα μενού στα δεξιά. 2. bottom1 μετά το περιεχόμενο1.

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

Οι δημιουργοί ιστοτόπων έχουν βρει περισσότερους από έναν τρόπους για να το κάνουν αυτό. Χρησιμοποιώντας CSS και JavaScript, μπορείτε να τακτοποιήσετε κελιά σε μικρές οθόνες σε μία στήλη, μπορείτε να αποκρύψετε στήλες με όχι πολύ σημαντικά δεδομένα και ακόμη και να μετατρέψετε έναν πίνακα σε γράφημα πίτας. Όλες αυτές οι μέθοδοι έχουν περιγραφεί περισσότερες από μία φορές και στα αγγλικά και στα ρωσικά και μπορείτε εύκολα να διαβάσετε γι' αυτές στο Διαδίκτυο. Στο άρθρο μου, θα ήθελα να μιλήσω για το πώς να επιλέξετε από αυτές τις λύσεις αυτή που χρειάζεστε και ειδικά για τον ιστότοπό σας.

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

Θα συγκρίνουν οι άνθρωποι δεδομένα σε στήλες ή σειρές;

Παράδειγμα 1: Οι άνθρωποι δεν συγκρίνουν δεδομένα.

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

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

Αυτό ακριβώς έκαναν οι δημιουργοί του ιστότοπου JQuery Mobile.

Παράδειγμα 2: Τα άτομα θα συγκρίνουν δεδομένα σειρών ή στηλών

Εάν έχετε στον πίνακα σας, για παράδειγμα, μια λίστα με πανομοιότυπα δεδομένα για διαφορετικές εταιρείες, τότε είναι προφανές ότι ο χρήστης θα τα συγκρίνει για να επιλέξει την καλύτερη επιλογή για τον εαυτό του. Μπορούμε να δούμε ένα παράδειγμα τέτοιου πίνακα στην εικόνα.

Ρύζι. 3. Πίνακας με δεδομένα προς σύγκριση

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

Ρύζι. 4. Πίνακας με δεδομένα στην οθόνη του κινητού τηλεφώνου

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

Ρύζι. 5. Πίνακας με δεδομένα στην πλήρη έκδοση του ιστότοπου

Ρύζι. 6 και 7. Ο ίδιος πίνακας στην έκδοση για κινητά. Απομένουν μόνο οι πιο σημαντικές στήλες, αλλά μπορείτε να συμπεριλάβετε όλες τις άλλες εάν είναι απαραίτητο.

Ποιες πληροφορίες είναι σημαντικές;

Εάν αποφασίσετε να αποκρύψετε κάποιες πληροφορίες σε μικρές οθόνες, τότε φυσικά προκύπτει το ερώτημα: ποιες πληροφορίες είναι σημαντικές; Σε μια τέτοια περίπτωση, μπορεί να είναι χρήσιμο να κάνετε στον εαυτό σας τις ακόλουθες ερωτήσεις:

• Ποιες πληροφορίες χρειάζονται περισσότερο οι άνθρωποι;
• Ποιες στήλες είναι οι πιο σημαντικές για την κατανόηση των πληροφοριών που παρέχει ο πίνακας;
• Ποιους ομιλητές είναι πιο πιθανό να χρειαστούν οι άνθρωποι;

Θα μπορούν οι χρήστες να διακρίνουν ένα μέρος του πίνακα από ένα άλλο;

Όταν ένας χρήστης σαρώνει έναν πίνακα, σειρά προς σειρά, αναζητώντας πληροφορίες, πώς μπορεί να διακρίνει γρήγορα τη μια σειρά από την άλλη; Αυτό είναι ιδιαίτερα σημαντικό όταν χρησιμοποιούνται πίνακες στη διεπαφή εφαρμογών web.

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

Πρέπει να εμφανίζονται όλα στην οθόνη ταυτόχρονα ή μπορούν να προστεθούν πρόσθετα στοιχεία ανάλογα με τις ανάγκες;

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

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

Είναι ενδιαφέρον ότι τις περισσότερες φορές όταν ξεκινάμε ένα σχέδιο με μια έκδοση πλήρους οθόνης και βλέπουμε έναν τεράστιο πίνακα με πολύ περιεχόμενο, είναι δύσκολο για εμάς να αποδεχτούμε ότι σε μια στενή οθόνη θα χάσει μέρος αυτού του περιεχομένου. Αλλά όταν ενεργούμε βάσει της αρχής «πρώτα το κινητό», τέτοια προβλήματα δεν προκύπτουν.

Λοιπόν, τι σημασία έχει όταν πρόκειται για τραπέζια με απόκριση σχεδίασης;

• Θα καταλάβουν οι χρήστες την έννοια του πίνακα ακόμα κι αν αλλάξει η εμφάνισή του;
• Θα μπορέσουν με κάποιο τρόπο να λάβουν όλες τις πληροφορίες που υπάρχουν στον πίνακα;
• Είστε βέβαιοι ότι όλες οι διευθύνσεις URL είναι προσβάσιμες ανεξάρτητα από τη συσκευή;

Εάν μπορείτε να απαντήσετε "ναι" και στις τρεις ερωτήσεις, τότε δεν υπάρχουν προβλήματα με τους πίνακες στον ιστότοπό σας.

Το περιεχόμενό σας θα σας πει τι να κάνετε καλύτερα με τα τραπέζια σας.

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

Το περιεχόμενό σας θα σας πει τι να κάνετε καλύτερα με τα τραπέζια σας. Το καθήκον σας είναι να το αναλύσετε σωστά.