TABLAS EN HMTL
En este presente pagina hablaremos sobre las tablas en HTML, analizaremos su estructura y sus propiedades. nos enfocaremos en las tablas que utilizamos al realizar documentos, sistemas, aplicaciones de paginas web y etc.
indice del tema
CONCEPTO DE TABLAS EN HTML
Una tabla es una forma de organizar datos en filas y columnas, a la agrupación de la tabla se le conoce con la etiqueta <table>, para crear una fila es la etiqueta, <tr> y para crear una columna es la etiqueta <td>. Tengan en cuenta una tabla es una agrupación de filas y columnas.
Ejemplo de tablas en HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla</title>
</head>
<style type="text/css">
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
color: black;
}
</style>
<body>
<table style="width: 100%; background-color: aqua">
<tr>
<td>fila 1 columna 1</td>
<td>fila 1 columna 2</td>
<td>fila 1 columna 3</td>
</tr>
<tr>
<td>fila 2 columna 1</td>
<td>fila 2 columna 2</td>
<td>fila 2 columna 3</td>
</tr>
</table>
</body>
</html>
CELDA DE ENCABEZADO
Ya teniendo conocimientos básicos sobre una tabla, nos toca hacer tablas con mas utilidades.
Una celda de encabezado, es una manera de agrupar celdas por clases o tipos, de una manera ordenada y podemos agrupar poniendo encabezado por fila o columna.
Su representación de una celda de encabezado es con la etiqueta <th>, esto es ubicado en la primera fila de la tabla, es decir ubicados encima de las celdas comunes.
Para major entendimiento les dejo un ejemplo con celda de encabezado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla</title>
</head>
<style type="text/css">
table,tr,th ,td {
border: 1px solid black;
border-collapse: collapse;
}
table {
color: black;
}
th{
text-align: left;
}
</style>
<body>
<table style="width: 100%; background-color: aqua">
<tr>
<th>encabezado 1</th>
<th>encabezado 2</th>
<th>encabezado 3</th>
</tr>
<tr>
<td>fila 1 columna 1</td>
<td>fila 1 columna 2</td>
<td>fila 1 columna 3</td>
</tr>
<tr>
<td>fila 2 columna 1</td>
<td>fila 2 columna 2</td>
<td>fila 2 columna 3</td>
</tr>
</table>
</body>
</html>
EL ATRIBUTO SCOPE
El atributo scope nos ayuda a definir si una celda de encabezado <th> es un encabezado para una columna, para una fila o un grupo de columnas y filas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla</title>
</head>
<style type="text/css">
table,tr,th ,td {
border: 1px solid black;
border-collapse: collapse;
}
table {
color: black;
}
th{
text-align: left;
}
</style>
<body>
<table style="width: 100%; background-color: aqua">
<tr>
<th scope="col">encabezado 1</th>
<th scope="col">encabezado 2</th>
<th scope="col">encabezado 3</th>
</tr>
<tr>
<td>fila 1 columna 1</td>
<td>fila 1 columna 2</td>
<td>fila 1 columna 3</td>
</tr>
<tr>
<td>fila 2 columna 1</td>
<td>fila 2 columna 2</td>
<td>fila 2 columna 3</td>
</tr>
</table>
</body>
</html>
En nuestro caso estamos indicando con el valor "col" el elemento <th> es el encabezado de una columna. es decir el "encabezado 1" es encabezado "de columna 1", "encabezado 2" es encabezado de "columna 2" y el "encabezado 3" es encabezado de "columna 3".
EL ATRIBUTO COLSPAN
El atributo colspan define el numero de columnas que un encabezado <th> abarcará en el caso el "encabezado 1" del ejemplo es de 2 columnas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla</title>
</head>
<style type="text/css">
table,tr,th ,td {
border: 1px solid black;
border-collapse: collapse;
}
table {
color: black;
}
th{
text-align: left;
}
</style>
<body>
<table style="width: 100%; background-color: aqua">
<tr>
<th scope="col" colspan="2">encabezado 1</th>
<th scope="col">encabezado 2</th>
<th scope="col">encabezado 3</th>
</tr>
<tr>
<td>lunes</td>
<td>martes</td>
<td>miercoles</td>
<td>jueves</td>
</tr>
<tr>
<td>4 horas</td>
<td>5 horas</td>
<td>3 horas</td>
<td>2 horas</td>
</tr>
</table>
</body>
</html>
En este caso el "encabezado 1", contiene dos columnas como se ve en el imagen superior y con los de mas encabezados no hay ningún problema, por que solo contienen una columna.
Deja una respuesta