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;
}

Результат:

Տես նաև