Πώς να δημιουργήσετε έναν κατάλογο προϊόντων με HTML

click fraud protection

Οι πίνακες παρέχουν την απλούστερη μέθοδο δημιουργίας ενός διαδικτυακού καταλόγου σε HTML. Ένας πίνακας τριών στηλών σας δίνει χώρο για μια εικόνα προϊόντος, περιγραφή και πληροφορίες αποστολής/παραγγελίας. Η εισαγωγή πληροφοριών σε πίνακες μειώνει τον χρόνο που απαιτείται για την αιτιολόγηση του κειμένου. Επιπλέον, οι πίνακες σάς δίνουν τον έλεγχο του λευκού χώρου που περιβάλλει τις πληροφορίες στη σελίδα σας για να βελτιώσετε την εμφάνιση και τη σαφήνεια του ιστότοπού σας.

Βήμα 1

Ορίστε έναν πίνακα με περίγραμμα ενός εικονοστοιχείου χρησιμοποιώντας το άνοιγμα

ετικέτα:

Το βίντεο της ημέρας

Βήμα 2

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

Βήμα 3

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

Βήμα 4

Κλείστε τον πίνακα με την ετικέτα τέλους:

Αυτή είναι μια περιγραφή του πρώτου στοιχείου. Αυτό το στοιχείο είναι διαθέσιμο αυτήν τη στιγμή.
Αυτή είναι μια περιγραφή του δεύτερου στοιχείου. Αυτό το προϊόν είναι κατόπιν παραγγελίας.

Υπόδειξη

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

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

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

βιβλιογραφικές αναφορές

  • W3Schools.com: Πίνακες HTML