Mostrar Datos Sql En La Tabla HTML Javascript

| | | | |

En los primeros días del desarrollo web, las tablas HTML eran muy simples y carecían de amplias opciones de estilo. Sin embargo, hoy en día, la mayoría de las tablas están diseñadas para crear una experiencia más estética y funcional para los usuarios.

CSS proporciona un conjunto de atributos de estilo de tabla. Estos atributos le permiten, entre otras cosas, separar las celdas de la tabla, especificar los bordes de la tabla y especificar el ancho y el alto de la tabla.

Este tutorial explicará, con ejemplos, cómo diseñar una tabla usando CSS . Al final de este tutorial, serás un experto.

Tablas HTML

El código HTML define la estructura de las tablas. Use la etiqueta

para definir una tabla. Las etiquetas ,
y especifican respectivamente filas, encabezados de tabla y celdas de contenido.

Veamos un ejemplo de tabla HTML. En el siguiente ejemplo, tenemos una tabla que enumera los cinco libros principales en la lista de libros más vendidos del New York Times para la semana del 23 de marzo de 2020:

Captura de pantalla 2020 03 24 a las 09.50.10 1

El código de nuestra tabla es el siguiente:

Esta tabla tiene tres columnas y seis filas, incluida una fila de `on tu mente.

Tablas CSS

CSS se usa para diseñar tablas. Aunque la tabla anterior muestra los datos de manera organizada, está escrita en HTML simple (no hay estilos). Al usar CSS, puede hacer que las tablas se vean mejor.

Hay muchas funciones de CSS que puede usar para diseñar una mesa. Con CSS puede:

  • agregar bordes
  • comprimir bordes
  • ajustar el espaciado de los bordes
  • ajustar el ancho y el alto de un tabla
  • agregar relleno
  • alinear texto horizontalmente
  • alinear texto verticalmente
  • agregar función jog mouse (hover)
  • establecer colores de celda
  • establecer cómo se mostrarán las celdas vacías

Cubriremos todos estos temas en la discusión a continuación.

Bordes

Supongamos que queremos agregar bordes alrededor de la matriz o alrededor de los elementos que contiene.

Para agregar bordes, podemos usar la propiedad border. Aquí hay un ejemplo que usa la propiedad border para agregar bordes a una tabla y sus celdas, incluidas las celdas de encabezado:

En nuestro código, definimos un borde negro sólido de 1 píxel de ancho. Aquí está el resultado de nuestro código:

Screen Shot 2020 03 24 at 09.53.50

Tenga en cuenta que nuestra tabla contiene doble borders Esto se debe a que aplicamos un borde a la tabla en sí (

), sus encabezados (
) y sus celdas (). Bordes dobles a bordes simples, podemos usar la propiedad border-collapse.

La propiedad border-collapse convierte los bordes dobles de una tabla en bordes simples. El valor predeterminado de la propiedad border-collapse se contrae. Si la propiedad border-collapse recibe el valor colapso , los bordes alrededor de una matriz se colapsarán.

Este es un ejemplo de la propiedad b command-collapse en acción:

Nuestro código devuelve:

Captura de pantalla 2020 03 24 al 09.55.49

Nuestra tabla y su contenido ahora tienen un solo borde.

Border Spac spa

Puede utilizar la propiedad border-spacing para definir el espacio entre las celdas de una tabla. La propiedad border-spacing define el espacio horizontal y vertical entre celdas - y lo hace en ese orden.

Aquí hay un ejemplo usando la propiedad border-spacing en nuestra tabla inicial (la que no tiene bordes colapsados):

Nuestro código devuelve:

Captura de pantalla 2020 03 24 a las 09.58.18

Cada una de nuestras celdas tiene un espacio de 10px en la horizontal y bordes verticales.

Ancho y alto

Puede especificar el ancho y el alto de una tabla y sus propiedades usando los atributos de ancho y alto .

Supongamos que queremos que el ancho de nuestra tabla de arriba (la que tiene los bordes colapsados) sea el ancho de la página web en sí, y supongamos que queremos que la altura de cada encabezado de tabla sea de 30 píxeles de alto. Podemos hacer esto. usando el siguiente código CSS:

Nuestro código devuelve:

Captura de pantalla 2020 03 24 a las 10.00.26

Como puede ver, nuestra tabla ahora tiene el ancho de la página web. Además, los encabezados de las columnas en nuestra tabla tienen 30 píxeles de alto.

Relleno

Puede usar la propiedad de relleno para añadir algo de espacio entre los bordes de celdas en una tabla y el contenido de esas celdas. La propiedad de relleno se puede usar en las etiquetas

y .

Supongamos que queremos agregar un relleno de 10 píxeles alrededor de la celda contenido de nuestra tabla, incluidas las celdas de encabezado. Podemos hacerlo usando este código:

Nuestro código devuelve:

 Captura de pantalla 2020 03 24 al 08/10.03 1  Captura de pantalla 2020 03 24 el 10.08.03 1

El contenido de cada una de las líneas y nuestra tabla de encabezados ahora tener un relleno de 10 píxeles en todos los bordes.

Alineación de texto horizontal

Puede usar la propiedad text-align para alinear el texto almacenado en una o

en una matriz. De forma predeterminada, los elementos están alineados al centro y los elementos están alineados a la izquierda.

Los valores más utilizados ‚Äã‚Äãodel atributo de alineación de texto son:< br>

  • izquierda, centro, derecha (compatible con todos los navegadores excepto Microsoft Edge e Internet Explorer)
  • inicio y final (compatible con todos los navegadores excepto Microsoft Edge e Internet Explorer) )

Supongamos que queremos centrar los elementos

en nuestra matriz y alinear los elementos a la izquierda de cada celda. Podemos hacerlo usando este código:

Nuestro código devuelve:

Screen Shot 2020 03 24 al 10.03.04

En este ejemplo, hemos centrado el texto fuera de la celda. La celda d `el encabezado y el texto de la celda del encabezado están alineados a la izquierda.

Alineación vertical del texto

CSS La propiedad vertical-align se usa para especificar la alineación vertical del contenido en el

o . De forma predeterminada, el valor de la propiedad de alineación vertical se establece en medio , lo que significa que el contenido se alinea verticalmente en el centro de la celda.

Supongamos que queremos alinear el texto en nuestras celdas

con la parte inferior de las celdas. Pos lo hacemos usando este código:

Nuestro código devuelve:

Scre in Shot 2020 03 24 to 10.05.40

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method