Πώς να δημιουργήσετε πίνακα μόνο χρησιμοποιώντας ετικέτα και CSS

' ετικέτες μέσα σε αυτό.

---

---

Παράδειγμα
Εξετάστε το ακόλουθο παράδειγμα κώδικα HTML για να δημιουργήσετε έναν πίνακα:

< div τάξη = 'divTable' >
< div τάξη = 'headerRow' >
< div τάξη = 'divCell' >< σι > ταυτότητα < / σι >< / div >
< div τάξη = 'divCell' >< σι > Ονομα < / σι >< / div >
< div τάξη = 'divCell' >< σι > Ηλικία < / σι >< / div >
< / div >
< div τάξη = 'divRow' >
< div τάξη = 'divCell' > 001 < / div >
< div τάξη = 'divCell' > Σιδηρουργός < / div >
< div τάξη = 'divCell' > 25 < / div >
< / div >
< div τάξη = 'divRow' >
< div τάξη = 'divCell' > 002 < / div >
< div τάξη = 'divCell' > Γιάννης < / div >
< div τάξη = 'divCell' > 31 < / div >
< / div >
< div τάξη = 'divRow' >
< div τάξη = 'divCell' > 003 < / div >
< div τάξη = 'divCell' > Κάρολος < / div >
< div τάξη = 'divCell' > 28 < / div >
< / div >
< / div >

Στο απόσπασμα κώδικα παραπάνω:

• ΕΝΑ '
  ' προστίθεται η ετικέτα με την κλάση με το όνομα ' divTable '.
• Μεσα στην ' div 'στοιχείο κοντέινερ, προσθέστε άλλο' div ' στοιχείο κοντέινερ με την κλάση δηλωμένη ως ' headerRow '.
• Και πάλι, προσθέστε τρία ' div ' στοιχεία που έχουν τις κλάσεις με το όνομα ' divRow ' με τρία υποδοχεία με το ' divCell ” τάξη.
• Στη συνέχεια, προσθέστε τρία στοιχεία div προσθέστε το ' ταυτότητα », « Ονομα ' και ' Ηλικία ” στη σειρά κεφαλίδας του πίνακα.
• Μετά από αυτό, καθορίστε τις τιμές για 'ID', 'Name' και 'Age' για κάθε στοιχείο div.

Όλα αυτά αφορούσαν τον τρόπο χρήσης του ' div ' στοιχείο για τη δημιουργία πίνακα. Τώρα, ας εφαρμόσουμε τις ιδιότητες CSS σε αυτό:

---

---

.divΠίνακας
{
οθόνη: πίνακας;
πλάτος :αυτο;
Ιστορικό- χρώμα :#εεε;
σύνορο : 1px στερεό # 666666 ;
διάστιχο: 5 εικονοστοιχεία;
}
.divRow
{
πλάτος :αυτο;
display:table-row;
}
.divCell
{
πλάτος :150 px;
float:αριστερά;
εμφάνιση:πίνακας-στήλη;
Ιστορικό- χρώμα : rgb ( 212 , 209 , 209 ) ;
}

Στο παραπάνω στοιχείο στυλ CSS:

• Προσθέστε έναν επιλογέα που αναφέρεται στο ' divTable ' (που περιέχει όλες τις τιμές του πίνακα) και ορίστε τις επιθυμητές ιδιότητες CSS (δηλ., ' απεικόνιση », « πλάτος », « χρώμα του φόντου », « σύνορο ' και ' απόσταση συνόρων ”) για το περιεχόμενο του πίνακα.
• Μετά από αυτό, προσθέστε έναν επιλογέα κλάσης που επιλέγει τα στοιχεία του ' divRow 'Κλάση για προσθήκη του CSS' πλάτος ' και ' απεικόνιση ” ιδιότητες στα στοιχεία.
• Τέλος, προσθέστε τις ιδιότητες στυλ CSS στα στοιχεία στο ' .divCell ” επιλογέας τάξης.

Αυτό θα δημιουργήσει έναν πίνακα στην έξοδο και θα εμφανίσει τα ακόλουθα αποτελέσματα:

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