HTML Table Sizes: A Beginner's Guide

Controlling the size of HTML tables ensures they fit well within your webpage and are readable across devices. Table sizes, including width and height, are best managed with CSS properties like width, height, and max-width, though the deprecated HTML width and height attributes are still supported in older code. This tutorial explains how to set table sizes with examples and previews, helping beginners create well-proportioned tables.

What Are Table Sizes?

Table sizes refer to the dimensions of a table and its cells, defined by width and height. Proper sizing makes tables visually appealing, ensures they fit within the page layout, and enhances usability on different devices. CSS is the modern approach for controlling sizes, offering flexibility for responsive design.

Setting Table Sizes

Let’s explore how to control table sizes using both the deprecated HTML attributes (for legacy understanding) and CSS (the modern approach), with previews.

1. Using HTML Width Attribute (Deprecated)

The HTML width attribute sets the table’s width in pixels or percentage, but it’s outdated and lacks flexibility.

<table width="500" border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

Preview

2. Using CSS for Table Width

CSS width property allows precise control, using pixels, percentages, or viewport units for responsiveness.

<table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Product</th>
    <th style="border: 1px solid black; padding: 8px;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Pen</td>
    <td style="border: 1px solid black; padding: 8px;">$2</td>
  </tr>
</table>

Preview

3. Setting Cell Sizes

Individual cells (<th> or <td>) can have specific widths or heights using CSS.

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="width: 200px; border: 1px solid black; padding: 8px;">Item</th>
    <th style="width: 100px; border: 1px solid black; padding: 8px;">Stock</th>
  </tr>
  <tr>
    <td style="width: 200px; border: 1px solid black; padding: 8px;">Notebook</td>
    <td style="width: 100px; border: 1px solid black; padding: 8px;">50</td>
  </tr>
</table>

Preview

4. Responsive Table Sizes

Use max-width or percentage-based widths for responsive tables that adapt to screen sizes.

<table style="max-width: 600px; width: 100%; border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Fruit</th>
    <th style="border: 1px solid black; padding: 8px;">Color</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Apple</td>
    <td style="border: 1px solid black; padding: 8px;">Red</td>
  </tr>
</table>

Preview

Key CSS Properties for Table Sizes

Here are the main CSS properties for controlling table sizes:

• width: Sets the table or cell width (e.g., width: 500px or width: 100%).
• height: Sets the table or cell height (e.g., height: 200px).
• max-width: Limits the maximum width for responsive design (e.g., max-width: 600px).
• min-width: Ensures a minimum width to prevent cramped content (e.g., min-width: 300px).

Best Practices for Table Sizes

To make your table sizes effective and user-friendly:

• Use CSS instead of HTML width and height attributes for modern, flexible sizing.
• Opt for percentage-based or viewport units for responsive tables.
• Use max-width to prevent tables from becoming too wide on large screens.
• Ensure cell content is not cut off by testing with min-width or padding.
• Test tables on various devices to confirm proper scaling and readability.

Common Mistakes to Avoid

Beginners often make these errors:

• Using deprecated HTML width or height attributes instead of CSS.
• Setting fixed widths that cause overflow on smaller screens.
• Not testing table sizes on mobile devices, leading to usability issues.

Try It Yourself

Create a simple HTML file and experiment with table sizes using CSS. Try fixed, percentage, and responsive widths.

<!DOCTYPE html>
<html lang="en">
<body>
  <h3>Employee Data</h3>
  <table style="width: 80%; max-width: 500px; border: 1px solid navy; border-collapse: collapse;">
    <tr>
      <th style="border: 1px solid navy; padding: 8px;">Employee</th>
      <th style="border: 1px solid navy; padding: 8px;">Role</th>
    </tr>
    <tr>
      <td style="border: 1px solid navy; padding: 8px;">Bob</td>
      <td style="border: 1px solid navy; padding: 8px;">Developer</td>
    </tr>
  </table>
</body>
</html>

Preview

Employee Data

By mastering CSS properties for table sizes, you can create well-proportioned, responsive tables that enhance your website’s usability. Practice regularly to get comfortable!