Својството 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;
}

Результат:

Погледнете ги исто така