HTML Table Sizes: Width, Height, Columns & Responsive Tables

HTML Table Sizes

HTML tables are used to display information in rows and columns. They are useful for presenting data such as prices, marks, schedules, product details, employee records, statistics, and comparison charts.

When creating an HTML table, controlling its size is important. A well-sized table is easier to read and can make a webpage look cleaner and more professional.

HTML table size can refer to several things, including:

• Table width
• Table height
• Column width
• Row height
• Cell width and height
• Minimum and maximum dimensions
• Responsive table behavior
• Spacing inside and between cells

Modern HTML generally uses CSS to control table dimensions. Older HTML attributes such as width and height may still be seen in older code, but CSS is the recommended approach.

What Is HTML Table Size?

HTML table size describes the amount of space a table occupies on a webpage.

For example, you can create a table that takes up 50% of its parent container:

<table style="width: 50%;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
</table>

You can also give the table a fixed width:

<table style="width: 600px;">

The width determines how much horizontal space the table uses. Height determines how much vertical space it occupies.

However, table height works differently from table width. A table normally grows vertically based on its content.

How to Set HTML Table Width

The most common way to set a table’s width is with the CSS width property.

Example: Fixed Table Width

<table style="width: 600px;">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>₹50,000</td>
  </tr>
</table>

Here, the table has a width of approximately 600 pixels.

The px unit is a fixed CSS unit. It can be useful when you need a specific layout, but fixed widths may not work well on small screens.

Using Percentage Width

A percentage is often better for responsive layouts.

<table style="width: 100%;">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>India</td>
  </tr>
</table>

The table will try to occupy 100% of the available width of its containing element.

You can also use:

table {
  width: 80%;
}

This makes the table use 80% of its parent container’s available width.

Fixed Width vs Percentage Width

Both fixed and percentage widths have their uses.

For most modern websites, percentage widths combined with max-width are often more flexible.

How to Set HTML Table Height

You can use CSS to specify a table’s height:

<table style="height: 300px;">

However, setting a fixed height on a table is usually less useful than setting its width.

Tables naturally expand vertically when more content is added.

For example:

<table style="height: 300px;">
  <tr>
    <td>Content</td>
  </tr>
</table>

The browser may not behave exactly as expected if the content requires more space.

For this reason, avoid forcing a table to have a fixed height unless you have a specific design requirement.

Setting Column Width

You can control individual column widths using CSS.

<table style="width: 100%;">
  <tr>
    <th style="width: 70%;">Product</th>
    <th style="width: 30%;">Price</th>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>₹20,000</td>
  </tr>
</table>

In this example, the first column is intended to take about 70% of the table width and the second column about 30%.

Using the col Element

HTML provides the <col> element for applying styles to columns.

Example:

<table>
  <colgroup>
    <col style="width: 70%;">
    <col style="width: 30%;">
  </colgroup>

  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>

  <tr>
    <td>Mobile Phone</td>
    <td>₹20,000</td>
  </tr>
</table>

This can be useful when you want to define column dimensions separately from the table’s content.

Setting Row Height

You can set the height of a table row using CSS.

<table>
  <tr style="height: 50px;">
    <td>Apple</td>
    <td>₹100</td>
  </tr>
</table>

The CSS height property provides a preferred height, but the browser may increase the row if the content needs more space.

This is important because table rows should normally be allowed to accommodate their content.

Setting Cell Width and Height

You can also control individual table cells.

<table>
  <tr>
    <td style="width: 200px; height: 60px;">
      Example
    </td>
  </tr>
</table>

However, defining dimensions on every individual cell can make your CSS difficult to maintain.

It is generally better to style the table, columns, or reusable CSS classes.

HTML Table Size Using CSS

A cleaner approach is to separate HTML structure from CSS styling.

<style>
  table {
    width: 100%;
  }

  th, td {
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anita</td>
    <td>28</td>
  </tr>
</table>

This approach is easier to maintain than putting styles directly into every HTML element.

Using the CSS width Property

The width property controls the preferred width of an element.

Example:

table {
  width: 800px;
}

Or:

table {
  width: 100%;
}

You can also use:

table {
  width: 75%;
}

The best value depends on your page design.

Using max-width

max-width is useful for preventing a table from becoming unnecessarily wide.

table {
  width: 100%;
  max-width: 1000px;
}

This means the table can use available space but should not grow beyond 1000 pixels.

This is particularly useful on large desktop screens.

Using min-width

You can also specify a minimum width:

table {
  min-width: 500px;
}

This tells the browser that the table should not normally become narrower than 500 pixels.

Be careful with min-width on mobile devices because a wide table may require horizontal scrolling.

Using auto for Table Size

The auto value allows the browser to determine dimensions based on the available space and content.

table {
  width: auto;
}

This can be useful for smaller tables where you do not need the table to fill the entire container.

The CSS table-layout Property

The table-layout property controls how a browser calculates column widths.

There are two commonly used values:

• auto
• fixed

Automatic Table Layout

table {
  width: 100%;
  table-layout: auto;
}

With auto, the browser considers the content when determining column widths.

This is the default behavior in many situations.

Fixed Table Layout

table {
  width: 100%;
  table-layout: fixed;
}

With fixed, the browser can calculate the column layout more quickly and consistently based largely on the table width and column definitions.

For example:

<style>
  table {
    width: 100%;
    table-layout: fixed;
  }

  th, td {
    padding: 10px;
  }
</style>

Fixed layout can be useful when you want predictable column widths.

HTML Table Size and Cell Padding

Cell padding affects the apparent size of a table.

For example:

th, td {
  padding: 15px;
}

Increasing padding gives text more breathing room.

Compare:

th, td {
  padding: 5px;
}

with:

th, td {
  padding: 15px;
}

The second version creates larger cells and therefore increases the table’s overall size.

Good padding improves readability, especially on tables containing a lot of information.

HTML Table Size and Borders

Borders can also affect the visual appearance of table dimensions.

Example:

table, th, td {
  border: 1px solid black;
}

A cleaner modern style can use:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
}

border-collapse: collapse combines adjacent table borders and often creates a cleaner appearance.

Border Spacing and Table Size

When borders are separated, the border-spacing property can add space between cells.

table {
  border-spacing: 10px;
}

This increases the visual space between cells.

If you use:

table {
  border-collapse: collapse;
}

you normally do not use border-spacing for the same visual effect.

HTML Table Width Using the Old width Attribute

Older HTML examples sometimes use:

<table width="500">

or:

<table width="100%">

Although this may still be encountered in legacy code, CSS is the modern and preferred way to control presentation.

Instead, use:

<table style="width: 500px;">

or preferably:

table {
  width: 500px;
}

CSS keeps presentation separate from HTML structure.

The Old height Attribute

Older HTML code may also contain:

<table height="300">

Modern HTML development should generally use CSS instead:

table {
  height: 300px;
}

Even with CSS, fixed table heights should be used carefully because content can require additional vertical space.

Responsive HTML Table Sizes

One of the biggest challenges with tables is displaying them on mobile devices.

A table with many columns may be wider than a phone screen.

For example:

<div class="table-container">
  <table>
    ...
  </table>
</div>

Then use:

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
}

This allows the user to scroll horizontally when the table is wider than the screen.

A Complete Responsive Table Example

<style>
  .table-container {
    width: 100%;
    overflow-x: auto;
  }

  table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
  }
</style>

<div class="table-container">
  <table>
    <tr>
      <th>Name</th>
      <th>Course</th>
      <th>City</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>Science</td>
      <td>Bhubaneswar</td>
      <td>88</td>
    </tr>
    <tr>
      <td>Anita</td>
      <td>Commerce</td>
      <td>Cuttack</td>
      <td>91</td>
    </tr>
  </table>
</div>

This approach keeps the table usable on smaller screens.

What Happens When Table Content Is Too Large?

Suppose you have:

<td>This is a very long sentence containing a lot of information.</td>

The browser may increase the column width or wrap the text depending on the table layout and CSS.

You can encourage long text to wrap:

td {
  overflow-wrap: break-word;
}

You can also control white-space behavior:

td {
  white-space: normal;
}

For long strings without spaces, overflow-wrap: anywhere; may be useful.

Controlling Text Wrapping

Text wrapping has a direct effect on table height.

For example:

td {
  white-space: normal;
}

allows text to wrap naturally.

On the other hand:

td {
  white-space: nowrap;
}

tries to keep the content on one line.

Be careful with nowrap. Long content can make a table extremely wide on smaller screens.

Using max-width for Table Cells

You can limit the width of a cell:

td {
  max-width: 300px;
}

For long content, you may also use:

td {
  max-width: 300px;
  overflow-wrap: break-word;
}

This can help prevent unusually long content from making the entire table too wide.

Table Size and Font Size

Font size also affects table dimensions.

For example:

th, td {
  font-size: 16px;
}

A larger font can increase both column width and row height.

Avoid making table text unnecessarily small just to fit more information.

Readable text is usually more important than forcing everything into a small space.

Table Size and box-sizing

CSS box sizing can affect how dimensions are calculated.

For example:

table {
  box-sizing: border-box;
}

With border-box, the declared width includes the relevant border and padding calculations for the element’s box.

This can make layout calculations easier in certain designs.

Using CSS Classes for Table Sizes

Instead of repeating inline styles, create reusable classes.

<style>
  .small-table {
    width: 50%;
  }

  .medium-table {
    width: 75%;
  }

  .full-table {
    width: 100%;
  }
</style>

<table class="small-table">
  ...
</table>

<table class="medium-table">
  ...
</table>

<table class="full-table">
  ...
</table>

This is cleaner and easier to manage.

Example of a Well-Sized HTML Table

<style>
  .data-table {
    width: 100%;
    max-width: 900px;
    border-collapse: collapse;
    table-layout: auto;
  }

  .data-table th,
  .data-table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
  }

  .data-table th {
    font-weight: bold;
  }

  .table-wrapper {
    width: 100%;
    overflow-x: auto;
  }
</style>

<div class="table-wrapper">
  <table class="data-table">
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Experience</th>
    </tr>
    <tr>
      <td>Rahul Kumar</td>
      <td>Marketing</td>
      <td>5 years</td>
    </tr>
    <tr>
      <td>Priya Sharma</td>
      <td>Technology</td>
      <td>3 years</td>
    </tr>
  </table>
</div>

This example combines several good practices:

• Full available width
• Maximum width
• Responsive horizontal scrolling
• Comfortable cell padding
• Collapsed borders
• Semantic table structure
• Flexible column sizing

HTML Table Size with <thead>, <tbody>, and <tfoot>

A properly structured table can use table sections.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Book</td>
      <td>₹300</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>₹20</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹320</td>
    </tr>
  </tfoot>
</table>

You can style each section separately:

thead {
  height: 50px;
}

tbody td {
  padding: 10px;
}

tfoot {
  font-weight: bold;
}

HTML Table Size and Accessibility

Table size should not be controlled in a way that makes the table difficult to use.

For data tables, use proper heading cells:

<th>Name</th>
<th>Age</th>

rather than using ordinary <td> elements for headings.

For more complex tables, attributes such as scope can improve accessibility:

<th scope="col">Name</th>
<th scope="col">Age</th>

A visually attractive table should also remain understandable to users who rely on assistive technologies.

Should You Use Fixed Table Sizes?

Fixed sizes can be useful, but they should not be the default for every table.

A fixed width such as:

table {
  width: 800px;
}

can work well in a controlled desktop design.

However, it can create horizontal overflow on a small screen.

A more flexible option is:

table {
  width: 100%;
  max-width: 800px;
}

This allows the table to adapt while preventing it from becoming unnecessarily wide.

Common Mistakes When Setting Table Sizes

1. Using Very Large Fixed Widths

Avoid:

table {
  width: 1500px;
}

unless you have a specific reason.

This can cause horizontal scrolling on smaller screens.

2. Setting a Fixed Height

Avoid forcing a table to be:

table {
  height: 100px;
}

when the content may need more space.

3. Using nowrap Everywhere

This can force text to remain on one line and make the table too wide.

4. Using Inline Styles Excessively

Instead of:

<td style="width: 200px;">

consider using a reusable CSS class.

5. Ignoring Mobile Screens

A table that looks good on a desktop may become difficult to use on a phone.

Always consider responsive behavior.

6. Making Text Too Small

Reducing font size just to fit more columns can harm readability.

7. Adding Too Many Columns

Sometimes the best solution to an oversized table is not more CSS. It is simplifying the information.

Best Practices for HTML Table Sizes

For modern websites, consider these practices:

1. Use CSS instead of obsolete HTML presentation attributes.
2. Prefer responsive widths such as 100% when appropriate.
3. Use max-width to prevent excessive table width.
4. Avoid unnecessary fixed heights.
5. Use padding to create comfortable spacing.
6. Allow long text to wrap naturally.
7. Use overflow-x: auto for wide tables on small screens.
8. Use table-layout: fixed when predictable column sizing is useful.
9. Use semantic table elements such as <thead>, <tbody>, and <tfoot>.
10. Use <th> for headings.
11. Test tables on desktop, tablet, and mobile screens.
12. Keep the table easy to scan and understand.
13. Avoid extremely small fonts.
14. Do not force every column to have the same width unless the content requires it.
15. Use CSS classes instead of repeating inline styles.

HTML Table Sizes: Fixed vs Responsive

The choice between fixed and responsive sizing depends on your content.

Fixed Table

table {
  width: 700px;
}

Advantages:

• Predictable size
• Useful for controlled layouts
• Easy to design for a specific desktop area

Disadvantages:

• Can overflow on mobile
• Less flexible
• May waste space on large or small screens

Responsive Table

table {
  width: 100%;
}

Advantages:

• Adapts to available space
• Better for different screen sizes
• More mobile-friendly

Disadvantages:

• Very wide tables may still need horizontal scrolling
• Column widths may change depending on content

Frequently Asked Questions About HTML Table Sizes

What is the width of an HTML table?

An HTML table does not have one universal default width. Its rendered width depends on its CSS, containing element, table layout, and content.

How do I make an HTML table 100% wide?

Use:

table {
  width: 100%;
}

This makes the table use the available width of its containing block.

How do I set a fixed table width?

Use a CSS width such as:

table {
  width: 600px;
}

How do I make a table responsive?

A common approach is:

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
}

This allows horizontal scrolling when necessary.

Can I set the height of an HTML table?

Yes. CSS can set a preferred table height:

table {
  height: 300px;
}

However, fixed heights should be used carefully because table content can require more vertical space.

How do I change the width of a column?

You can use CSS on the column or its cells:

th:first-child,
td:first-child {
  width: 60%;
}

You can also use <colgroup> and <col> for column styling.

What is table-layout: fixed?

table-layout: fixed tells the browser to use a fixed table layout algorithm. It can provide more predictable column widths and can be useful for tables with controlled layouts.

Should I use width in the <table> tag?

For modern HTML, CSS is preferred:

table {
  width: 100%;
}

rather than:

<table width="100%">

Why is my table wider than the screen?

This can happen because of long content, fixed widths, min-width, large padding, or white-space: nowrap.

For mobile layouts, wrapping the table in a horizontally scrollable container can help:

.table-wrapper {
  overflow-x: auto;
}

Does padding change table size?

Yes. Padding increases the space inside cells and can affect the overall dimensions of the table.

Does font size affect table size?

Yes. Larger text can increase both the width and height required by table cells.

HTML Table Sizes: Quick Reference

Final Thoughts

HTML table sizes are mainly controlled with CSS. You can change the width of the entire table, control individual columns, adjust row and cell dimensions, and create layouts that work across different screen sizes.

For most modern websites, a flexible approach is best. A table such as:

table {
  width: 100%;
  max-width: 1000px;
}

combined with a responsive wrapper can provide a good balance between readability and adaptability.

Remember that a table is designed to present information clearly. Do not focus only on making a table fit a particular size. Consider the amount of content, readability, accessibility, and mobile usability as well.

When you use semantic HTML together with sensible CSS sizing, your tables can remain clean, readable, accessible, and responsive across different devices.