Πίνακες CSS

Η χρήση του CSS μπορεί να βελτιώσει σημαντικά την εμφάνιση των HTML πινάκων:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Tencent Building, High-tech Park, Nanshan District
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Παρακαλώ σημειώστε ότι η τάβλα在上面 έχει διπλά περιγράμματα. Αυτό οφείλεται στο γεγονός ότι η τάβλα και τα στοιχεία th και td έχουν ανεξάρτητα περιγράμματα.
Park Ridge Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District

Δοκιμάστε το個人

Shenzhen

Περιγράμματα τάβλας border Ορισμός.

Το παρακάτω παράδειγμα καθορίζει τα μαύρα περιγράμματα για τα στοιχεία <table>, <th> και <td>:

Firstname Lastname
Bill Gates
Steve Jobs

Παράδειγμα

table, th, td {
  border: 1px solid black;
}

Δοκιμάστε το個人

Σημείωση:Η τάβλα στο παραπάνω παράδειγμα έχει διπλά περιγράμματα. Αυτό οφείλεται στο γεγονός ότι η τάβλα και τα στοιχεία <th> και <td> έχουν ανεξάρτητα περιγράμματα.

Πλήρες πλάτος τάβλας

Σε ορισμένες περιπτώσεις, η τάβλα φαίνεται μικρή. Αν χρειάζεστε μια τάβλα που καλύπτει ολόκληρη την οθόνη (πλήρες πλάτος), προσθέστε στο στοιχείο <table> το width: 100%:

Παράδειγμα

table {
  width: 100%;
}

Δοκιμάστε το個人

Διπλά περιγράμματα

Παρακαλώ σημειώστε ότι η τάβλα在上面 έχει διπλά περιγράμματα. Αυτό οφείλεται στο γεγονός ότι η τάβλα και τα στοιχεία th και td έχουν ανεξάρτητα περιγράμματα.

Για να αφαιρέσετε τα διπλά περιγράμματα, δείτε το παρακάτω παράδειγμα.

Συγχώνευση περιγραμμάτων τάβλας

border-collapse Ορισμός αν θα συγχωνεύονται τα περιγράμματα της τάβλας σε ένα μόνο περίγραμμα:

Firstname Lastname
Bill Gates
Steve Jobs

Παράδειγμα

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Δοκιμάστε το個人

Αν θέλετε να υπάρχει μόνο περίγραμμα γύρω από τη τάβλα, διορίστε μόνο στο <table> το border ιδιότητες:

Firstname Lastname
Bill Gates
Steve Jobs

Παράδειγμα

table {
  border: 1px solid black;
}

Δοκιμάστε το個人

Πλάτος και ύψος τάβλας

Το πλάτος και το ύψος της τάβλας ορίζονται από width και height Ορισμός.

Το παρακάτω παράδειγμα ρυθμίζει το πλάτος της τάβλας στο 100% και το ύψος του στοιχείου <th> στο 50px:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

table {
  width: 100%;
}
th {
  height: 50px;
}

Δοκιμάστε το個人

Για να δημιουργήσετε μια τάβλα που καταλαμβάνει μισό από τη σελίδα, χρησιμοποιήστε το width: 50%:

Παράδειγμα

table {
  width: 50%;
}
th {
  height: 70px;
}

Δοκιμάστε το個人

Ευθυγράμμιση οριζόντιας

text-align Ορισμός της ευθυγράμμισης του περιεχομένου των στοιχείων <th> ή <td> (αριστερά, δεξιά ή στο κέντρο).

Στα προεπιλεγμένα, το περιεχόμενο του στοιχείου <th> είναι στο κέντρο και το περιεχόμενο του στοιχείου <td> είναι αριστερά ευθυγραμμισμένο.

Για να κάνετε το περιεχόμενο του στοιχείου <td> επίσης στο κέντρο, χρησιμοποιήστε το text-align: center:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

th {
  text-align: center;
}

Δοκιμάστε το個人

Το παρακάτω παράδειγμα κάνει το κείμενο του στοιχείου <th> αριστερά ευθυγραμμισμένο:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

th {
  text-align: left;
}

Δοκιμάστε το個人

Ευθυγράμμιση κάθετου

vertical-align Ορισμός της ευθυγράμμισης του περιεχομένου των στοιχείων <th> ή <td> (πάνω, κάτω ή στο κέντρο).

Στα προεπιλεγμένα, η ευθυγράμμιση του περιεχομένου της τάβλας είναι στο κέντρο (οι στοιχεία <th> και <td> είναι).

Η παρακάτω παράδειγμα ρυθμίζει τη ρυθμισμένη ευθυγράμμιση κειμένου του στοιχείου <td> προς το κάτω:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

td {
  height: 50px;
  vertical-align: bottom;
}

Δοκιμάστε το個人

πυκνότητα πίνακα

Για να ελέγξετε το διάστημα μεταξύ του περιβλήματος και του περιεχομένου της πίνακα, χρησιμοποιήστε στο στοιχείο <td> και <th> padding ιδιότητες:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

th, td {
  padding: 15px;
  text-align: left;
}

Δοκιμάστε το個人

οριζόντια διαχωριστική γραμμή

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

προσθέστε στο <th> και <td> border-bottom ιδιότητες, για να επιτύχετε την οριζόντια διαχωριστική γραμμή:

Παράδειγμα

th, td {
  border-bottom: 1px solid #ddd;
}

Δοκιμάστε το個人

πίνακας με διαθέσιμο

διαθέσιμο στο στοιχείο <tr> για να τονίσετε τη γραμμή της πίνακα όταν η μύαλη είναι εστιασμένη: :hover

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

tr:hover {background-color: #f5f5f5;}

Δοκιμάστε το個人

πινάκες γραμμών

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Για να επιτύχετε το αποτέλεσμα μοτίβου ζαμبی, χρησιμοποιήστε nth-child() επιλογέας, και προσθέστε χρώμα στοιχείου σε όλες τις αριθμημένες (ή παράλληλες) γραμμές πίνακα: background-color:

Παράδειγμα

tr:nth-child(even) {background-color: #f2f2f2;}

Δοκιμάστε το個人

Χρώμα πίνακα

Το παρακάτω παράδειγμα καθορίζει τον χρωματισμό του παραθύρου και του κειμένου του στοιχείου <th>:

Firstname Lastname Αποταμίευση
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Παράδειγμα

th {
  background-color: #4CAF50;
  color: white;
}

Δοκιμάστε το個人

Αλληλεπιδραστική πίνακας

Αν ο οθόνη είναι πολύ μικρός για να εμφανίσει το πλήρες περιεχόμενο, η αλληλεπιδραστική πίνακας θα εμφανίσει γραμμή κύλισης οριζόντιας:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Προσθέστε στο περίβλημα του στοιχείου <table> μια σύνδεσμο με overflow-x:auto του στοιχείου κελιάς (π.χ. <div>), για να επιτύχετε την αλληλεπίδραση:

Παράδειγμα

<div style="overflow-x:auto;">
<table>
... περιεχόμενο πίνακα ...
</table>
</div>

Δοκιμάστε το個人

Σημείωση:Στο OS X Lion (στο Mac), η γραμμή κύλισης είναι κατά προεπιλογή κρυφή και εμφανίζεται μόνο όταν χρησιμοποιείται (ακόμα και αν έχει ρυθμιστεί "overflow:scroll").

Περισσότερα παραδείγματα

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

CSS πινακίδες ιδιοτήτων

ιδιότητες περιγραφή
border Περιληπτικός Προσαρμοστής. Σε μια δήλωση καθορίζει όλες τις ιδιότητες των πλαίσιων.
border-collapse Καθορίζει αν θα συμπιεστούν τα πλαίσια του πίνακα.
border-spacing Καθορίζει την απόσταση μεταξύ των πλαίσιων των γειτονικών κελιών.
caption-side Καθορίζει τη θέση του τίτλου του πίνακα.
empty-cells Καθορίζει αν θα εμφανίζονται τα πλαίσια και τα χρώματα στο κενό των κελιών του πίνακα.
table-layout Ρύθμιση Λογισμικού Λογαριασμών για Πίνακες