Mesa central CSS
Ejemplo 01: Crear una tabla en el centro de la página web utilizando la etiqueta de estilo CSS en un archivo HTML
En este caso, crearemos una tabla que se alineará con el centro de la página web. El método CSS de etiqueta de estilo se utilizará en este caso. La propiedad de margen se utilizará en este ejemplo para alinear centralmente una tabla en nuestro navegador.
En este script, primero abriremos la etiqueta de la cabeza. En la etiqueta de la cabeza, abriremos la etiqueta de estilo CSS. En la etiqueta de estilo, le daremos a la mesa y sus elementos algunas propiedades de estilo. Primero será el tamaño, la forma y el color del borde; Entonces, le daremos algo de relleno. Al final de la etiqueta de estilo, asignaremos la propiedad de "margen" y luego cerraremos el estilo y la etiqueta de la cabeza. Después de esto, abriremos la etiqueta del cuerpo, en la que crearemos nuestra tabla usando la etiqueta de la tabla. Dentro de la etiqueta de la tabla, le daremos dos conjuntos de filas. En la primera fila, se utilizará la etiqueta "th", que asignará el encabezado de la columna de la tabla. Luego crearemos la segunda fila con la etiqueta "TR" y le daremos a esta fila algunos datos para las columnas utilizando la etiqueta "TD".
Como podemos ver en la salida anterior, la tabla está alineada con el centro de la página debido a la propiedad automática de margen que se asignó en el encabezado del archivo.
Ejemplo 02: Uso de la técnica CSS en línea para alinear una tabla en el centro de una página HTML
En este ejemplo, utilizaremos la propiedad de margen con la función automática, que alineará la tabla con el centro de la página web. El enfoque CSS en línea se utilizará en este ejemplo para lograr el objetivo.
En este script, comenzaremos directamente desde la etiqueta del cuerpo. Comenzaremos con la etiqueta H1 para darle un título a la página. Luego comenzaremos la etiqueta de la tabla en la que daremos la llamada de estilo y le daremos un borde con su forma, tamaño y color como propiedad. Luego le daremos a la tabla un poco de relleno, y se llamará a la propiedad de margen con la función automática. La etiqueta "TR" se usará para agregar dos filas a la tabla. Usaremos la etiqueta "th" para dar la columna de los nombres de la tabla y la etiqueta "TD" para asignar datos a la segunda fila de la tabla. La palabra clave de estilo CSS en línea se aplicará a las etiquetas "TH" y "TD" para proporcionar características estilísticas a los componentes de la tabla de forma independiente. Las propiedades de estilo incluyen el borde con forma, tamaño, color y relleno.
Después de guardar el script anterior y abrirlo en cualquier navegador de su elección, obtendremos la salida de sobrecarga. Como podemos ver que hemos alineado con éxito la tabla con el centro de la página utilizando el enfoque CSS en línea.
Ejemplo 03: Uso de propiedades CSS de margen-izquierda y margen-derecho para alinear una tabla al centro de la página en un archivo HTML
En este ejemplo, se utilizará el enfoque de etiqueta de estilo CSS. Aquí, crearemos una tabla que se centrará en la página. La propiedad de margen se separará en dos piezas, izquierda y derecha, que luego se utilizará para alinear centralmente una tabla en la página de nuestro navegador en este ejemplo.
La etiqueta de la cabeza se abrirá primero en este script. La etiqueta de estilo CSS se abrirá en la etiqueta de la cabeza. Le daremos a la mesa y sus partes algunas características estilísticas con la etiqueta de estilo. El tamaño, la forma y el color del borde serán primero, seguido de relleno. Después de la etiqueta de estilo, asignaremos las propiedades de "margen-derecha" y "margen-izquierda" y les daremos valores porcentuales antes de cerrar el estilo y las etiquetas de la cabeza. Después de eso, abriremos la etiqueta del cuerpo y comenzaremos proporcionando a la página un encabezado usando la etiqueta H1. La etiqueta de la tabla se usará para construir nuestra tabla. Le daremos dos conjuntos de filas dentro de la etiqueta de la tabla.
La etiqueta "th" se usará en la primera fila para asignar el encabezado de la columna de la tabla. Luego, usando la etiqueta "TR", crearemos la segunda fila y usaremos la etiqueta "TD" para llenar las columnas con datos. Después de eso, cerraremos todas las etiquetas y guardaremos el archivo para preservar las modificaciones que se mostrarán en nuestro navegador, como se ve a continuación:
La tabla está alineada hasta el centro de la página, como se muestra en la salida anterior, debido a las propiedades de margen-izquierda y margen de derecha establecidos en el encabezado del archivo.
Ejemplo 04: Uso de propiedades CSS de margen-izquierda y margen-derecho con la función automática para alinear una tabla al centro de la página
En este ejemplo, se utilizará el enfoque de etiqueta de estilo CSS. Aquí, haremos una mesa que exista en el centro de la página. La propiedad de margen se dividirá en dos secciones, izquierda y derecha, que luego se utilizará para alinear centralmente una tabla en nuestro ejemplo utilizando la función automática en la página de nuestro navegador.
En este script, la etiqueta de cabeza se abrirá primero. En la etiqueta de la cabeza, se abrirá la etiqueta de estilo CSS. Con la etiqueta de estilo, le daremos a la mesa y sus componentes algunas cualidades estilísticas. El relleno vendrá después del tamaño, la forma y el color del borde. Antes de cerrar el estilo y las etiquetas de la cabeza, agregaremos las propiedades de "margen-derecha" y "margen-izquierda" después de la etiqueta de estilo y les daremos la función automática como su valor. La etiqueta de la tabla se utilizará para construir nuestra mesa.
Dentro de la etiqueta de la tabla, le daremos dos conjuntos de filas. La etiqueta "th" se usará en la primera fila para dar la columna que se dirige a la tabla. Luego, usando la etiqueta "TR", construiremos la segunda fila, y la etiqueta "TD" se usará para llenar las columnas con datos. Después de eso, cerraremos todas las etiquetas y guardaremos el archivo para preservar los cambios que serán visibles en nuestro navegador.
Debido a que los valores de margen-izquierda y margen-derecho en el encabezado del archivo están configurados en automóvil, la tabla está alineada con el centro de la página, como se muestra en la salida anterior.
Conclusión
Discutimos numerosos métodos que CSS proporciona para alinear una tabla en el centro de una página web en este artículo. La propiedad del margen se exploró e implementó en el lenguaje de marcado de hipertexto para lograr este fenómeno. Utilizamos la propiedad de margen con varias propiedades diferentes asignadas, como la función automática y los valores de porcentaje, para alinear la tabla en el centro. Implementamos todos los ejemplos en el Notepad ++ IDE en este artículo.