Tamaños de tabla HTML

Las tablas pueden estirarse por una columna de contenido o quedar compactas como una tarjeta de precios. Tras los bordes que dibujaron la cuadrícula, esta lección dimensiona la caja: usa CSS (width, max-width, padding, anchos de columna opcionales) para que la tabla encaje con los datos y la pantalla. La presentación queda en CSS; table / tr / th / td siguen llevando el significado. Si los bordes hicieron visible la cuadrícula, el tamaño la hace cómoda.

Qué significa «tamaño» para una tabla

El tamaño no es un solo número. Toda la tabla tiene un ancho relativo a su padre. Las celdas necesitan padding para que el texto respire. Las columnas pueden compartir el espacio por igual o favorecer una columna de etiquetas más ancha. En el móvil, una tabla que insiste en 1200px fuerza un scroll horizontal incómodo incluso con solo dos columnas cortas. Recetas flexibles — a menudo width: 100% con un max-width sensato — mantienen legibles las cuadrículas simples sin fingir que CSS sustituye la estructura honesta th/td.

Respuesta directa

Pon width en la table (por ejemplo 100%) y opcionalmente topea con max-width (por ejemplo 480px o 640px). Pista el ancho de columna en th/td cuando una columna deba ocupar más. Prefiere porcentajes y max-width frente a anchos fijos enormes en píxeles que desbordan el móvil. Sigue usando border-collapse y padding de la lección de bordes para que tamaño y líneas cooperen. Acota las reglas con una class para que una demo no redimensione todas las tablas de la página.

Ancho flexible con pista de columna

Un patrón habitual de principiante: la tabla llena su padre hasta un máximo, los bordes siguen collapsed y la primera columna obtiene más proporción para las etiquetas.

Lectura del ejemplo flexible

• width: 100% deja que la tabla use el ancho de contenido disponible
• max-width: 480px evita que se convierta en una franja gigante en monitores anchos
• border-collapse: collapse evita que tamaño y bordes peleen
• padding: 8px da a cada celda espacio interior legible
• :first-child { width: 60%; } sugiere que la columna del plan sea más ancha que la del precio
• El scope por class (.prices) evita redimensionar por accidente cada tabla de la página

Tabla compacta con max-width

A veces quieres una tarjeta de comparación pequeña que nunca se estire a full-bleed. Un max-width más bajo (y aún width: 100% dentro de ese tope) mantiene la cuadrícula ordenada en escritorio y móvil.

Lectura del ejemplo compacto

• La misma idea flexible, con max-width más ajustado para una huella tipo tarjeta
• El padding horizontal (6px 10px) puede diferir del vertical por comodidad
• text-align: left es presentación opcional — útil cuando números y palabras comparten una cuadrícula pequeña
• Sigue sin anidar tablas de layout; solo dimensionas una tabla de datos real
• Redimensiona el navegador: la tabla debería encogerse con la columna hasta los límites del contenido, no forzar una barra de scroll enorme por defecto

Píxeles fijos frente a hábitos flexibles

Anchos fijos como width: 1200px pueden verse bien en un monitor grande y doler en el móvil. Si necesitas un mínimo para impresión o un dashboard denso, empieza por un width fluido más max-width, o planifica después una estrategia responsive. Para las tablas de principiante de este curso, el tamaño flexible es el buen hábito por defecto. Los porcentajes de width de columna son pistas — el navegador puede ajustar cuando el contenido es extremadamente largo o irrompible, así que mantén el texto de celda razonablemente corto al aprender. Cuando una columna se niega a encogerse, revisa URLs largas o palabras sin espacios antes de culpar a max-width.

Padding, columnas y collapse juntos

El trabajo de tamaño se sienta junto a la lección de bordes. Sin padding, las celdas densas se sienten apretadas incluso con un ancho exterior perfecto. Sin collapse, los experimentos de ancho pueden verse más gruesos o irregulares porque los bordes separados consumen espacio extra. Las pistas opcionales de columna (width en celdas :first-child, o en un th concreto) guían al navegador cuando las etiquetas necesitan más sitio que los valores. No uses el CSS de tamaño como excusa para soltar cabeceras th o reconstruir la página como tablas de layout anidadas — ese conflicto ya se resolvió en la sesión Tables.

Practica en tu editor

1. Da a tu tabla de práctica width: 100% y un max-width (prueba 480px).
2. Añade padding a th/td (reutiliza estilos de borde si aún los tienes).
3. Redimensiona el navegador — confirma que una tabla simple de dos columnas no fuerza un scroll horizontal interminable.
4. Opcionalmente haz más ancha la primera columna con :first-child o una class.
5. Duplica la tabla con un max-width más ajustado como 320px y compara la huella.
6. Pon temporalmente width: 1200px, nota el dolor en móvil y quítalo.
7. Alterna border-collapse con anchos puestos y observa cómo cambia la sensación de tamaño exterior.
8. Escribe una frase bajo la tabla indicando el max-width elegido y por qué.

Errores fáciles

• Tablas fijas width: 1200px que rompen pantallas pequeñas
• Sin padding, celdas densas difíciles de leer
• Pelear bordes y anchos sin border-collapse
• table { width: ... } global que redimensiona cada demo de la página
• Esperar que las pistas de width de columna anulen cadenas larguísimas irrompibles
• Usar el tamaño de tabla para fingir otra vez columnas de layout a página completa
• Olvidar max-width de modo que width: 100% solo estire una tablita de tres celdas por un ultrawide

Resumen

• Dimensiona tablas con CSS width y max-width
• Usa padding para celdas legibles
• Prefiere layouts flexibles en pantallas pequeñas
• Las pistas de ancho de columna son opcionales y acotadas con classes cuando sea posible
• Mantén los bordes collapsed para que tamaño y líneas cooperen
• La estructura sigue en HTML; las dimensiones en CSS
• Las siguientes lecciones centradas en cabeceras construyen sobre una cuadrícula que ya encaja cómoda en el viewport