Πίνακες στυλ CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Η εμφάνιση ενός πίνακα HTML μπορεί να βελτιωθεί σημαντικά με το CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

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

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h1>A Fancy Table</h1>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbk�p</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>K�niglich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris sp�cialit�s</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

Περιγράμματα τραπεζιού

Για να καθορίσετε περιγράμματα πίνακα στο CSS, χρησιμοποιήστε την ιδιότητα περιθώριο.

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

Firstname Lastname
Peter Griffin
Lois Griffin

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Πίνακας HTML πλήρους πλάτους

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

Firstname Lastname
Peter Griffin
Lois Griffin

Παράδειγμα

table {
    width: 100%;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}

table {
  width: 100%;
}
</style>
</head>
<body>

<h2>Full-width Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Διπλά σύνορα

Παρατηρήστε ότι ο πίνακας στα παραπάνω παραδείγματα έχει διπλά περιθώρια. Αυτό είναι επειδή τόσο ο πίνακας όσο και τα στοιχεία <th> και <td> έχουν ξεχωριστά περιθώρια.

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

Σύμπτυξη περιγραμμάτων πίνακα

Η ιδιότητα border-collapse καθορίζει εάν ο πίνακας περιβάλλει θα πρέπει να συμπτυχθεί σε ένα μόνο περίγραμμα:

Firstname Lastname
Peter Griffin
Lois Griffin

Παράδειγμα

table
{
  border-collapse: collapse;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid;
}

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Let the table borders collapse</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Εάν θέλετε μόνο ένα περίγραμμα γύρω από τον πίνακα, καθορίστε μόνο την ιδιότητα border για <πίνακας>:

Firstname Lastname
Peter Griffin
Lois Griffin

Παράδειγμα

table
{
  border: 1px solid;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid;
}
</style>
</head>
<body>

<h2>Single Border Around The Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>