Savybė caption-side

Savybė caption-side nustato lentelės antraštės, sukurtos naudojant žymą <caption>, padėtį. Ši savybė gali turėti dvi reikšmes: top (lentelės viršuje, pagal nutylėjimą) arba bottom (po lentele).

Sintaksė

cssselektorius {
  caption-side: top | bottom;
}

Pavyzdys

Pastatykime antraštę virš lentelės:

html<table border="1" width="300">
  <caption>Lentelė</caption>
  <tr>
    <th>Antraštė</th>
    <th>Aprašymas</th>
  </tr>
  <tr>
    <td>tekstas1</td>
    <td>tekstas2</td>
  </tr>
</table>

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

Результат:

Pavyzdys

O dabar perkelkime antraštę po lentele:

html<table border="1" width="300">
  <caption>Lentelė</caption>
  <tr>
    <th>Antraštė</th>
    <th>Aprašymas</th>
  </tr>
  <tr>
    <td>tekstas1</td>
    <td>tekstas2</td>
  </tr>
</table>

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

Результат:

Taip pat žiūrėkite