Table Sizes

HTML data structures

Table sizing decides whether data stays readable on real screens.

A table can look perfect on a large monitor and break badly on a phone. Sizing is where table HTML meets responsive CSS.

Modern projects usually avoid width and height attributes on table cells. Use CSS for layout decisions and keep HTML focused on data.

The goal is not to force every table into every viewport. Sometimes the best responsive table is a horizontally scrollable table with clear column widths.

width

Usually controlled with CSS, not HTML attributes.

table-layout

Can make columns predictable when data is consistent.

min-width

Keeps dense data readable inside a scroll wrapper.

white-space

Controls whether cell content wraps or stays on one line.

Syntax and structure

Wrap wide tables and size them with CSS.

A table wrapper can allow horizontal scroll while the table keeps a sensible minimum width.

Responsive table wrapper

<div class="table-scroll">
  <table class="data-table">
    <caption>Exam planning</caption>
    <tr><th scope="col">Student</th><th scope="col">Date</th><th scope="col">Status</th></tr>
    <tr><td>Sam</td><td>12 June</td><td>Ready</td></tr>
  </table>
</div>

<style>
  .table-scroll { overflow-x: auto; }
  .data-table { min-width: 640px; }
</style>

Fixed HTML widths everywhere

<table width="1200">
  <tr>
    <td width="400">Student</td>
    <td width="400">Date</td>
    <td width="400">Status</td>
  </tr>
</table>

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Do not fight small screens

Dense data often needs horizontal scroll or a different summary view.

Use CSS sizing

Column width, min-width and wrapping belong in CSS.

Set stable columns when needed

table-layout: fixed can prevent columns from jumping around.

Protect important text

Do not squeeze labels until they become unreadable.

Test real data

Short demo values rarely reveal sizing problems.

Keep actions reachable

If a table has buttons, make sure they remain usable on mobile.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because data tables fail quietly. The markup can be valid while the user still cannot read or compare the information.

Accessibility

Horizontal scrolling should be obvious and keyboard accessible. Do not hide important columns without another way to access them.

Production note

Use table wrappers, sticky headers or simplified card views for dense operational tables. Choose based on the task, not only on viewport width.

SEO note

Readable tables help users compare information. Hidden or broken table content can reduce the usefulness of a page.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change the min-width and watch how the table responds.
Add table-layout: fixed and compare column behavior.
Prevent one column from wrapping with white-space: nowrap.

Practice assignment

Do this before moving to the next lesson.

Build a table that is wider than a phone screen.
Add a scroll wrapper and a min-width.
Explain which columns must stay readable.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #f7f7f4;
}

caption {
  caption-side: top;
  margin-bottom: 12px;
  color: #8cffc1;
  font-weight: 900;
  text-align: left;
}

th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #8cffc1;
  font-weight: 900;
}

ul, ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  color: #cfd8e6;
}

li::marker {
  color: #8cffc1;
  font-weight: 900;
}

dl {
  margin: 0;
}

.table-scroll { overflow-x: auto; }
.wide-table { min-width: 760px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?