Esta propiedad se utiliza para especificar la posición en la que se coloca el título de la tabla. Se utiliza en tablas HTML. Esta propiedad se puede usar con cualquier elemento cuya propiedad de visualización se establezca en el lado del título.
Sintaxis:
caption-side: top|bottom|block-start|block-end|inline-start|inline-end|initial|inherit;
Valor por defecto
- parte superior
Propiedades:
1. top: Especifica que el título de la tabla se coloca en la parte superior de la tabla. Es el valor predeterminado.
Sintaxis:
caption-side:top;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>caption-side property</title>
<style>
.geeks {
caption-side: top;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>caption-side: top:</h2>
<table class="geeks" border="1">
<caption>Table 4.1 Student Details</caption>
<tr>
<th>Student Name</th>
<th>Enroll_no.</th>
<th>Address</th>
</tr>
<tr>
<td>Hritik Bhatnagar</td>
<td>234</td>
<td>Delhi</td>
</tr>
<tr>
<td>Govind madan</td>
<td>235</td>
<td>kolkata</td>
</tr>
<tr>
<td>Suraj Roy</td>
<td>236</td>
<td>Mumbai</td>
</tr>
<tr>
<td> Dhruv Mishra</td>
<td>237</td>
<td>Dehadun</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
2. inferior: esta propiedad especifica que el título de la tabla se coloca en la parte inferior de la tabla.
Sintaxis:
caption-side:bottom;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>caption-side property</title>
<style>
.geeks {
caption-side: bottom;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>caption-side: bottom:</h2>
<table class="geeks" border="1">
<caption>Table 4.1 Student Details</caption>
<tr>
<th>Student Name</th>
<th>Enroll_no.</th>
<th>Address</th>
</tr>
<tr>
<td>Hritik Bhatnagar</td>
<td>234</td>
<td>Delhi</td>
</tr>
<tr>
<td>Govind madan</td>
<td>235</td>
<td>kolkata</td>
</tr>
<tr>
<td>Suraj Roy</td>
<td>236</td>
<td>Mumbai</td>
</tr>
<tr>
<td> Dhruv Mishra</td>
<td>237</td>
<td>Dehadun</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
3. initial: Establece la propiedad a su valor por defecto.
Sintaxis:
captipn-side:initial
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
caption-side: initial;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>caption-side:initial:</h2>
<table class="geeks" border="1">
<caption>Table 4.1 Student Details</caption>
<tr>
<th>Student Name</th>
<th>Enroll_no.</th>
<th>Address</th>
</tr>
<tr>
<td>Hritik Bhatnagar</td>
<td>234</td>
<td>Delhi</td>
</tr>
<tr>
<td>Govind madan</td>
<td>235</td>
<td>kolkata</td>
</tr>
<tr>
<td>Suraj Roy</td>
<td>236</td>
<td>Mumbai</td>
</tr>
<tr>
<td> Dhruv Mishra</td>
<td>237</td>
<td>Dehadun</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad del lado del título CSS se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 8.0
- Firefox 1.0
- Ópera 4.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA