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

Результат:

यह भी देखें