Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades del lado del subtítulo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada lado del subtítulo Con sintaxis y ejemplos.
describir
La propiedad caption-side de CSS define la posición del título de la tabla.
sintaxis
La sintaxis para las propiedades CSS del lado del encabezado es:
caption-side: value;parámetro o parámetro
valor
La posición del título de la tabla. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| óptimo | El cuadro de título aparece encima de la tabla. lado del encabezado {lado del encabezado: arriba; } |
| fondo | El cuadro de título aparece debajo de la tabla. lado del subtítulo { lado del subtítulo: abajo; } |
| permanecer | El cuadro de título aparece a la izquierda de la tabla. final del subtítulo { final del subtítulo: línea de base; } |
| derecho | El cuadro de título aparece a la derecha de la tabla. final del subtítulo { final del subtítulo: sub; } |
| heredar | El elemento heredará la propiedad del lado del título de su elemento principal lado del subtítulo { lado del subtítulo: heredar; } |
notas
- La propiedad caption-side de CSS se aplica al elemento table-caption.
- ver HTML
elemento.
Compatibilidad del navegador
La propiedad del lado del título de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Internet Explorer 8+ (IE 8+)
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad del lado del título a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
A continuación se muestra un uso
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.prograrmaplus.com</title>
</head>
<body>
<table>
<caption>This is the caption for the table</caption>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
<th>Column 3 Heading</th>
</tr>
<tr>
<td>Data in Column 1, Row 2</td>
<td>Data in Column 2, Row 2</td>
<td>Data in Column 3, Row 2</td>
</tr>
<tr>
<td>Data in Column 1, Row 3</td>
<td>Data in Column 2, Row 3</td>
<td>Data in Column 3, Row 3</td>
</tr>
<tr>
<td>Data in Column 1, Row 4</td>
<td>Data in Column 2, Row 4</td>
<td>Data in Column 3, Row 4</td>
</tr>
</table>
</body>
</html>encima de la mesa
Si desea que el cuadro de encabezado aparezca encima de la tabla, puede establecer la propiedad del lado del encabezado del elemento de encabezado en la parte superior:
caption { caption-side: top; }la siguiente tabla
Para mostrar un cuadro de encabezado debajo de la tabla, puede establecer la propiedad del lado del encabezado del elemento del encabezado en la parte inferior:
caption { caption-side: bottom; }lado izquierdo de la mesa
Para mostrar el cuadro de título a la izquierda de la tabla, puede establecer la propiedad del lado del título del elemento de título a la izquierda:
caption { caption-side: left; }lado derecho de la mesa de comedor
Para mostrar el cuadro de título a la derecha de la tabla, puede establecer la propiedad del lado del título del elemento de título a la derecha:
caption { caption-side: right; }