Como hacer una pagina web con tablas en html

tabla html en tabla

¡Ack! – ¿Cómo utilizar los estándares web para organizar montones de datos? La sola idea de usar toneladas de elementos anidados para poner todos tus datos en pequeñas filas y cajas puede poner tu cerebro en modo de pánico, pero hay una solución – ¡Tablas HTML al rescate!

En el diseño web, las tablas son una buena manera de organizar los datos en forma tabular. Las ves todo el tiempo en los sitios web, ya sea para ofrecer un resumen o una comparación de los resultados de las elecciones políticas, estadísticas deportivas, comparaciones de precios, gráficos de tallas u otros datos.

En la Era Jurásica de Internet, antes de que se popularizara el CSS como método para separar la presentación del HTML de la estructura, las tablas se utilizaban como forma de maquetar las páginas web: para crear columnas, cajas y áreas generales en las que organizar el contenido de la página. Esta es, por supuesto, la forma equivocada de hacerlo; el uso de tablas para el diseño de la página resulta en páginas hinchadas y desordenadas con toneladas de tablas anidadas que producen tamaños de archivo más grandes, son difíciles de codificar inicialmente y casi imposibles de mantener después. Hoy en día, sólo deberías usar tablas para presentar datos tabulares y usar CSS para controlar el diseño de la página.

tablas html

Puedes crear una tabla utilizando el elemento <table>. Dentro del elemento <table>, puede utilizar los elementos <tr> para crear filas, y para crear columnas dentro de una fila puede utilizar los elementos <td>. También puedes definir una celda como cabecera de un grupo de celdas de la tabla utilizando el elemento <th>.

Las tablas no tienen bordes por defecto. Puedes utilizar la propiedad CSS border para añadir bordes a las tablas. Además, las celdas de la tabla tienen el tamaño justo para que quepa el contenido por defecto. Para añadir más espacio alrededor del contenido en las celdas de la tabla puedes utilizar la propiedad CSS padding.

Nota: La mayoría de los atributos del elemento <table> como border, cellpadding, cellspacing, width, align, etc. para estilizar la apariencia de las tablas en versiones anteriores han sido eliminados en HTML5, así que evita usarlos. En su lugar, utilice CSS para estilizar las tablas HTML.

ejemplo de tabla html

En los primeros tiempos de la web era habitual utilizar tablas como dispositivo de diseño. Antes de la llegada de los navegadores modernos basados en estándares, ésta era la forma más fácil de asegurarse de que los elementos de la página se dispusieran correctamente en la pantalla.

El elemento <tfoot> identifica uno o más elementos <tr> como contenido resumido de las columnas de una tabla. El elemento <tfoot> debe ser el descendiente directo de un elemento <table>. En HTML5, <tfoot> puede colocarse antes o después de los elementos <tbody> y <tr>, pero debe aparecer después de cualquier elemento <caption>, <colgroup> y <thead>.

El elemento <tbody> debe ser descendiente directo de un elemento <table> y se utiliza para identificar los elementos <tr> que componen el cuerpo de la tabla. El elemento <tbody> debe ir siempre después de un elemento <thead> y puede ir antes o después de un elemento <tfoot>.

El elemento <tr> se utiliza para agrupar valores <th> o <td> en una única fila de valores de encabezamiento o datos de la tabla. El elemento <tr> puede ser hijo directo de un elemento <table> o estar anidado dentro de un elemento padre <thead>, <tfoot> o <tbody>.

estilo de tabla html

Este artículo le ayudará a empezar a utilizar las tablas HTML, cubriendo los aspectos más básicos, como las filas y las celdas, los encabezados, cómo hacer que las celdas abarquen varias columnas y filas, y cómo agrupar todas las celdas de una columna con fines de estilo.

¿Qué es una tabla? Una tabla es un conjunto estructurado de datos formado por filas y columnas (datos tabulares). Una tabla permite buscar rápida y fácilmente valores que indiquen algún tipo de conexión entre diferentes tipos de datos, por ejemplo, una persona y su edad, o un día de la semana, o el horario de una piscina local.

Por eso, no es de extrañar que los creadores de HTML hayan creado un medio para estructurar y presentar datos tabulares en la web. La información se interpreta fácilmente haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Mira la siguiente tabla, por ejemplo, y encuentra un gigante gaseoso joviano con 62 lunas. Puede encontrar la respuesta asociando los encabezados de fila y columna correspondientes.

Cuando se implementan correctamente, las tablas HTML se manejan bien con herramientas de accesibilidad como los lectores de pantalla, por lo que una tabla HTML exitosa debería mejorar la experiencia de los usuarios videntes y discapacitados visuales por igual.Estilo de la tablaTambién puedes echar un vistazo al ejemplo en vivo en GitHub. Una cosa que notarás es que la tabla parece un poco más legible allí – esto es porque la tabla que ves arriba en esta página tiene un estilo mínimo, mientras que la versión de GitHub tiene un CSS más significativo aplicado.