En nuestra vida diaria, decimos que la altura es la medición de algo de abajo hacia arriba, o de cabeza a pie. Tenemos la propiedad de "altura" en CSS que nos brinda esta oportunidad de establecer la altura de la tabla de acuerdo con nuestra elección. Podemos configurarlo en píxeles o porcentajes. Cuando establecemos cualquier valor en esta propiedad de "altura", nuestra tabla se ajusta en esa altura dada. En esta guía, utilizaremos esta propiedad para configurar la altura de la mesa y le permitiremos saber cómo establecerá la altura de la mesa. Estableceremos la altura de la mesa aquí en diferentes ejemplos.
Ejemplo 1
Primero debemos diseñar la tabla en el archivo HTML para establecer la altura de la tabla. El código de Visual Studio se utiliza para producir este archivo HTML. Puede usar cualquier software para hacer estos códigos. Estamos utilizando este software para ejecutar ejemplos en esta guía. Al crear un nuevo archivo en el código de Visual Studio, debemos seleccionar el idioma o lo reconocerá de forma predeterminada. Cuando elegimos HTML como idioma, la extensión del archivo se genera automáticamente cuando guardamos el archivo en cualquier nombre.
Después de seleccionar HTML como idioma, simplemente escribimos "!"En este archivo y presione" Enter ". Las etiquetas fundamentales del código "HTML" se forman automáticamente. Simplemente coloque la porción del cuerpo en el cuerpo HTML. El enlace del archivo CSS se coloca ante el cuerpo dentro de la etiqueta "Cabeza". Creamos la tabla generando primero el encabezado y luego usando el "
" etiqueta. Hay cinco columnas y seis filas en la tabla que estamos haciendo. La primera fila es la fila de encabezado de la tabla y usamos "th" para agregar datos a la fila de encabezado de la tabla.
También usamos la etiqueta "TD" para insertar datos en las celdas de la tabla con "TR" que representa las filas de la tabla. Luego, continuaremos con el archivo CSS que se usará para establecer la altura de esta tabla.
Estilizar el encabezado mencionando "H1" y usar propiedades de CSS aquí. Establecimos el "color" en "rojo". La "familia de fuentes" de este encabezado es "Times New Roman". Luego, diseñe toda la tabla aplicando un "borde" de "2px" y configure su tipo en "sólido". El color del borde es "gris".
Entonces, tenemos el "ancho" de la mesa. Estamos usando "250px" para el ancho. Aquí, vamos a establecer la "altura" de la mesa. Para establecer la altura de la tabla usamos la propiedad de "altura" de CSS. Cuando establecemos el valor aquí en esta propiedad de "altura", establecerá la altura de la tabla. Estamos estableciendo la "altura" de esta tabla en "150px". Entonces, cuando esta tabla se presente en la pantalla, tendrá una altura "150px".
Después de esto, establecemos el borde en un solo borde para todas las celdas y las fronteras de la tabla mediante el uso de la propiedad "border-colapso" y estableciendo esta propiedad en "colapsar". También aplicamos el borde en las celdas y la fila de encabezado. También usamos la propiedad "fronteriza" con "th" y "td" y establecemos el mismo borde que establecemos para la mesa. El borde está en "gris" de tipo "sólido" y "2px" en su ancho.
La tabla que se proporciona a continuación está a la altura "150px". Administra su contenido a esta altura que hemos mencionado en el código CSS. Cuando establecemos la altura de la mesa, se creará a la misma altura.
Ejemplo # 2
La tabla que estamos usando aquí es la misma que hemos creado en el ejemplo anterior. Pero aquí, vamos a cambiar la altura de la tabla utilizando la propiedad de altura. Establecemos "azul" para el "encabezado" que aparece ante la mesa en la parte superior de la página. Luego, establezca su "familia de fuentes" en "Calibri" y su peso es "más audaz". Luego, aplicamos algunas propiedades a toda la tabla. Establezca el borde usando "borde" de "2px" y en forma "sólida" y en color "naranja". El ancho de esta tabla es "300px". Esta vez y estamos aumentando la altura de la mesa aquí a "250px". El "colapso del borde" es nuevamente "colapso" en este ejemplo. La configuración del "th" y "td", aplicando el mismo borde que la tabla y el "color" "rojo", establece el color del texto escrito en las celdas y enciende las celdas a "rojo". La "familia de fuentes" para este texto es "Arial".
En esta salida, la altura de la tabla se incrementa desde la tabla anterior que hemos creado en el Ejemplo 1 porque cambiamos la altura aquí en el código CSS. Entonces, aumentamos la altura de la mesa.
Ejemplo # 3
Estamos usando la misma tabla nuevamente que la que usamos en el primer ejemplo. Pero vamos a cambiar el valor de la propiedad de la altura para ajustar la altura de la tabla. El "encabezado" que se muestra ante la mesa en la parte superior está configurado en "Purple". Luego, cambie la "familia de fuentes" de la fuente a "argelina". Luego, aplicamos algunos atributos a toda la tabla y establecemos el borde. Primero, con un "borde" de "2px" y en forma "sólida", así como en el color "verde". Esta vez, el ancho de la mesa es "automático", mientras que la altura de la mesa es "100px."
En este caso, "border-colapso" se establece con "colapso". El "th" y "td" se establecen en el mismo borde que la mesa. El color del texto escrito en las celdas y las celdas de rumbo se establece en "púrpura". La "familia de fuentes" de este texto es "Cambria".
La captura de pantalla dada es la salida de este código. Aquí, puede ver que la tabla ajusta su ancho automáticamente y la altura de esta tabla dada es "100px".
Ejemplo # 4
Establecemos la misma tabla utilizando diferentes valores de las propiedades. El "color" del encabezado es "naranja" y su "familia de fuentes" es "argelina". En este caso, el color del borde de toda la mesa es "púrpura". El "ancho" de toda la mesa es nuevamente "auto", pero la "altura" de la tabla es "400px". El borde de todas las células es "púrpura" y el texto "color" es "rojo". La "familia de fuentes" del texto es "sans-serif".
Aquí, en la captura de pantalla, puede notar la altura de la mesa. La tabla es similar a la ilustración de arriba. Pero en la ilustración a continuación, la altura de la tabla se cambia.
Ejemplo # 5
En este código, establecemos el encabezado al color "verde" de "argelino" "-familia de fuentes". Luego, las propiedades de la tabla son las mismas que hemos discutido en el ejemplo anterior. Aquí, estamos estableciendo la altura de la tabla usando porcentaje en lugar de Pixel. Vamos a ajustar la altura de la mesa al "50%". Ahora, verificaremos la salida cómo se ve la tabla cuando establecemos su altura en porcentaje.
Aquí, la altura de la mesa es "50%" y su ancho es automático. Podemos establecer cualquier valor en esta propiedad de "altura" de la tabla. Podemos establecer la altura de la tabla correspondiente a nuestra elección.
Conclusión:
Esta guía tenía la intención de mostrarle cuál es la altura de la mesa, cómo establecer la altura de la tabla en CSS y qué propiedad CSS se usa para establecer la altura de la mesa. Como hemos discutido, la altura es la medición de la tabla de arriba a abajo. Hemos revisado varios códigos aquí, y también hemos incluido la salida. Después de estudiar a fondo esta guía, podrá establecer la altura de la mesa en CSS en el futuro.
