Hay diferentes formas de representar datos e información, como gráficos, gráficos, pictografías o formas tabulares. La tabla organiza datos en filas y columnas, haciendo que los datos sean más legibles y claros. Los datos tabulados también ahorra tiempo y espacio. Para hacer tablas en HTML, usamos
etiquetar con
etiqueta,
Etiqueta para encender, y
para datos de tabla.
Los resultados de aprendizaje de este artículo serán:
Que es html
Etiqueta?
Cómo crear una tabla en HTML?
¿Cuáles son los atributos de
Etiqueta?
Cómo crear mesa de encabezado vertical?
Que es html
Etiqueta?
El html
la etiqueta especifica una fila en una tabla, el
La etiqueta se usa para el encabezado de la mesa, y
La etiqueta es para datos de la tabla.
Sintaxis
…
La etiqueta HTML TR tiene una etiqueta inicial
y una etiqueta de cierre
.
Cómo crear una tabla en HTML?
El siguiente ejemplo demostrará cómo podemos crear una tabla en HTML. Para hacerlo, primero, agregue un
etiqueta y luego especifique un título usando la etiqueta:
Información de los estudiantes
Dentro del elemento de tabla, agregue
Etiqueta después del subtítulo. La primera fila contendrá el encabezado de cada columna. Para esto
Se utilizan etiquetas:
Rollo no
Nombre del estudiante
DoB
Después de crear tres columnas, agregemos datos a las columnas. Los datos se agregarán a cada fila en correspondencia a los encabezados en la siguiente fila. Entonces, para agregar datos, el
Se utiliza la etiqueta:
1
John
23-05-1997
Del mismo modo, cree dos filas más como se muestra en el fragmento de código a continuación:
2
Guillermo
02-9-1995
3
Margarita
12-03-1998
La salida correspondiente del código mencionado anteriormente se verá así:
Aplicación de estilos a la mesa con CSS
En esta sección, aplicaremos algunas propiedades de estilo a la tabla que hemos creado anteriormente.
Etiqueta de subtítulos de estilo
subtítulo tamaño de fuente: 30px; relleno: 7px; Decoración de texto: 2px subrayado #182747;
La etiqueta de título utilizada en el archivo HTML tendrá las propiedades enumeradas a continuación:
"tamaño de fuenteLa propiedad establece el tamaño de la fuente.
"rellenoLa propiedad se utiliza para aplicar espacio alrededor del contenido del elemento.
"decoración de texto"La propiedad aplica la decoración al texto.
Estilo
,
,
Etiquetas tabla, th, td Color de fondo: #D8D9CF; borde: 1px sólido #5d6462; tamaño de fuente: 25px;
El
,
, y
Las etiquetas se diseñan con las propiedades CSS que se describen a continuación:
"color de fondoLa propiedad se utiliza para dar color de fondo a la mesa.
"borde"La propiedad establece un borde alrededor de la mesa que tiene un ancho, tipo de línea y color.
"tamaño de fuenteLa propiedad se utiliza para establecer el tamaño de la fuente como 25px.
Elemento de mesa de estilo
mesa margen: auto; Ancho: 60%; Altura: 150px;
Aquí:
"margen"Propiedad con valor"auto"Coloca la mesa en el espacio central igual de cada lado.
"anchoLa propiedad se utiliza para establecer el ancho de la tabla.
"altura"La propiedad establece la altura de la mesa.
Producción
¿Cuáles son los atributos de
Etiqueta?
Hay muchos atributos asociados con el HTML
etiqueta, como:
espiga
colspan
Atributo: Rowspan
Este atributo contiene un valor no negativo que especifica el número de filas que se extiende la celda. Su valor predeterminado es 1.
Ejemplo: Cómo agregar el atributo de SowsPan a una fila de tabla? Entonces, del ejemplo anterior, hemos tomado la segunda fila. Agregue el atributo ROWSPAN con el valor 2 a los datos de la tercera tabla:
2
Guillermo
02-9-1995
Se puede ver en la imagen a continuación, los terceros datos de la segunda fila han ocupado un espacio de dos filas:
Atributo: Colspan
Este atributo contiene un valor no negativo que especifica el número de columnas que extiende la celda. El valor predeterminado del colspan es 1. Más de 1000 valores se establecerán como predeterminado porque se consideran incorrectos.
Ejemplo: cómo agregar el atributo Colspan a la fila de la tabla? En el archivo HTML, el
La etiqueta se agrega debajo de la etiqueta y se proporciona con el atributo colspan con un valor de 3:
Escuela Linuxhint
De la imagen a continuación, se puede ver que el encabezado de la tabla ha tomado espacio para tres columnas:
Cómo crear mesa de encabezado vertical?
En html, agregue tres
etiquetas. Dentro de cada una, se colocan otras etiquetas, como
, entonces
etiquetas. De tal manera, se puede crear una mesa con encabezados verticales:
Nombre
Tomás
Andrés
Ciudad
Estados Unidos
Porcelana
Profesión
Instructor
Doctor
Guarde el archivo HTML y abra el archivo en un navegador web:
Se puede observar que el encabezado de la tabla se coloca verticalmente.
Conclusión
Para crear una tabla para nuestra aplicación web, HTML nos proporciona diferentes etiquetas para tablas, filas y columnas como
,
, y
, respectivamente. Entonces, este blog ha explicado el HTML
etiqueta, su atributo y el método para crear una tabla de encabezado simple y vertical.
