Ιδιότητα caption-side

Η ιδιότητα caption-side ορίζει τη θέση του τίτλου ενός πίνακα, ο οποίος δημιουργείται με την ετικέτα <caption>. Η ιδιότητα μπορεί να έχει δύο τιμές: top (στην κορυφή του πίνακα, προεπιλογή) ή bottom (κάτω από τον πίνακα).

Σύνταξη

cssεπιλογέας {
  caption-side: top | bottom;
}

Παράδειγμα

Ας τοποθετήσουμε τον τίτλο πάνω από τον πίνακα:

html<table border="1" width="300">
  <caption>Πίνακας</caption>
  <tr>
    <th>Κεφαλίδα</th>
    <th>Περιγραφή</th>
  </tr>
  <tr>
    <td>κείμενο1</td>
    <td>κείμενο2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

Παράδειγμα

Και τώρα ας μετακινήσουμε τον τίτλο κάτω από τον πίνακα:

html<table border="1" width="300">
  <caption>Πίνακας</caption>
  <tr>
    <th>Κεφαλίδα</th>
    <th>Περιγραφή</th>
  </tr>
  <tr>
    <td>κείμενο1</td>
    <td>κείμενο2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

Δείτε επίσης