Una guía paso a paso para comenzar con las tablas HTML

Tabla HTML

Visión de conjunto

La web está llena de información como puntajes de fútbol, ​​puntajes de cricket, listas de nombres de empleados y direcciones de correo electrónico. Las tablas HTML le permiten mostrar información en lo que comúnmente se conoce como datos tabulares.

NOTA: Ya he agregado el estilo usando CSS, por lo que mis elementos se verán diferentes. Pero funcionarán exactamente de la misma manera.
Si desea que sus elementos se parezcan a los míos, puede encontrar mi archivo CSS en los enlaces que figuran a continuación:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Tabla básica

Podemos crear una tabla HTML usando el elemento de tabla. Tiene una etiqueta de apertura y cierre, y envuelve todas las filas y celdas de la tabla dentro de ella.

Ahora, escriba una fila de la tabla. Las tablas están formadas por filas de información que atraviesan la página. Un elemento se usa para crear una fila de tabla.

Sin embargo, no hay ningún elemento para la columna de la tabla. Las columnas de la tabla dependen de cuántas celdas de tabla hay dentro de cada fila. Un elemento se usa para crear una celda de tabla. Entonces, básicamente, el número de elementos que agregará dentro del elemento es exactamente el mismo número de columnas que obtendrá dentro de la fila de su tabla.

Recordar:

  • : el elemento de tabla representa datos en una serie de filas y columnas. Las tablas solo deben usarse para mostrar datos tabulares, y nunca para el diseño de la página.
  • : el elemento de fila de la tabla define una fila de celdas en una tabla. Las filas de la tabla se pueden llenar con celdas de tabla y celdas de encabezado de tabla.
  • : el elemento de celda de tabla contiene datos y representa una celda de tabla única. Cada celda de la tabla debe estar dentro de una fila de la tabla.elementos de fila de tabla (<tr>) y celda de tabla (<td>) juntos para formar una tabla
    Nota: los elementos no tienen atributos. Si ha trabajado con tablas anteriormente, es posible que haya utilizado algunos atributos en el pasado. Sin embargo, ahora todos están en desuso.

    Elemento de encabezado de tabla

    Hemos creado una tabla básica, pero no está claro que nuestra primera fila en la tabla sea en realidad un intento de etiquetar cada una de nuestras columnas. En este momento, la primera fila simplemente se parece a otra fila en nuestra tabla.

    Podemos usar un elemento de encabezado de tabla en cada una de estas tres columnas para decirle al navegador, a los rastreadores de motores de búsqueda y a los lectores de pantalla que en realidad son encabezados y no solo datos regulares.

    Ahora cambiaremos las celdas de la tabla en la primera fila a una celda de encabezados de tabla. Para hacer eso, reemplazaremos

    para la cabeza y para el cuerpo.

    : el elemento de encabezado de tabla (que no debe confundirse con el elemento de celda de encabezado de tabla) define un conjunto de filas que conforman el encabezado de una tabla.
  • : el elemento del cuerpo de la tabla define una o más filas que conforman el contenido primario (o "cuerpo") de una tabla.elementos de encabezado de tabla (<thead>) y cuerpo de tabla (<tbody>)

    Elemento de pie de mesa

    Tenemos una cabeza de mesa y un elemento de cuerpo de mesa. Por supuesto, también hay un elemento de pie de mesa. Pero la pregunta es ¿cuál es el punto del elemento de pie de tabla cuando ya tenemos los encabezados de tabla que etiquetan las columnas?

    En general, un elemento de pie de tabla debe contener un resumen de la tabla. Estas podrían ser algunas celdas finales que contienen sumas, totales y promedios para cada columna. También puede contener cierta metainformación como información de copyright o la fuente de datos dentro de una tabla.

    Ahora, usted pensaría que el pie de página iría al final de la tabla. Sin embargo, en realidad debería ir justo después del elemento del encabezado de la tabla y justo antes del elemento del cuerpo de la tabla.

    : el elemento de pie de página de tabla define un conjunto de filas que resumen las columnas de la tabla.elemento pie de tabla (<tfoot>)

    Elemento de subtítulo

    Este elemento es básicamente un título para la tabla, y debe aparecer inmediatamente después de la etiqueta de apertura de la tabla. Es bueno agregarlo porque resume rápidamente lo que puede contener una tabla.

    Ahora hemos cubierto lo esencial de los elementos de la tabla en HTML.

    Puede obtener más información sobre las tablas en los enlaces que figuran a continuación.

    Espero que hayas encontrado esta publicación informativa y útil. ¡Me encantaría escuchar tus comentarios!

    ¡Gracias por leer!

    highresolution-wallpapers.net © 2020
    por .

    El texto en la primera fila es más audaz que las otras filas debido al elemento <th> usado dentro de la primera <tr>

    Mesa Cabeza y Cuerpo

    Similar a la estructura de nuestro documento HTML, donde tenemos un encabezado y un cuerpo, también podemos agregar un encabezado y un cuerpo a nuestra tabla. Definitivamente no usaremos los mismos elementos HTML porque la sintaxis dejará de ser válida. Para la mesa, tenemos