Хосияти 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;
}

Результат:

Ҳамчунин бубинед

  • хосияти bottom,
    ки ҷойгиршавии канори поёнии элементро муқаррар мекунад
  • хосияти top,
    ки ҷойгиршавии канори болоии элементро муқаррар мекунад
  • хосияти left,
    ки ҷойгиршавии канори чапи элементро муқаррар мекунад
  • хосияти right,
    ки ҷойгиршавии канори рости элементро муқаррар мекунад
  • судуэлементи ::backdrop,
    ки ҷойгиршавии баъди аввалин элементро муқаррар мекунад