Podemos especificar la posición del título de la tabla (lt; tablegt;) (etiqueta de título) configurando el valor de atributo relevante del atributo css caption-side, es decir: puede usar el título del lado atributo para especificar que el título se encuentra en qué lado del formulario.
En la tabla, la etiqueta caption se utiliza para proporcionar un título breve para la tabla, como un título o una breve descripción. La etiqueta de título se inserta después de la etiqueta
de apertura y siempre debe ser el primer elemento secundario de la tabla. Luego podemos usar el atributo del lado del título para cambiar su posición en la tabla. Podemos utilizar el atributo caption-side para posicionar el título de la tabla encima o debajo de la tabla, especificando que el título se ubica encima o debajo de la tabla.
Nota:
1. Antes de CSS 2.1, se proporcionaban dos valores: "izquierda" y "derecha" para posicionar el título a la izquierda y derecha de la tabla respectivamente. Sin embargo, estos dos valores se eliminaron en la especificación 2.1 final y ahora no son estándar y no son muy compatibles con los navegadores.
2. Si desea "alinear horizontalmente" el contenido del título en el cuadro de título, debe utilizar el atributo de alineación de texto; también puede configurar otros métodos de alineación a través del atributo de alineación de texto.
Echemos un vistazo a cómo el atributo del lado del título establece la posición del título de la tabla.
Sintaxis básica del atributo caption-side:
caption-side: arriba | abajo | heredar Atributo predeterminado: arriba
Se aplica a: 'table-caption ' En el elemento
Animación: Ninguna
Descripción del valor del atributo del lado del título:
arriba: el título se puede colocar encima de la tabla.
abajo: El título se puede colocar debajo de la tabla.
heredar: hereda la posición del título de la posición del título principal.
Ejemplos del atributo del lado del título:
1. El título está encima de la tabla
código html:
lt; class=" default"gt;
lt;captiongt;lt;emgt;El título de la tabla, posición: top (predeterminado)lt;/emgt;lt;/captiongt;
lt;theadgt;
lt;
lt; contenido del título 1lt;
lt; cosa;
lt;/trgt;
lt;/theadgt;
lt;tfootgt;
lt;trgt;
lt; tdgt; contenido del pie de página 1lt; /tdgt;
lt; tdgt;
lt;/tfootgt;
lt;tbodygt;
lt;trgt;
lt;tdgt;contenido del cuerpo 1lt;/tdgt;
lt;tdgt;body content2lt;/tdgt;
lt;/trgt;
lt;/tbodygt;
lt;/tablegt ;código CSS:
título {
lado del título: arriba;
relleno: .5em
color: #de64a4;
p>}Representación:
2. El título está debajo de la tabla
Código HTML:
lt;tablegt;
lt;captiongt;lt;emgt;El título de la tabla, posición: bottomlt;/emgt;lt;/captiongt;
lt;theadgt;
lt ;trgt;
lt;thgt;Contenido del título 1lt;/thgt;
lt;thgt;Contenido del título 2lt;/thgt;
lt;/trgt ;
lt;/theadgt;
lt;tfootgt;
lt;trgt;
lt;tdgt;contenido de pie de página 1lt; /tdgt;
p>lt;tdgt;footer content2lt;/tdgt;
lt;/trgt;
lt;/tfootgt;
lt; tbodygt;
lt;trgt;
lt;tdgt;contenido del cuerpo 1lt;/tdgt;
lt;tdgt;contenido del cuerpo 2lt ;/tdgt;
lt;/trgt;
lt;/tbodygt;
lt;/tablegt;código css:
título {
lado del título: abajo;
relleno: .5em;
color: #de64a4; /p>
Compatibilidad con navegadores:
Todos los principales navegadores admiten el atributo de subtítulos, como: Chrome, Firefox, Safari, Opera, I.
Internet Explorer 8 y Android e iOS
Nota:
1. IE8 solo admite el atributo del lado del título si se especifica !DOCTYPE.
2. Firefox admite dos valores no estándar: izquierda y derecha.
Resumen: