Πώς να σχεδιάσετε έναν πίνακα σε html. Χαρακτηριστικό ετικετών και

βρίσκεται το σώμα του τραπεζιού. Το σώμα αποτελείται από γραμμές και στήλες. Ο πίνακας συμπληρώνεται γραμμή προς γραμμή.

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

Πώς να φτιάξετε ένα τραπέζι στο HTML

Ας δώσουμε ένα παράδειγμα, κώδικας html:

Παράδειγμα πίνακα
Στήλη 1 Στήλη 2

Δώστε προσοχή στο κελί . Χρησιμοποιούμε το ειδικό χαρακτηριστικό colspan για την οριζόντια επέκταση των κελιών. Η αριθμητική του τιμή υποδεικνύει τον αριθμό των στηλών που πρέπει να συγχωνευθούν. Υπάρχει επίσης ένα ανάλογο αυτού του χαρακτηριστικού: ετικέτα (κεφαλίδα πίνακα), όπου πρέπει επίσης να εισαγάγετε colspan. Το αποτέλεσμα θα είναι το ίδιο. Αλλά συχνά χρησιμοποιούν κανονικό TD.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά σε όλα τα χαρακτηριστικά της ετικέτας

.

Προσθήκη ετικετών στις ιδιότητες και τις ιδιότητες

Για άνοιγμα ετικέτας

Μπορείτε να καθορίσετε διάφορα χαρακτηριστικά.

1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

Στο παραπάνω παράδειγμα, ευθυγραμμίσαμε τον πίνακα στο κέντρο align="center" .

Αυτό το χαρακτηριστικό μπορεί να εφαρμοστεί όχι μόνο στον πίνακα, αλλά και σε μεμονωμένα κελιά πίνακα

. Έτσι, η ευθυγράμμιση θα είναι διαφορετική σε διαφορετικά κελιά.

Για παράδειγμα

, , , ή
  • cols - εμφανίζεται η γραμμή μεταξύ των στηλών
  • κανένα - όλα τα σύνορα είναι κρυμμένα
  • σειρές - σχεδιάζεται ένα περίγραμμα μεταξύ των σειρών του πίνακα που δημιουργούνται μέσω της ετικέτας
  • 12. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε σε ποσοστά.

    13. Ιδιότητα class="class_name" - μπορείτε να καθορίσετε το όνομα της κλάσης στην οποία ανήκει ο πίνακας.

    14. Ιδιότητα style="styles" - τα στυλ μπορούν να οριστούν ξεχωριστά για κάθε πίνακα.

    Τώρα είναι ώρα να βουτήξετε μέσα στον πίνακα και να δείτε τα χαρακτηριστικά των κελιών του πίνακα. Αυτά τα χαρακτηριστικά πρέπει να γράφονται στην αρχική ετικέτα

    Και Οι ίδιες επιλογές είναι διαθέσιμες όπως για θα εφαρμοστεί ιεραρχικά σε όλους Και

    Ο ευκολότερος τρόπος για να κατανοήσετε πώς να χρησιμοποιήσετε τη σειρά και την ομαδοποίηση στήλης είναι να χρησιμοποιήσετε το παράδειγμα ενός πίνακα Sudoku.


    Η ετικέτα COL ρυθμίζει τις παραμέτρους χωριστά για κάθε στήλη. Δεν έχει σημασία πώς να γράψετε στον πηγαίο κώδικα:

    ή

    Παράδειγμα
    ή γραμμές
    ... ... ...

    2. Ιδιότητα background="URL" - ορίζει την εικόνα φόντου. Αντί για τη διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου.

    Παράδειγμα

    Παράδειγμα πίνακα
    Στήλη 1 Στήλη 2

    Μετατρέπεται στα ακόλουθα στη σελίδα:

    Στο παραπάνω παράδειγμα, η εικόνα φόντου μας βρίσκεται στον φάκελο img (ο οποίος βρίσκεται στον ίδιο κατάλογο με τη σελίδα html) και η εικόνα ονομάζεται fon.gif. Λάβετε υπόψη ότι στην ετικέτα προσθέσαμε style="color:white;" . Επειδή το φόντο είναι σχεδόν μαύρο, για να αποτρέψουμε την ανάμειξη του κειμένου με το φόντο, κάναμε το κείμενο λευκό.

    3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του πίνακα. Μπορείτε να επιλέξετε οποιοδήποτε χρώμα από ολόκληρη την παλέτα (δείτε κωδικούς και ονόματα χρωμάτων html)

    4. Ιδιότητα border="number" - ορίζει το πάχος του περιγράμματος του πίνακα. Σε προηγούμενα παραδείγματα, καθορίσαμε border="1" , που σημαίνει ότι το πάχος του περιγράμματος είναι 1 pixel.

    5. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος. Αν border="0" τότε δεν θα υπάρχει περίγραμμα και το χρώμα του περιγράμματος δεν θα έχει νόημα.

    6. Ιδιότητα cellpadding="number" - εσοχή από το πλαίσιο έως τα περιεχόμενα του κελιού σε pixel.

    7. Ιδιότητα cellpacing="number" - η απόσταση μεταξύ των κελιών σε pixel.

    8. Ιδιότητα cols="number" - ο αριθμός των στηλών. Εάν δεν το ορίσετε, το ίδιο το πρόγραμμα περιήγησης θα καθορίσει τον αριθμό των στηλών. Η μόνη διαφορά είναι ότι ο καθορισμός αυτής της παραμέτρου πιθανότατα θα επιταχύνει τη φόρτωση του πίνακα.

    9. Ιδιότητα frame="parameter" - πώς να εμφανίζετε περιγράμματα γύρω από τον πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

    • κενό - μην σχεδιάζετε σύνορα
    • περίγραμμα - περίγραμμα γύρω από το τραπέζι
    • πάνω - περίγραμμα κατά μήκος της επάνω άκρης του τραπεζιού
    • κάτω - περίγραμμα στο κάτω μέρος του πίνακα
    • hsides - προσθέστε μόνο οριζόντια περιγράμματα (πάνω και κάτω μέρος του πίνακα)
    • vsides - σχεδιάστε μόνο κάθετα περιγράμματα (στα αριστερά και δεξιά του πίνακα)
    • rhs - περίγραμμα μόνο στη δεξιά πλευρά του πίνακα
    • lhs - περιθώριο μόνο στην αριστερή πλευρά του πίνακα

    10. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε σε ποσοστά.

    11. Κανόνες ιδιοτήτων="παράμετρος" - πού εμφανίζονται τα περιγράμματα μεταξύ των κελιών. Μπορεί να λάβει τις ακόλουθες τιμές:

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

    Ιδιότητες και Ιδιότητες

    1. Ιδιότητα align="parameter" - ορίζει τη στοίχιση ενός μεμονωμένου κελιού πίνακα. Μπορεί να λάβει τις ακόλουθες τιμές:

    • αριστερή - αριστερή στοίχιση
    • ευθυγράμμιση κέντρου - κέντρου
    • δεξιά - δεξιά στοίχιση

    2. Ιδιότητα background="URL" - ορίζει την εικόνα φόντου του κελιού. Αντί για τη διεύθυνση URL, θα πρέπει να γραφτεί η διεύθυνση της εικόνας φόντου.

    3. Ιδιότητα bgcolor="color" - ορίζει το χρώμα φόντου του κελιού.

    4. Ιδιότητα bordercolor="color" - ορίζει το χρώμα του περιγράμματος του κελιού.

    5. Ιδιότητα char="letter" - καθορίζει το γράμμα από το οποίο πρέπει να γίνει η στοίχιση. Η τιμή του χαρακτηριστικού align πρέπει να οριστεί σε char.

    6. Ιδιότητα colspan="number" - ορίζει τον αριθμό των οριζόντιων κελιών που θα συγχωνευθούν.

    7. Ιδιότητα height="number" - ορίζει το ύψος του πίνακα: είτε σε pixel είτε ως ποσοστό.

    8. Ιδιότητα width="number" - ορίζει το πλάτος του πίνακα: είτε σε pixel είτε ως ποσοστό.

    9. Ιδιότητα rowspan="number" - ορίζει τον αριθμό των κάθετων κελιών που θα συγχωνευθούν.

    10. Ιδιότητα valign="parameter" - κάθετη στοίχιση των περιεχομένων του κελιού.

    • επάνω - ευθυγραμμίστε τα περιεχόμενα του κελιού στην επάνω άκρη της σειράς
    • μεσαία - μέση ευθυγράμμιση
    • κάτω - ευθυγράμμιση στο κάτω άκρο
    • γραμμή βάσης - ευθυγράμμιση με τη γραμμή βάσης
    Σημείωση 1

    Για ετικέτα

    . Παράμετροι για μία ετικέτα
    μέσα του

    Πώς να αποτρέψετε τη συγκόλληση των περιγραμμάτων κελιών σε έναν πίνακα

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

    ...

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


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

    Εργαλεία για την περιγραφή πινάκων σε HTML

    Καθώς αναπτύχθηκε το WWW, κατέστη σαφές ότι οι πόροι που περιέχονται στην HTML δεν επαρκούσαν για την υψηλής ποιότητας εμφάνιση διαφόρων τύπων εγγράφων. Το μειονέκτημα της HTML ήταν η έλλειψη εργαλείων για την εμφάνιση πινάκων. Για το σκοπό αυτό, προδιαμορφωμένο κείμενο (ετικέτα

    ), στο οποίο ο πίνακας είχε περιγραφεί με χαρακτήρες ASCII.  Όμως αυτή η μορφή παρουσίασης πίνακα δεν ήταν αρκετή Υψηλή ποιότητακαι ξεχώριζε από το γενικό ύφος του εγγράφου.  Μετά την εισαγωγή των πινάκων σε HTML, οι Webmasters δεν είχαν απλώς ένα εργαλείο για την τοποθέτηση κειμένου και αριθμητικών δεδομένων, αλλά ένα ισχυρό εργαλείο σχεδίασης για την τοποθέτηση γραφικών εικόνων και κειμένου στη σωστή θέση στην οθόνη.

    Δημιουργία πινάκων σε HTML

    Η ετικέτα χρησιμοποιείται για την περιγραφή πινάκων<ТАВLЕ>. Ετικέτα<ТАВLЕ>Το , όπως και πολλά άλλα, μεταφράζει αυτόματα τη γραμμή πριν και μετά τον πίνακα.

    Δημιουργία γραμμής - ετικέτας πίνακα<ТR>

    Ετικέτα<ТR>(Σειρά πίνακα) δημιουργεί μια σειρά πίνακα. Όλο το κείμενο, άλλες ετικέτες και χαρακτηριστικά που πρέπει να τοποθετηθούν σε μία γραμμή πρέπει να τοποθετηθούν μεταξύ των ετικετών lt;TR>.

    Ορισμός κελιών πίνακα - ετικέτα<ТD>

    Τα κελιά με δεδομένα τοποθετούνται συνήθως μέσα σε μια σειρά πίνακα. Κάθε κελί που περιέχει κείμενο ή εικόνα πρέπει να περιβάλλεται από ετικέτες<ТD>. Αριθμός ετικετών<ТD>σε μια σειρά ορίζει τον αριθμό των κελιών

    Τραπέζι

    Εάν ένας πίνακας έχει δύο ετικέτες TR, τότε έχει δύο σειρές.
    Εάν υπάρχουν τρεις ετικέτες TD σε μια γραμμή, τότε σε αυτό τρεις στήλες.

    Επικεφαλίδες στηλών πίνακα - ετικέτα<ТН>

    Οι επικεφαλίδες για τις στήλες και τις γραμμές του πίνακα ορίζονται χρησιμοποιώντας την ετικέτα κεφαλίδας<ТН>(TableHeader, τίτλος πίνακα). Αυτές οι ετικέτες είναι παρόμοιες<ТD>. Η διαφορά είναι ότι το κείμενο περικλείεται μεταξύ των ετικετών<ТН>, γράφεται αυτόματα με έντονη γραφή και τοποθετείται από προεπιλογή στη μέση του κελιού. Μπορείτε να αποκεντρώσετε το κείμενο και να στοιχίσετε το κείμενο προς τα αριστερά ή προς τα δεξιά. Εάν χρησιμοποιείτε<ТD>με ετικέτα<В>και χαρακτηριστικό<АLIGN=center>, το κείμενο θα μοιάζει επίσης με τίτλο. Ωστόσο, λάβετε υπόψη ότι δεν υποστηρίζουν όλα τα προγράμματα περιήγησης έντονη γραμματοσειρά σε πίνακες, επομένως είναι καλύτερο να ορίσετε τις επικεφαλίδες των πινάκων χρησιμοποιώντας<ТН>.

    Η κεφαλίδα είναι κεντραρισμένη από προεπιλογή Η κεφαλίδα μπορεί να ενώσει στήλες
    Η κεφαλίδα μπορεί να τοποθετηθεί πριν από τις στήλες Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Η κεφαλίδα μπορεί να συνδέσει γραμμές Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Χρήση κεφαλίδων πίνακα - ετικέτα<САРТIОN>

    Ετικέτα

    σας επιτρέπει να δημιουργήσετε κεφαλίδες πίνακα. Από προεπιλογή, οι επικεφαλίδες είναι κεντραρισμένες και τοποθετημένες είτε από πάνω (<САРТION АLIGN=top>), ή κάτω από το τραπέζι (<САРТION ALIGN=bottom>). Ο τίτλος μπορεί να αποτελείται από οποιοδήποτε κείμενο και εικόνες. Το κείμενο θα χωριστεί σε γραμμές που αντιστοιχούν στο πλάτος του πίνακα. Μερικές φορές tag<САРТION>χρησιμοποιείται για την υπογραφή μιας εικόνας. Για να γίνει αυτό, αρκεί να περιγράψουμε έναν πίνακα χωρίς περιθώρια.

    Κεφαλίδα πάνω από τον πίνακα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κατευθυνόμενος κάτω από τον πίνακα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Χαρακτηριστικό NOWRAP

    Συνήθως, κάθε κείμενο που δεν χωράει σε μία σειρά κελιού πίνακα μετακινείται στην επόμενη σειρά. Ωστόσο, όταν χρησιμοποιείτε το χαρακτηριστικό NOWRAP με ετικέτες<ТН>ή<ТD>Το μήκος του κελιού επεκτείνεται έτσι ώστε το κείμενο που περιέχεται σε αυτό να χωράει σε μία γραμμή.

    Χαρακτηριστικό COLSPAN

    Ετικέτες<ТD>Και<ТН>τροποποιήθηκε χρησιμοποιώντας το χαρακτηριστικό COLSPAN (Εύρος στήλης, σύνδεση στήλης). Εάν θέλετε να κάνετε ένα κελί πιο φαρδύ από το επάνω ή το κάτω μέρος, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό COLSPAN για να το τεντώσετε σε οποιοδήποτε αριθμό κανονικών κελιών.

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

    Χαρακτηριστικό ROWSPAN

    Το χαρακτηριστικό ROWSPAN χρησιμοποιείται στις ετικέτες<ТD>Και<ТН>, είναι παρόμοιο με το χαρακτηριστικό COLSPAN=, μόνο που καθορίζει τον αριθμό των γραμμών στις οποίες τεντώνεται το κελί. Εάν καθορίσατε έναν αριθμό μεγαλύτερο από ένα στο χαρακτηριστικό ROWSPAN=s, τότε ο αντίστοιχος αριθμός σειρών πρέπει να βρίσκεται κάτω από το τεντωμένο κελί. Δεν μπορεί να τοποθετηθεί στο κάτω μέρος του πίνακα.

    χαρακτηριστικό WIDTH

    Το χαρακτηριστικό WIDTH χρησιμοποιείται σε δύο περιπτώσεις. Μπορείτε να το βάλετε σε ετικέτα<ТАВLЕ>για να δώσει το πλάτος ολόκληρου του πίνακα ή μπορεί να χρησιμοποιηθεί σε ετικέτες<ТD>ή<ТН>για να ορίσετε το πλάτος ενός κελιού ή μιας ομάδας κελιών. Το πλάτος μπορεί να καθοριστεί σε pixel ή ως ποσοστό. Για παράδειγμα, αν ορίσετε στην ετικέτα<ТАВLЕ>WIDTH=250, θα λάβετε έναν πίνακα πλάτους 250 pixel ανεξάρτητα από το μέγεθος της σελίδας στην οθόνη σας. Όταν ορίζετε WIDТН=50% στην ετικέτα<ТАВLЕ>ο πίνακας θα καταλαμβάνει το μισό πλάτος της σελίδας σε οποιοδήποτε μέγεθος εικόνας στην οθόνη. Επομένως, όταν προσδιορίζετε το πλάτος του πίνακα ως ποσοστό, να έχετε κατά νου ότι εάν ο χρήστης έχει μια στενή θύρα προβολής, η σελίδα σας μπορεί να φαίνεται λίγο περίεργη. Εάν χρησιμοποιείτε pixel και ο πίνακας είναι ευρύτερος από την περιοχή προβολής, θα εμφανιστεί μια γραμμή κύλισης στο κάτω μέρος για να μετακινηθείτε αριστερά και δεξιά στη σελίδα. Ανάλογα με τις εργασίες που έχετε στη διάθεσή σας, οποιαδήποτε μέθοδος ρύθμισης του πλάτους του πίνακα μπορεί να είναι χρήσιμη.

    Κείμενο ή δεδομένα - πλάτος 100%
    ή
    Κείμενο ή δεδομένα - πλάτος 50%
    ή
    Κείμενο ή δεδομένα - πλάτος 200 pixel
    ή
    Κείμενο ή δεδομένα - πλάτος 100 pixel

    Εφαρμογή κενών κελιών

    Εάν ένα κελί δεν περιέχει δεδομένα, δεν θα έχει περιθώρια. Εάν θέλετε ένα κελί να έχει περιθώρια αλλά όχι περιεχόμενο, πρέπει να βάλετε κάτι σε αυτό που δεν θα είναι ορατό κατά την προβολή. Μπορείτε να χρησιμοποιήσετε μια κενή συμβολοσειρά<ВR>. Μπορείτε ακόμη να καθορίσετε κενές στήλες ορίζοντας το πλάτος τους σε pixel ή σχετικές μονάδες και χωρίς να εισάγετε δεδομένα στα κελιά που προκύπτουν. Αυτό το εργαλείο μπορεί να είναι χρήσιμο όταν τοποθετείτε κείμενο και γραφικά σε μια σελίδα.

    χαρακτηριστικό CELLADDING

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

    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Χαρακτηριστικά ALIGN και VALIGN

    Ετικέτες<ТR>, <ТD>Και<ТН>μπορεί να τροποποιηθεί χρησιμοποιώντας τα χαρακτηριστικά ALIGN και VALIGN. Το χαρακτηριστικό ALIGN καθορίζει εάν το κείμενο και τα γραφικά είναι στοιχισμένα οριζόντια, δηλαδή αριστερά ή δεξιά ή στο κέντρο. Η οριζόντια ευθυγράμμιση μπορεί να ρυθμιστεί με διάφορους τρόπους:

    ALIGN=αιμορραγίαπιέζει τα περιεχόμενα του κελιού κοντά στην αριστερή άκρη.

    ALIGN=αριστεράΕυθυγραμμίζει τα περιεχόμενα του κελιού προς τα αριστερά, λαμβάνοντας υπόψη την εσοχή που καθορίζεται από το χαρακτηριστικό CELLPADDING.

    ALIGN=κέντροΚεντράρει τα περιεχόμενα του κελιού.

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

    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Το χαρακτηριστικό VALIGN ευθυγραμμίζει κάθετα κείμενο και γραφικά μέσα σε ένα κελί. Η κάθετη ευθυγράμμιση μπορεί να ρυθμιστεί με διάφορους τρόπους:

    VALIGN=κορυφήΕυθυγραμμίζει τα περιεχόμενα ενός κελιού στο επάνω περίγραμμά του.

    VALIGN=μέσηΚεντράρει κάθετα τα περιεχόμενα του κελιού.

    VALIGN=κάτωΕυθυγραμμίζει τα περιεχόμενα ενός κελιού στο κάτω περίγραμμά του.

    Το χαρακτηριστικό VALIGN ευθυγραμμίζει κάθετα κείμενο και γραφικά μέσα σε ένα κελί. μπλουζα, Μέσης, κάτω μέρος.
    VALIGN=top Ευθυγραμμίζει τα περιεχόμενα ενός κελιού στο επάνω περίγραμμά του. μπλουζα, μπλουζα, μπλουζα.
    VALIGN=middle Κεντράρει κάθετα τα περιεχόμενα ενός κελιού. Μέσης, Μέσης, Μέσης.
    VALIGN=bottom Ευθυγραμμίζει τα περιεχόμενα ενός κελιού στο κάτω περίγραμμά του. κάτω μέρος, κάτω μέρος, κάτω μέρος.

    χαρακτηριστικό BORDER

    Στην ετικέτα<ТАВLЕ>συχνά καθορίζουν πώς θα φαίνονται τα περιγράμματα, δηλαδή οι γραμμές που περιβάλλουν τα κελιά του πίνακα και τον ίδιο τον πίνακα. Εάν δεν καθορίσετε ένα πλαίσιο, θα λάβετε έναν πίνακα χωρίς γραμμές, αλλά θα διατεθεί χώρος για αυτούς. Το ίδιο αποτέλεσμα μπορεί να επιτευχθεί με τη ρύθμιση<ТАВLЕ ВОRDER=0>. Μερικές φορές θέλετε να κάνετε το περίγραμμα πιο χοντρό ώστε να αναδεικνύεται καλύτερα. Για να προσελκύσετε την προσοχή σε μια εικόνα ή κείμενο, μπορείτε να ορίσετε αποκλειστικά έντονα περιγράμματα. Όταν δημιουργείτε ένθετα τραπέζια, πρέπει να κάνετε περιγράμματα διαφορετικού πάχους για διαφορετικούς πίνακες για να τα διακρίνετε ευκολότερα.

    Χαρακτηριστικό CELLSPACING

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

    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Χαρακτηριστικό BGCOLOR

    Αυτό το χαρακτηριστικό σάς επιτρέπει να ορίσετε το χρώμα του φόντου. Ανάλογα με την ετικέτα (TABLE, TR, TD) με την οποία χρησιμοποιείται, το χρώμα φόντου μπορεί να οριστεί για ολόκληρο τον πίνακα, για μια σειρά ή για ένα μεμονωμένο κελί. Η τιμή αυτού του χαρακτηριστικού είναι ο κωδικός RGB ή το τυπικό όνομα χρώματος.

    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα
    Κείμενο ή δεδομένα Κείμενο ή δεδομένα Κείμενο ή δεδομένα

    Ιστορικό χαρακτηριστικό

    Αυτό το χαρακτηριστικό καθορίζει την εικόνα φόντου για πίνακες. Ισχύει για ετικέτες TABLE και TD. Η τιμή του είναι η διεύθυνση URL του αρχείου εικόνας φόντου. Η χρήση αυτού του χαρακτηριστικού συζητείται παρακάτω.

    Χρήση πινάκων στο σχεδιασμό σελίδων

    Το καλό με τα τραπέζια είναι ότι μπορείτε να κάνετε αόρατα τα σύνορά τους αν θέλετε. Αυτό επιτρέπει τη χρήση της ετικέτας<ТАВLЕ>Τοποθετήστε όμορφα κείμενο και γραφικά στη σελίδα. αντίο ετικέτα<ТАВLЕ>παραμένει το μόνο ισχυρό εργαλείο μορφοποίησης σε HTML. Οι σχεδιαστές ιστοσελίδων έχουν τώρα σχεδόν την ίδια ελευθερία όσον αφορά τη χρήση του λευκού χώρου με τους σχεδιαστές τυπωμένων σελίδων. Οι πίνακες είναι ο καλύτερος τρόπος για να απομακρυνθείτε από την ιεραρχική τοποθέτηση κειμένου σε ιστοσελίδες.

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

    Κρατικό Παιδαγωγικό Πανεπιστήμιο Ουραλίων

    Καλως ΗΡΘΑΤΕ!

    Εκπαιδευτικό σεμινάριο "Βασικές αρχές του WEB mastering"

    Δημιουργία πολύχρωμων τραπεζιών

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

    Έγχρωμα περιγράμματα στο Netscape Navigator. Όχι μόνο μπορείτε να περιβάλετε το τραπέζι με ένα όμορφο περίγραμμα, αλλά μπορείτε επίσης να το ρυθμίσετε σε ένα χρώμα διαφορετικό από τα χρώματα του κειμένου και του φόντου. Δημιουργήστε ένα απλό γκρι GIF (ή οποιοδήποτε GIF θέλετε να έχετε ως φόντο) και ορίστε το σε μια ετικέτα<ВODY>ως φόντο σελίδας. Στη συνέχεια, ορίστε το χρώμα φόντου της σελίδας. Ως αποτέλεσμα, η ετικέτα σας<ВОDY>θα μοιάζει κάπως έτσι:

    Έχετε δημιουργήσει ένα διπλό φόντο - GIF και ένα καθορισμένο χρώμα. Ως αποτέλεσμα, το χρώμα φόντου θα είναι ορατό σε όλα τα περιγράμματα του πίνακα και τις οριζόντιες γραμμές (<НR>). Είτε το GIF φόντου σας είναι γκρι είτε όχι, οι χρωματιστές γραμμές και τα περιγράμματα του πίνακα θα ξεχωρίζουν αισθητά. Εάν το GIF φόντου δεν είναι πολύ περίπλοκο, ο χρόνος φόρτωσης της σελίδας θα αυξηθεί ελαφρώς.

    Τραπέζι με κορνίζες

    Ονομα Επώνυμο
    Λάρισας Ισάεβα
    Ντμίτρι Κολέσνικοφ

    ΑΠΟΤΕΛΕΣΜΑ:

    Τραπέζι χωρίς πλαίσια

    Τραπέζι με κορνίζες

    Χαρακτηριστικά ετικέτας
    Και για συγχώνευση κελιών
    Παράδειγμα
    κουνάβια
    βάρος Μέγεθος
    αρσενικά 1,2 – 2,5 κιλά έως 70 εκ
    θηλυκά 0,7 – 1,0 κιλά έως 40 εκ

    ΑΠΟΤΕΛΕΣΜΑ:

    κουνάβια
    βάρος Μέγεθος
    αρσενικά 1,2 – 2,5 κιλά έως 70 εκ
    θηλυκά 0,7 – 1,0 κιλά έως 40 εκ

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

    Ετικέτες ομαδοποίησης σειρών πίνακα HTML

    Για να δημιουργήσετε πιο σύνθετους πίνακες, μπορείτε να χρησιμοποιήσετε ετικέτες:

    Παράδειγμα
    Κατανάλωση μπύρας
    ΠΛΗΡΕΣ ΟΝΟΜΑ. λίτρα
    Σύνολο 250
    Ιβάνοφ Ιβάν Ιβάνοβιτς 133
    Πετρόφ Πετρ Πέτροβιτς 117

    ΑΠΟΤΕΛΕΣΜΑ:

    Ετικέτες ομαδοποίησης στηλών πίνακα HTML

    Χαρακτηριστικό ετικέτας
    κίτρινος το κόκκινο

    ΑΠΟΤΕΛΕΣΜΑ:


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

    Η οριζόντια ευθυγράμμιση του κειμένου σε μια συγκεκριμένη στήλη πίνακα μπορεί να αλλάξει με τον καθορισμό ενός στυλ στοίχιση κειμένουγια ψευδοτάξη td:nth-child(n), όπου n είναι ο αριθμός της στήλης. Ωστόσο, αυτή η μέθοδος δεν θα λειτουργήσει εάν το χαρακτηριστικό υπάρχει μεταξύ των κελιών του πίνακα colspan.

    Παράδειγμα
    Ονομα Τιμή, τρίψτε.)
    Πληρωμή ανά λεπτό για σολάριουμ (από 4 λεπτά)15
    50 λεπτά σολάριουμ (14 ρούβλια/λεπτό, 1 μήνας)700
    100 λεπτά σολάριουμ (13 ρούβλια/λεπτό, 2 μήνες)1300
    200 λεπτά σολάριουμ (12 ρούβλια/λεπτό, 3 μήνες)2400

    ΑΠΟΤΕΛΕΣΜΑ:


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




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

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

    Τώρα ας θυμηθούμε τι διάταξη ή πλαίσιο επιλέξαμε για τον ιστότοπο, θα μιλήσουμε για αυτό στην πορεία μας.

    Λάβετε υπόψη ότι η διάταξη του ιστότοπου είναι, στην πραγματικότητα, τραπέζι.

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

    Στην πραγματικότητα, υπάρχουν δύο κύριοι τύποι διάταξης σελίδας για ιστότοπους html - χρησιμοποιώντας πίνακες και χρήση στυλ CSS.

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

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

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



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

    Έτσι, ο πίνακας στον κώδικα της ιστοσελίδας καθορίζεται από την ετικέτα

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

    Ας ανοίξουμε το αρχείο της ιστοσελίδας μας index.html για επεξεργασία χρησιμοποιώντας το Notepad++. Και ανοίξτε το χρησιμοποιώντας ένα πρόγραμμα περιήγησης για να δείτε τις αλλαγές στη σελίδα.

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

    Επιπλέον, ο πίνακας διάταξης του ιστότοπού μας θα αποτελείται από τρεις σειρές (Heder, Content και Footer) και δύο στήλες (Μενού και Περιεχόμενο).

    Για να προσθέσουμε έναν πίνακα με τρεις σειρές και δύο στήλες, ας αλλάξουμε τον κώδικά μας για να προσθέσουμε τα εξής:

    1 σειρά 1 στήλη 1 σειρά 2 στήλη
    2 σειρά 1 στήλη 2 σειρά 2 στήλη
    3 σειρά 1 στήλη 3 σειρά 2 στήλη

    Για να ορίσετε ένα περίγραμμα στον πίνακα, χρησιμοποιήστε την παράμετρο περιγράμματος. Το πάχος του περιγράμματος του πίνακα καθορίζεται σε pixel (px).

    Ας προσθέσουμε μια παράμετρο περιγράμματος στον κώδικα html μας, με τιμή ορίσματος ίση με 1 px. Δηλαδή, το πάχος του πλαισίου του τραπεζιού θα είναι ίσο με ένα pixel:

    1 σειρά 1 στήλη 1 σειρά 2 στήλη
    2 σειρά 1 στήλη 2 σειρά 2 στήλη
    3 σειρά 1 στήλη 3 σειρά 2 στήλη

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

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

    Ας προσθέσουμε στοίχιση και πλάτος πίνακα στον κώδικά μας και ως αποτέλεσμα λαμβάνουμε τον ακόλουθο κώδικα:

    1 σειρά 1 στήλη 1 σειρά 2 στήλη
    2 σειρά 1 στήλη 2 σειρά 2 στήλη
    3 σειρά 1 στήλη 3 σειρά 2 στήλη

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

    Τώρα ας επιστρέψουμε στο πλαίσιο του πίνακα, στον κώδικα html το ορίσαμε σε 1 pixel χρησιμοποιώντας την τιμή του ορίσματος παραμέτρου περιγράμματος: border=”1”.

    Ανατρέξτε στις παραμέτρους της ετικέτας TABLE στο βιβλίο αναφοράς html. Υπάρχουν δύο παράμετροι εδώ που επηρεάζουν εμφάνισηδομή.

    Η πρώτη παράμετρος: Διάστημα κελιών – ορίζει την απόσταση μεταξύ των κελιών του πίνακα.

    Δεύτερη παράμετρος: cellpadding – η απόσταση από το πλαίσιο έως τα περιεχόμενα του κελιού εξαρτάται από την τιμή του ορίσματος αυτής της παραμέτρου.

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

    Ως αποτέλεσμα, ο κώδικας html του πίνακα θα έχει την ακόλουθη μορφή:

    1 σειρά 1 στήλη 1 σειρά 2 στήλη
    2 σειρά 1 στήλη 2 σειρά 2 στήλη
    3 σειρά 1 στήλη 3 σειρά 2 στήλη

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

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

    Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε την παράμετρο colspan. Αυτή η παράμετρος χρησιμοποιείται στην ετικέτα TD. Η τιμή του ορίσματος παραμέτρου colspan υποδεικνύει τον αριθμό των οριζόντιων κελιών που πρέπει να συγχωνευθούν· στην περίπτωσή μας, αυτή η τιμή είναι 2.

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

    Μετά από όλες τις αλλαγές, ο πλήρης κώδικας html της σελίδας μας θα είναι ο εξής:

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

    Επί κεφαλής
    μενού τοποθεσίας Περιεχόμενο
    Υποσέλιδο

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

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

    Οι πίνακες σε HTML είναι τόσο λειτουργικοί που μπορείτε να τους χρησιμοποιήσετε για τη διάταξη ολόκληρων ιστότοπων (ανάγνωση). Τώρα θα μιλήσουμε για την εισαγωγή απλών πινάκων HTML σε μια ιστοσελίδα, αναλύοντας μόνο τη σήμανση, αλλά όχι αγγίζοντας το σχέδιο, γιατί είναι καλύτερο να διακοσμήσετε πίνακες χρησιμοποιώντας στυλ CSS.

    Ετικέτες και χαρακτηριστικά πίνακα

    Εδώ είναι τα βασικά στοιχεία που χρειάζεστε για να δημιουργήσετε πίνακες:

    • - ένα δοχείο μέσα στο οποίο βρίσκεται το τραπέζι (το ίδιο με
        για επισημασμένο ή
          για αριθμημένες λίστες).
        1. σύνορο- ένα χαρακτηριστικό που καθορίζει το πάχος των πλαισίων. Είναι καλύτερα να χρησιμοποιήσετε την ιδιότητα CSS περιγράμματος.
      καθορίζει την υπογραφή του πίνακα. Δεν χρειάζεται να χρησιμοποιήσετε κοντέινερ, αλλά αν εξακολουθείτε να αποφασίσετε να βάλετε τίτλο στον πίνακα, τοποθετήστε το αμέσως μετά την ετικέτα , εξωτερικά κελιά και σειρές.
    • - μια ζευγαρωμένη ετικέτα που περιέχει μια σειρά πίνακα (κελιά που βρίσκονται στο ίδιο οριζόντιο επίπεδο).
    • , θα υπάρχουν τόσα πολλά κελιά σε αυτό: μία ετικέτα - ένα κελί.
    • σας επιτρέπει να ομαδοποιήσετε στήλες, γρήγορα και χωρίς να φράξετε τον κωδικό, να τους εκχωρήσετε κοινά χαρακτηριστικά. Χρησιμοποιώντας ένα δοχείο, μπορείτε να διαχωρίσετε τα λογικά μέρη ενός πίνακα το ένα από το άλλο. Τοποθετείται μετά την ετικέτα
      - μια ετικέτα που δημιουργεί ένα κελί κεφαλίδας πίνακα. Εξωτερικά, το περιεχόμενό του διαφέρει από το περιεχόμενο σε άλλα κελιά - συνήθως το κείμενο μέσα Το πρόγραμμα περιήγησης το επισημαίνει με έντονη γραφή και το τοποθετεί στο κέντρο.
    • - ένα δοχείο με το οποίο δημιουργείται ένα απλό κελί. Πόσες τέτοιες ετικέτες θα περιέχει μια γραμμή (ετικέτα
      , αν δεν είναι εκεί, τότε μετά .
    • χρησιμοποιείται για τον ίδιο σκοπό όπως . μπορεί να περιέχει , αλλά όχι το αντίστροφο.
    • σπιθαμή- ένα χαρακτηριστικό που καθορίζει τον αριθμό των στηλών στις οποίες εφαρμόζονται οι ιδιότητες του κοντέινερ
    • .
    • , Και - δοχεία που σας επιτρέπουν να διαιρέσετε το τραπέζι στα επάνω (επικεφαλίδες), στο κύριο (σώμα) και στο κάτω (τελικό) μέρη, αντίστοιχα. Σε έναν πίνακα HTML, η ακολουθία αυτών των ετικετών είναι ίδια με την ακολουθία των κοντέινερ , Και
      στο έγγραφο HTML.
    • colspanαπαιτείται για το συνδυασμό κελιών στη σειρά. Η τιμή του χαρακτηριστικού περιέχει έναν αριθμό που καθορίζει τον αριθμό των κελιών που θα συγχωνευθούν.
    • εύρος σειρώνσυγχωνεύει κελιά σε στήλες.
    • Παράδειγμα δημιουργίας πίνακα

      Δημιουργήστε ένα έγγραφο HTML και αντιγράψτε τον ακόλουθο κώδικα σε αυτό:

      Παράδειγμα πίνακα

      Εργαλεία δημιουργίας ιστοσελίδων
      ΣκοπόςΕργαλείο
      ΒαθμολόγησηHTMLXHTML
      ΝτεκόρCSS
      ΑνάπτυξηPHPΠύθων

      Στο πρόγραμμα περιήγησης, το έγγραφο θα μοιάζει με αυτό:

      Ας καταλάβουμε ποιες γραμμές κώδικα είναι υπεύθυνες για τι.

      • - άνοιξε το τραπέζι δίνοντάς του το πάχος των πλαισίων.
      • - το τιτλοφορούσαν.
      • - άνοιξε τη γραμμή.
      • - δημιούργησε ένα κελί με σχέδιο κεφαλίδας.
      • - δημιούργησε ένα δεύτερο κελί κεφαλίδας στη σειρά. Η παράμετρος colspan έδειξε ότι αυτό το κελί πρέπει να εκτείνεται σε δύο οριζόντια.
      • - έκλεισε τη γραμμή. Οι υπόλοιπες γραμμές δημιουργήθηκαν με τον ίδιο τρόπο.
      • - πρόσθεσε μια δεύτερη σειρά του πίνακα με κανονικά κελιά και όχι κεφαλίδα. Οι επόμενες σειρές και κελιά εισήχθησαν με παρόμοιο τρόπο.
      • Εργαλεία δημιουργίας ιστοσελίδων
        Σκοπός Εργαλείο
        Βαθμολόγηση HTML XHTML
        - έκλεισε το τραπέζι.
       Μπλουζα