caption-side xususiyati

caption-side xususiyati <caption> tegi yordamida yaratilgan jadval sarlavhasining joylashishini belgilaydi. Xususiyatning ikki qiymati bo'lishi mumkin: top (jadvalning yuqori qismida, standart) yoki bottom (jadval ostida).

Sintaksis

cssselector {
  caption-side: top | bottom;
}

Misol

Keling, sarlavhani jadval ustiga joylashtiramiz:

html<table border="1" width="300">
  <caption>Jadval</caption>
  <tr>
    <th>Sarlavha</th>
    <th>Tavsif</th>
  </tr>
  <tr>
    <td>matn1</td>
    <td>matn2</td>
  </tr>
</table>

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

Результат:

Misol

Endi esa sarlavhani jadval ostiga ko'chiramiz:

html<table border="1" width="300">
  <caption>Jadval</caption>
  <tr>
    <th>Sarlavha</th>
    <th>Tavsif</th>
  </tr>
  <tr>
    <td>matn1</td>
    <td>matn2</td>
  </tr>
</table>

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

Результат:

Shuningdek qarang