Definición destacada
¿Como funciona el comando en HTML5: 'table'?
Última modificación: 2024-06-18
Descripción del Elemento <table> en HTML5
El elemento <table> en HTML5 se utiliza para crear tablas en un documento web. Estas tablas permiten la organización de datos en filas y columnas, haciendo que la información sea más fácil de entender y visualizar. La estructura básica de una tabla incluye filas (<tr>), cabeceras (<th>) y celdas de datos (<td>).
Atributos del Elemento <table>
-
align(No recomendado en HTML5): Define la alineación horizontal de la tabla. Valores típicos son "left", "center" y "right". -
bgcolor(Obsoleto en HTML5): Establece el color de fondo de la tabla. -
border: Define el tamaño del borde de la tabla en píxeles. Un valor "0" indica que la tabla no tendrá borde visible. -
cellpadding: Especifica el espacio en píxeles entre el contenido de una celda y su borde. -
cellspacing: Define el espacio en píxeles entre las celdas. -
frame(Obsoleto en HTML5): Indica qué lados de la tabla tendrán bordes. Los valores pueden ser "void", "above", "below", "hsides", "lhs", "rhs", "vsides", "box" y "border". -
rules(Obsoleto en HTML5): Específica qué reglas internas de la tabla serán visibles. Puede ser "none", "groups", "rows", "cols" y "all". -
summary(Obsoleto en HTML5): Atributo utilizado para proporcionar un resumen de la tabla para navegadores especializados (por ejemplo, lectores de pantalla). -
width(No recomendado en HTML5): Define el ancho de la tabla en píxeles o porcentaje. -
height(No recomendado en HTML5): Define la altura de la tabla en píxeles o porcentaje. -
class: Permite asignar una o más clases CSS a la tabla. -
id: Proporciona un identificador único para la tabla. -
style: Atributo de estilo en línea para aplicar CSS directamente a la tabla. -
lang: Define el idioma del contenido de la tabla. -
*`data-`**: Atributos de datos personalizados que permiten almacenar información privada en la tabla.
Muchos de estos atributos, especialmente los que controlan el estilo y la presentación, se consideran obsoletos en HTML5 y han sido reemplazados por CSS para mantener la separación de contenido y presentación.
Uso de <table> en HTML5 con Ejemplos Sencillos
Ejemplo Básico de una Tabla
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Tabla</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<caption>Ejemplo de Tabla</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>28</td>
<td>España</td>
</tr>
<tr>
<td>Maria</td>
<td>22</td>
<td>Argentina</td>
</tr>
<tr>
<td>Carlos</td>
<td>35</td>
<td>Chile</td>
</tr>
</tbody>
</table>
</body>
</html>Descripción del Ejemplo
-
Estructura General del HTML: La tabla está definida dentro del cuerpo (
<body>) del documento HTML. -
Elementos de la Tabla:
<table>: Contenedor principal de la tabla.<caption>: Proporciona un título para la tabla.<thead>: Define la sección del encabezado de la tabla.<tr>: Define una fila de la tabla.<th>: Define una celda de encabezado de la tabla y, por defecto, se muestra en negrita.<tbody>: Define el cuerpo principal de la tabla.<td>: Define una celda de datos en la tabla.
-
Estilos Aplicados con CSS:
table { width: 100%; border-collapse: collapse; }: Define que la tabla debe tener un ancho del 100% del contenedor padre y que sus bordes deben colapsar en un solo borde.th, td { border: 1px solid black; padding: 10px; text-align: left; }: Aplica un borde negro de 1 píxel, un relleno interno de 10 píxeles y alinea el texto a la izquierda para cada celda y encabezado.th { background-color: #f2f2f2; }: Aplica un color de fondo claro a las celdas de encabezado.
Este ejemplo básico muestra cómo crear una tabla en HTML5 con un título, encabezados, y cuerpos separados, y cómo se puede estilizar utilizando CSS.