A caption-side tulajdonság

A caption-side tulajdonság a <caption> taggel létrehozott táblázat címének elhelyezkedését határozza meg. A tulajdonságnak két értéke lehet: top (a táblázat tetején, alapértelmezés szerint) vagy bottom (a táblázat alatt).

Szintaxis

cssszelektor {
  caption-side: top | bottom;
}

Példa

Helyezzük a címet a táblázat fölé:

html<table border="1" width="300">
  <caption>Táblázat</caption>
  <tr>
    <th>Fejléc</th>
    <th>Leírás</th>
  </tr>
  <tr>
    <td>szöveg1</td>
    <td>szöveg2</td>
  </tr>
</table>

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

Результат:

Példa

Most pedig helyezzük a címet a táblázat alá:

html<table border="1" width="300">
  <caption>Táblázat</caption>
  <tr>
    <th>Fejléc</th>
    <th>Leírás</th>
  </tr>
  <tr>
    <td>szöveg1</td>
    <td>szöveg2</td>
  </tr>
</table>

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

Результат:

Lásd még