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>text1</td>
    <td>text2</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>text1</td>
    <td>text2</td>
  </tr>
</table>

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

Результат:

මෙයද බලන්න