Πώς να προγραμματίσετε πίνακες και φωτογραφίες σε html. Σχεδόν τυπική λειτουργία

Ναι, αφαίρεσα τον χώρο, όλα πήγαν καλά αμέσως :)
Ναι, και η στοίχιση ήταν στην ετικέτα κελιού μου, έκανα λάθος με align="top"

Τι ιδέα να βάλω
?? Ποιο είναι το κόλπο εδώ; Όταν εγκατέστησα
Το κενό έχει γίνει ακόμη μεγαλύτερο, οπότε δεν σας καταλαβαίνω... Η εικόνα δεν μπαίνει στη γραμμή, χρησιμεύει ως φόντο για το μενού...
Και τι είναι το "regexp" μπορείτε να ρωτήσετε;
Και κάνετε λάθος που ο συγγραφέας δεν ενδιαφέρεται για το πρόβλημα :)) Ο συγγραφέας ενδιαφέρεται πολύ για αυτό, μόνο ο συγγραφέας δεν έχει Διαδίκτυο, ή μάλλον, έχει, αλλά μόνο τη νύχτα, και δεν είμαι συνηθισμένος να κάθεσαι το βράδυ :))
Λυπούμαστε, μια άλλη ερώτηση: εάν χρησιμοποιήσω την εικόνα μου ως φόντο, την αντιστοιχίσω πρώτα και μετά χρησιμοποιήσω την απόλυτη τοποθέτηση για να τοποθετήσω άλλες εικόνες κουμπιών, τότε πώς μπορεί το κελί να κλείσει αμέσως μετά την πρώτη εικόνα; Παρεμπιπτόντως, υπάρχει μια ακόμη ερώτηση σχετικά με αυτό: όταν πειραματιζόμουν, προσπαθώντας να καταλάβω από πού προέρχεται το καταραμένο κενό (παρεμπιπτόντως, γιατί το πρόγραμμα περιήγησης ερμηνεύει τη διακοπή της γραμμής με αυτόν τον τρόπο;; Πήρα:

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

Αυτό δεν συμβαίνει πάντα, έτσι δεν είναι;) 
Έτσι, όταν πειραματιζόμουν, έκανα το πλάτος του κελιού του πίνακα μεγαλύτερο από το πλάτος της εικόνας.  Και ανακάλυψα ότι στα δεξιά της εικόνας και ακριβώς από κάτω υπήρχε μια έγχρωμη λωρίδα μήκους περίπου 5 pixel.  Μετά αφαίρεσα όλα τα κουμπιά μου και άρχισα να τα εφαρμόζω ένα προς ένα.  Τους έθεσα border="1" και ανακάλυψα ότι οι δύο πρώτες εικόνες συνδέσμων έχουν ένα μωβ περίγραμμα και οι υπόλοιπες έχουν ένα μπλε περίγραμμα (δεν μπορώ να καταλάβω τι σημαίνει αυτό και γιατί συμβαίνει αυτό) και ότι η ρίγα μου επίσης έχει ένα χρώμα που μεταβαίνει από μωβ σε μπλε.  Και με κάθε κουμπί η λωρίδα μακραίνει... Τι είναι αυτό αδέρφια;;  Στη συνέχεια πήρα και έβαλα την εικόνα φόντου μου όχι αμέσως μετά το άνοιγμα του κελιού, αλλά πριν το κλείσω, δηλ.  Πρώτον, τα κουμπιά είναι απολύτως τοποθετημένα και στο τέλος υπάρχει ένα φόντο.  Η λωρίδα έχει εξαφανιστεί.  Αλήθεια, αυτό δεν επηρέασε την απροθυμία μου :) Τι ήταν, δεν θα μου εξηγήσει κανείς;; 
Και εδώ είναι ένα άλλο.  Σκέφτηκα ότι εφόσον τα κουμπιά μου δεν έχουν δείκτη z, και εισάγω το φόντο αργότερα, τότε θα πρέπει να τα επικαλύπτει και να καλύπτει τα πάντα.  Αλλά, προφανώς, οι απόλυτα τοποθετημένες εικόνες και οι απλές εικόνες είναι ποιοτικά διαφορετικά πράγματα και η συνήθης προσέγγιση δεν ισχύει για αυτές, δηλ.  αυτό που γράφεται αργότερα στοιβάζεται στην κορυφή εκτός και αν έχει υψηλότερο δείκτη z;  Ή μήπως αυτός ο δείκτης z είναι προφανώς μεγαλύτερος για εικόνες απολύτως τοποθετημένες από ό,τι για κανονικές;

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

>  

>

> , 
> αλλά διάβασα ότι το πρόγραμμα περιήγησης δεν ερμηνεύει καθόλου τέτοιες αλλαγές γραμμής
Είναι απλό.  Έχεις ένα κελί.  Δείτε ποια στοιχεία υπάρχουν στο κελί.  Πρώτα απ 'όλα, αυτή είναι μια εικόνα.  Δεύτερον, πρόκειται για δύο επαναφορές γραμμών μετά από αυτό.  Δεδομένου ότι δεν υπάρχει πρόσθετη σήμανση, το πρόγραμμα περιήγησης αντιμετωπίζει κάθε επαναφορά γραμμής ως κενό και στη συνέχεια μετατρέπει τα δύο κενά που προκύπτουν σε ένα.  Έτσι, η εικόνα και ο χώρος που ακολουθεί παραμένουν στο κελί και για το πρόγραμμα περιήγησης βρίσκονται στην ίδια σειρά.  Το ίδιο το πρόγραμμα περιήγησης δεν θα "σκοτώσει" αυτόν τον τελευταίο χώρο - γι 'αυτό είναι ένας εντελώς νόμιμος χαρακτήρας.  Κατά τη διάταξη, το πρόγραμμα περιήγησης προσπαθεί να συμπιέσει το κελί οριζόντια όσο το δυνατόν περισσότερο.  Από αυτή την άποψη, σπάει την υπάρχουσα σειρά δύο στοιχείων, μετακινώντας το τελευταίο από αυτά (δηλαδή το διάστημα) σε μια νέα γραμμή.  Δηλαδή, η αλλαγή δεν γεννιέται από μια αλλαγή γραμμής στον κώδικά σας, αλλά από ένα πρόσθετο στοιχείο διαστήματος που υπάρχει σιωπηρά στον κώδικά σας, που αντιπροσωπεύεται από δύο αλλαγές γραμμής.
Το δεύτερο μέρος της ερώτησής σας (πειραματισμός με κώδικα) απαιτεί πηγή.  Δείξτε τον κωδικό σας ή καλύτερα δημοσιεύστε τους καρπούς των πειραμάτων σας στο Διαδίκτυο.
Εάν δεν καθορίσετε ρητά έναν z-index, τότε τα στοιχεία με απόλυτη και σχετικά θέση βρίσκονται στην πραγματικότητα πάνω από στατικά στοιχεία, με τα στοιχεία που ορίστηκαν αργότερα να επικαλύπτουν τα προηγούμενα καθορισμένα και να επικαλύπτουν όλα τα στατικά στοιχεία (τα στατικά στοιχεία δεν μπορούν να επικαλύπτονται κατ' αρχήν, αν και μερικές φορές τα προγράμματα περιήγησης "γκλάχ" και αυτό παραβιάζεται ο νόμος).  Η σειρά επικάλυψης μπορεί να αλλάξει ορίζοντας ρητά τον δείκτη z στα στυλ.  Από προεπιλογή, όλα τα στοιχεία έχουν δείκτη z 0, αλλά τα απολύτως και σχετικά τοποθετημένα στοιχεία θα τοποθετούνται πάντα πάνω από τα στατικά, ανεξάρτητα από το πού ορίζονται, εκτός εάν ο δείκτης z ορίζει διαφορετικά.
>γιατί είναι λάθος να γράφεις:
??
Η HTML είναι μια γλώσσα λογικής σήμανσης και αυτή η σχεδίαση παραβιάζει τη λογική του εγγράφου.  Κάθε έγγραφο αποτελείται από στοιχεία μπλοκ, με ενσωματωμένα στοιχεία που βρίσκονται μέσα στα στοιχεία μπλοκ.  Τα ενσωματωμένα στοιχεία δεν πρέπει να τοποθετούνται έξω από στοιχεία μπλοκ.  Στην παραπάνω κατασκευή, το inline στοιχείο 
τοποθετείται σε μια θέση στη ροή όπου, εξ ορισμού, δεν υπάρχει ορισμός οποιουδήποτε στοιχείου μπλοκ, δηλαδή το ενσωματωμένο στοιχείο δεν είναι διάδοχος οποιουδήποτε στοιχείου μπλοκ.  Διορθώνω το δικό μου λάθος: για τον αναφερόμενο λόγο, το σχέδιο 
επίσης λάθος. 
Συνδέσεις
Γεια σας, αγαπητοί αναγνώστες του ιστολογίου!  Συχνά στις ιστοσελίδες, εκτός από το κείμενο και τις εικόνες, υπάρχει ανάγκη να εμφανίζονται διάφορα δεδομένα με τη μορφή πινάκων.  Ναι, αυτό είναι κατανοητό ένας πίνακας είναι ο πιο βολικός τρόπος για να παρουσιάσετε μεγάλο όγκο πληροφοριών.  Γεννιέται λοιπόν το ερώτημα "Πώς να εισάγω πίνακες σε html;".  Σε αυτό το άρθρο θα απαντήσω σε αυτήν την ερώτηση και θα σας δώσω πολλά παραδείγματα διάφορων πινάκων html.
Πώς να δημιουργήσετε έναν πίνακα χρησιμοποιώντας HTML
Οι πίνακες HTML δημιουργούνται σε τέσσερα βήματα.
1. Στο πρώτο βήμα στον κώδικα html χρησιμοποιώντας το ζεύγος ετικέτα 
υποδεικνύουμε στο πρόγραμμα περιήγησης ότι ένας πίνακας έχει εισαχθεί στην ιστοσελίδα: .  Το στοιχείο πίνακα είναι ένα στοιχείο μπλοκ μιας ιστοσελίδας.  Επομένως, ο πίνακας εμφανίζεται πάντα σε μια νέα γραμμή, με κάθετη εσοχή από γειτονικά στοιχεία, επομένως δεν χρειάζεται να τοποθετηθεί σε μια παράγραφο.

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





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











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












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


Κύτταρο 1-1
Κελί 1-2
Κελί 1-3


Κύτταρο 2-1
Κύτταρο 2-2
Κελί 2-3



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

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

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

Και 
μπορεί να βρίσκεται μόνο μέσα σε μια ετικέτα 

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

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









Αυτό είναι ένα τραπέζι

Κελί 1.1
Κελί 1.2


Κελί 2.1
Κελί 2.2


Απεικόνιση:
Ενότητες πίνακα
Ένας πίνακας html μπορεί λογικά να χωριστεί σε μέρη - ενότητες.  Υπάρχουν τρεις τύποι τμημάτων:
ενότητα κεφαλίδας, το οποίο περιέχει τα κελιά κεφαλίδας που σχηματίζουν την κεφαλίδα του πίνακα.
τμήμα σώματος, στα οποία βρίσκονται κελιά με βασικά δεδομένα.
ενότητα ολοκλήρωσης, στα οποία τοποθετούνται κελιά με συνοπτικά δεδομένα.
Η ενότητα της κεφαλίδας του πίνακα σχηματίζεται χρησιμοποιώντας μια ζευγοποιημένη ετικέτα 
.
Ένα τμήμα σώματος δημιουργείται με μια ζευγοποιημένη ετικέτα 
.  Ένας πίνακας html μπορεί να περιέχει πολλά τμήματα σώματος, τα οποία σας επιτρέπουν να δημιουργήσετε δομικά μπλοκ στα οποία μπορούν να εφαρμοστούν ομοιόμορφα στυλ σχεδίασης.
Το τμήμα τερματισμού σχηματίζεται από μια ζευγοποιημένη ετικέτα 
και μέσα σε ένα δοχείο μπορεί να υπάρχει μόνο ένα.
Όλες αυτές οι ζευγαρωμένες ετικέτες πρέπει να περιέχουν τις ετικέτες 
, οι οποίες σχηματίζουν γραμμές που σχετίζονται με τις αντίστοιχες ενότητες:






















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




Κελί 1.1
Κελί 1.2
Κύτταρο 1.3


Κελί 2.1
Κελί 2.2
Κελί 2.3




Αποτέλεσμα 1
Αποτέλεσμα 2
Αποτέλεσμα 3



Συγχώνευση κελιών πίνακα
Απομένει να μιλήσουμε για το πιο σημαντικό χαρακτηριστικό των πινάκων - συγχώνευση κυττάρων.Τα χαρακτηριστικά χρησιμοποιούνται για να συνδυάσουν πολλά κελιά σε ένα colspanΚαι εύρος σειρώνετικέτες 
Και 
.  Το χαρακτηριστικό colspan καθορίζει τον αριθμό των κελιών που συνδυάζονται οριζόντια και το rowspan - κάθετα:















1.1
1.2-1.3


2.1
2.2
2.3


3.1-4.1
3.2
3.3


4.2
4.3

Παράδειγμα αποτελέσματος:
1.1

1.2-1.3

2.1

2.2

2.3

3.1-4.1

3.2

3.3

4.2

4.3

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

Ένα παράδειγμα λανθασμένου κώδικα html κατά τη συγχώνευση κελιών:









κελί 1.1
κελί 1.2


κελί 2.1
κελί 2.2


Και το αποτέλεσμα που εμφανίζεται στο πρόγραμμα περιήγησης:
Εκείνοι.  Αν αναλύσετε τον κώδικα html, θα παρατηρήσετε ότι η πρώτη γραμμή περιέχει τρία κελιά, δύο από τα οποία συνδυάζονται χρησιμοποιώντας το χαρακτηριστικό colspan και μόνο δύο κελιά προστίθενται στη δεύτερη γραμμή.  Επομένως, ένα τρίτο κενό κελί εμφανίζεται στη δεύτερη γραμμή.
Χαρακτηριστικά ετικέτας 
Σε αυτήν την ανάρτηση έχουμε ήδη συναντήσει ένα χαρακτηριστικό tag 
.  Με το χαρακτηριστικό border, το οποίο καθορίζει το πάχος του περιγράμματος σε pixel.  Από προεπιλογή είναι 0 και επομένως τα κελιά εμφανίζονται χωρίς περίγραμμα από προεπιλογή.
Εκτός από το χαρακτηριστικό border, υπάρχουν πολλά άλλα σημαντικά χαρακτηριστικά που υποστηρίζονται από την ετικέτα 
.  Ας τους δούμε.
Χαρακτηριστικό ευθυγραμμίζω- σκηνικά ισοπέδωσηπίνακες στη σελίδα.  Μπορεί να πάρει τις τιμές αριστερά, κέντρο, δεξιά, που ορίζουν τη στοίχιση αριστερά, κέντρο και δεξιά, αντίστοιχα.  Προεπιλογές προς τα αριστερά.
Χαρακτηριστικό Ιστορικό, οι οποίες ορίζει την εικόνα φόντουστο τραπέζι.  Λαμβάνει τη διεύθυνση του αρχείου εικόνας ως τιμή του.
bgcolor- σκηνικά χρώμα του φόντουτραπέζια.  Μπορεί να χρησιμοποιηθεί σε συνδυασμό με το χαρακτηριστικό φόντου.
Χαρακτηριστικό χρώμα πλαισίουσκηνικά χρώμα πλαισίουτραπέζια.
Κυψέλη— καθορίζει απόσταση μεταξύ του περιγράμματος του κελιού και του περιεχομένου του.  Σας επιτρέπει να βελτιώσετε την αναγνωσιμότητα του πίνακα.  Η τιμή μπορεί να είναι οποιοσδήποτε θετικός αριθμός.
Διάστημα κελιών- σκηνικά απόσταση μεταξύ των εξωτερικών ορίων κελιών.
Ας μιλήσουμε για αυτό πώς να εισαγάγετε έναν πίνακα σε μια σελίδα htmlΤελειώνω, απλώς συνοψίζω:
Οι ετικέτες χρησιμοποιούνται για την εισαγωγή πίνακα 
— χαρακτηρισμός πίνακα, - προσθέτοντας μια γραμμή και , ενότητα ολοκλήρωσης και τμήμα σώματος - ;
για να συνδυάσουμε κελιά χρησιμοποιούμε χαρακτηριστικά tag 
— εισαγωγή κυττάρων.
ένας πίνακας είναι ένα μπλοκ στοιχείο μιας ιστοσελίδας.
τα περιεχόμενα των κελιών μπορεί να είναι όχι μόνο κείμενο, αλλά και εικόνες και άλλοι πίνακες.
ένας πίνακας μπορεί να περιέχει τρεις τύπους ενοτήτων: ενότητα κεφαλίδας - 

colspan και rowspan.
Αυτό είναι όλο, στην επόμενη ανάρτηση θα μιλήσω για εργαλεία πλοήγησης σε ιστότοπο html.  Για να μην χάσετε αυτήν την ανάρτηση, εγγραφείτε στις ενημερώσεις του ιστολογίου μου!  Αυτό είναι, τα λέμε ξανά!
Οι πίνακες σε HTML είναι τόσο λειτουργικοί που μπορείτε να τους χρησιμοποιήσετε για τη διάταξη ολόκληρων ιστότοπων (ανάγνωση).  Τώρα θα μιλήσουμε για την εισαγωγή απλών πινάκων HTML σε μια ιστοσελίδα, αναλύοντας μόνο τη σήμανση, αλλά όχι αγγίζοντας το σχέδιο, γιατί είναι καλύτερο να διακοσμήσετε πίνακες χρησιμοποιώντας στυλ CSS.
Ετικέτες πίνακα και χαρακτηριστικά
Εδώ είναι τα βασικά στοιχεία που χρειάζεστε για να δημιουργήσετε πίνακες:
- ένα δοχείο μέσα στο οποίο βρίσκεται το τραπέζι (το ίδιο με 

για επισημασμένο ή 

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


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





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

Το πρόγραμμα περιήγησης το επισημαίνει με έντονη γραφή και το τοποθετεί στο κέντρο.

- ένα δοχείο με το οποίο δημιουργείται ένα απλό κελί.  Πόσες τέτοιες ετικέτες θα περιέχει μια γραμμή (ετικέτα 




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

 
Εργαλεία δημιουργίας ιστοσελίδων
 

 
Σκοπός
Εργαλείο
 
 

 
Βαθμολόγηση
HTML
XHTML
 
 

 
Ντεκόρ
CSS
 
 

 
Ανάπτυξη
PHP
Πύθων
 
 
 





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



Εργαλεία δημιουργίας ιστοσελίδων 




Σκοπός 


Εργαλείο 



 

Βαθμολόγηση 

 HTML 

 XHTML 
 


- έκλεισε το τραπέζι.


Χάρη στην ευελιξία των πινάκων και στον μεγάλο αριθμό παραμέτρων που ελέγχουν την εμφάνισή τους, οι πίνακες έχουν γίνει εδώ και καιρό ένα συγκεκριμένο πρότυπο για τη διάταξη των ιστοσελίδων.  Ένας πίνακας με αόρατο περίγραμμα μοιάζει με ένα αρθρωτό πλέγμα, στα μπλοκ του οποίου είναι βολικό να τοποθετούνται στοιχεία ιστοσελίδας.  Ωστόσο, αυτή δεν είναι μια εντελώς σωστή προσέγγιση, επειδή κάθε αντικείμενο HTML ορίζεται για τους δικούς του σκοπούς και αν δεν χρησιμοποιείται για τον προορισμό του και παντού, αυτό σημαίνει ότι δεν υπάρχουν εναλλακτικές λύσεις.  Αυτό συνέβαινε για μεγάλο χρονικό διάστημα, έως ότου τα επίπεδα αντικατέστησαν τους πίνακες στη διάταξη του ιστότοπου.  Αυτό δεν σημαίνει ότι τα επίπεδα χρησιμοποιούνται τώρα συνεχώς, αλλά η τάση έχει ήδη εμφανιστεί σαφώς - οι πίνακες χρησιμοποιούνται για την τοποθέτηση δεδομένων σε πίνακα και τα επίπεδα χρησιμοποιούνται για διάταξη και σχεδιασμό.
 
Δημιουργία πίνακα
 
Ένας πίνακας αποτελείται από γραμμές και στήλες κελιών που μπορούν να περιέχουν κείμενο και εικόνες.  Οι πίνακες χρησιμοποιούνται συνήθως για την οργάνωση και παρουσίαση δεδομένων, αλλά οι πίνακες δεν περιορίζονται σε αυτό.  Χρησιμοποιώντας πίνακες, είναι βολικό να σχεδιάσετε διάταξη σελίδων με την τακτοποίηση θραυσμάτων κειμένου και εικόνων με τον επιθυμητό τρόπο.
 
Για να προσθέσετε έναν πίνακα σε μια ιστοσελίδα, χρησιμοποιήστε την ετικέτα 
.  Αυτό το στοιχείο χρησιμεύει ως κοντέινερ για στοιχεία που ορίζουν τα περιεχόμενα του πίνακα.  Οποιοσδήποτε πίνακας αποτελείται από σειρές και κελιά, τα οποία καθορίζονται αντίστοιχα χρησιμοποιώντας ετικέτες Και 
.  Ο πίνακας πρέπει να περιέχει τουλάχιστον ένα κελί (παράδειγμα 12.1).  Επιτρέπεται αντί για ετικέτα 
χρήση ετικέτας 
.  Κείμενο σε κελί με στυλ με ετικέτα 
, εμφανίζεται από το πρόγραμμα περιήγησης με έντονη γραμματοσειρά και στοιχίζεται στο κέντρο του κελιού.  Διαφορετικά, οι διαφορές μεταξύ των κελιών δημιουργούνται μέσω ετικετών 
Και 
Οχι.

 
Παράδειγμα 12.1.  Δημιουργία πίνακα

 

 
 
 
 
 
 

 

 
Κύτταρο 1
 
Κύτταρο 2
 
 

 
Κύτταρο 3
 
Κύτταρο 4
 
 
 





 
Η σειρά των κυττάρων και η εμφάνισή τους φαίνεται στο Σχ.  12.1.






                                


                                






                            

                        

                    
                    


                    




                
                



                
                    


    
    
    
    
    
    

                



            
            
        
        

        
            
        

        
    
    
    
    
    

    
    
    
    
    
    

    
    
    

    
    

    
    
    
    
    
    
    
    
    
    
    
    


    


             

          Έχετε ερωτήσεις;
          
      

        


            

                

                    





                        



                            

                                

                                    

                                        

                                            

                                                Ονομα
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ *							
                                            
                                            

                                                

                                                    
                                                
                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                Μήνυμα *							
                                            
                                            

                                                

                                                    
                                                

                                            
                                        
                                    
                                
                                

                                    

                                        

                                            

                                                Στείλετε
                                            
                                        
                                    
                                
                            

                            

                                

                                    
                                
                            
                            
                        


                    
                
            

        
    


    

    
    
    

        

        

            

                

                    

                        
Αναφέρετε ένα τυπογραφικό λάθος
                        

                            
Κείμενο που θα σταλεί στους συντάκτες μας:
                            

                        
                    
                    

                        

                            
Το σχόλιό σας (προαιρετικό):
                            
                        
                        

                        
                    
                
                

                    Στείλετε
                    Ματαίωση