Sifat caption-side

Sifat caption-side menetapkan kedudukan kapsyen jadual, yang dibuat menggunakan tag <caption>. Sifat ini mempunyai dua nilai yang mungkin: top (di atas jadual, secara lalai) atau bottom (di bawah jadual).

Sintaks

cssselector {
  caption-side: top | bottom;
}

Contoh

Mari letakkan kapsyen di atas jadual:

html<table border="1" width="300">
  <caption>Jadual</caption>
  <tr>
    <th>Kepala</th>
    <th>Keterangan</th>
  </tr>
  <tr>
    <td>teks1</td>
    <td>teks2</td>
  </tr>
</table>

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

Результат:

Contoh

Sekarang mari alihkan kapsyen ke bawah jadual:

html<table border="1" width="300">
  <caption>Jadual</caption>
  <tr>
    <th>Kepala</th>
    <th>Keterangan</th>
  </tr>
  <tr>
    <td>teks1</td>
    <td>teks2</td>
  </tr>
</table>

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

Результат:

Lihat juga