Etiquetas de tabla HTML - Aprenda los ejemplos de etiquetas de tabla HTML con sintaxis

• Introducción a las etiquetas de tabla HTML

Introducción a las etiquetas de tabla HTML

La tabla HTML proporciona una forma de derivar o definir datos como texto, imágenes, enlaces, etc. en términos de filas y columnas de celdas. Las tablas HTML se pueden crear utilizando

etiqueta. Por defecto, los datos de la tabla se dejan alineados. En este tema, vamos a aprender sobre las etiquetas de tabla HTML.

La tabla se puede crear usando

Etiquetas

• los

La etiqueta especifica las filas de la tabla que se utilizan para hacer una fila.

Los datos de la tabla pueden estructurarse dentro de

,	y
La etiqueta define un encabezado para la tabla. los	La etiqueta especifica las celdas de datos de la tabla que se utilizan para hacer la columna. los

contenido de la mesa con numerosos elementos de mesa.

Sintaxis

Encabezado de tabla 1	Encabezado de tabla 2
Celda de datos 1	Celda de datos 2
Celda de datos 3	Celda de datos 4

Ejemplos de etiquetas de tabla HTML

Estos son los ejemplos de etiquetas de tabla HTML que figuran a continuación

1. Uso básico de la mesa



HTML Table Tag Usage



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

Guarde el código con la extensión .html y ábralo en el navegador. Mostrará la siguiente salida:

2. Título de la tabla

El título de la tabla se puede especificar utilizando la etiqueta < caption > .

Ejemplo



HTML Table Tag Usage



Este es el subtítulo de la tabla

Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

El código anterior mostrará el siguiente resultado:

3. Espacio entre celdas de tabla

El espacio de las celdas de la tabla se puede definir utilizando el atributo de espacio de celdas. El atributo de espacio de celdas especifica el espacio entre las celdas de la tabla.

Ejemplo



HTML Table Tag Usage



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

El código anterior mostrará la siguiente salida:

4. Relleno de celda de mesa

El relleno de las celdas de la tabla se puede definir utilizando el atributo cellpadding. La distancia del atributo cellpadding entre el borde de la celda de la tabla y los datos.

Ejemplo



HTML Table Tag Usage



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

El código anterior mostrará el siguiente resultado:

5. Atributos de columna y fila

Las dos o más filas de la tabla se pueden fusionar en una sola fila utilizando el atributo rowspan y las columnas de la tabla se pueden fusionar en una sola columna utilizando un atributo colspan.

Ejemplo



HTML Table Tag Usage



Columna uno	Columna dos	Columna tres
Fila uno	Fila dos	Fila tres
	Fila cuatro	Fila cinco
Fila seis

El código mostrará la siguiente salida:

6. Antecedentes de la tabla

El fondo de la tabla se puede crear utilizando el atributo bgcolor. El borde de la celda de la tabla se puede especificar utilizando el atributo de color del borde.

Ejemplo



HTML Table Tag Usage



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

Ejecute el código anterior y mostrará el siguiente resultado:

7. Altura y ancho de la mesa

El alto y el ancho de la tabla se pueden establecer mediante el uso de atributos de ancho y alto.

Ejemplo



HTML Table Tag Usage



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

El código anterior mostrará la siguiente salida:

8. Celdas de tabla de estilo

Ejemplo



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Nombre	País
Dhoni	India
David Miller	Sudáfrica
Joe Root	Inglaterra

Ejecute el código anterior, tendrá el siguiente resultado:

8. Tablas anidadas

Puede usar una tabla dentro de otra tabla que se llama tabla anidada.

Consideremos el siguiente ejemplo para la tabla anidada:

Ejemplo



HTML Table Tag Usage



Nombre País Dhoni India David Miller Sudáfrica Joe Root Inglaterra

El código anterior mostrará la siguiente salida:

Atributos de la tabla

• alinear: este atributo proporciona la alineación del contenido dentro de un elemento.
• bgcolor: este atributo especifica el color de fondo de la tabla.
• borde: este atributo especifica el borde de las celdas de la tabla.
• cellpadding: este atributo muestra el relleno entre las celdas de la tabla y el contenido de la tabla.
• espaciado de celdas: este atributo muestra el espacio entre las celdas de la tabla.
• frame: especifica qué partes de los bordes exteriores son visibles.
• reglas: Esto especifica qué partes de los bordes interiores son visibles.
• ordenable: este atributo informa que la tabla es ordenable.
• resumen: proporciona qué tipo de contenido de tabla está presente.
• ancho: este atributo indica el ancho de la tabla.
• height: este atributo especifica la altura de la tabla.

Conclusión

Hasta ahora, hemos estudiado los diferentes tipos de etiquetas de tabla en HTML. Los ejemplos han mostrado el uso del estilo de la tabla, anidando una tabla dentro de otra tabla, configurando el alto y el ancho de la tabla, agregando espaciado y relleno para las celdas de la tabla, aplicando el color de fondo para la tabla y muchos más.

Artículos recomendados

Esta es una guía para las etiquetas de tabla HTML. Aquí discutimos los ejemplos de etiquetas de tabla HTML con sintaxis y atributos de la tabla. También puede echar un vistazo a los siguientes artículos para obtener más información:

1. Elementos de formulario HTML
2. Crear tablas en HTML
3. Etiquetas de imagen HTML
4. ¿Qué es HTML?
5. Marcos HTML
6. Bloques HTML
7. Establecer un color de fondo en HTML con ejemplo