HTML Table Sizes

Tables can stretch across a content column or stay compact like a price card. After borders taught you how to draw the grid lines, this lesson sizes the box: use CSS (width, max-width, padding, optional column widths) so the table fits both the data and the screen. Presentation stays in CSS; table / tr / th / td still carry the meaning. If borders made the grid visible, sizing makes the grid comfortable.

What “size” means for a table

Sizing is not one number. The whole table has a width relative to its parent. Cells need padding so text breathes. Columns can share space evenly or favor a wider label column. On phones, a table that insists on 1200px forces awkward horizontal scrolling even when the data is only two short columns. Flexible recipes — often width: 100% with a sensible max-width — keep simple grids readable without pretending CSS can replace honest th/td structure from the Tables lesson.

Direct answer

Set width on the table (for example 100%) and optionally cap it with max-width (for example 480px or 640px). Hint column width on th/td when one column should take more space. Prefer percentages and max-width over enormous fixed pixel widths that overflow phones. Keep using border-collapse and padding from the borders lesson so size and lines work together. Scope rules with a class so one demo does not resize every table on the page.

Flexible width with a column hint

A common beginner pattern: the table fills its parent up to a maximum, borders stay collapsed, and the first column gets a larger share for labels.

Reading the flexible sample

• width: 100% lets the table use the available content width
• max-width: 480px stops it from becoming a giant strip on wide monitors
• border-collapse: collapse keeps sizing and borders from fighting each other
• padding: 8px gives each cell readable inner space
• :first-child { width: 60%; } hints that the plan name column should be wider than the price column
• Class scoping (.prices) avoids resizing every table on the page by accident
• If the first column does not grow, confirm the selector matches your markup and that cell text is not an unbreakable long token

Compact max-width table

Sometimes you want a small comparison card that never stretches full-bleed. A lower max-width (and still width: 100% inside that cap) keeps the grid tidy on both desktop and mobile. This is the same flexible idea with a stricter ceiling — useful for side notes, mini stock lists, or a widget inside a narrow column.

Reading the compact sample

• Same flexible idea, tighter max-width for a card-like footprint
• Horizontal padding (6px 10px) can differ from vertical padding for comfort
• text-align: left is optional presentation — useful when numbers and words share a small grid
• Still no layout-table nesting; you are only sizing a real data table
• Resize the browser: the table should shrink with the column until it hits content limits, not force a huge scrollbar by default

Fixed pixels versus flexible habits

Fixed widths such as width: 1200px on the table can look fine on a large monitor and painful on a phone. If you need a minimum for printing or a dense dashboard, prefer starting from fluid width plus max-width, or plan a responsive strategy later (scroll wrappers, stacked cards on small screens). For this course’s beginner tables, flexible sizing is the default good habit. Column width percentages are hints — browsers may adjust when content is extremely long or unbreakable, so keep cell text reasonably short while learning. When a column refuses to shrink, check for long URLs or words without spaces before blaming max-width.

Padding, columns, and collapse together

Size work sits beside the borders lesson. Without padding, dense cells feel cramped even at a perfect outer width. Without collapse, width experiments can look thicker or uneven because separate borders consume extra space. Optional column hints (width on :first-child cells, or on specific th) guide the browser when labels need more room than values. Do not use sizing CSS as an excuse to drop th headers or to rebuild the whole page as nested layout tables — that conflict was already settled in the Tables session.

Practice in your editor

1. Give your practice table width: 100% and a max-width (try 480px).
2. Add padding to th/td (reuse border styles if you still have them).
3. Resize the browser — confirm a simple two-column table does not force endless horizontal scroll.
4. Optionally set a wider first column with :first-child or a class.
5. Duplicate the table with a tighter max-width like 320px and compare the footprint.
6. Temporarily set width: 1200px, note the mobile pain, then remove it.
7. Toggle border-collapse while widths are set and watch how the outer size feel changes.
8. Write one sentence under the table stating the max width you chose and why.

Easy mistakes

• Fixed width: 1200px tables that break small screens
• No padding, so dense hard-to-read cells
• Fighting borders and widths without border-collapse
• Global table { width: ... } that resizes every demo on the page
• Expecting column width hints to override extremely long unbreakable strings
• Using table sizing to fake full-page layout columns again
• Forgetting max-width so width: 100% alone stretches a tiny three-cell table across an ultrawide monitor

Summary

• Size tables with CSS width and max-width
• Use padding for readable cells
• Prefer flexible layouts for small screens
• Column width hints are optional and scoped with classes when possible
• Keep borders collapsed so size and lines cooperate
• Structure stays in HTML; dimensions stay in CSS
• Next header-focused lessons build on a grid that already fits the viewport comfortably