HTML

HTML Table Sizes

HTML tables allow developers to organize data in a structured layout. Adjusting the size of tables, columns, and rows ensures that the design aligns with content requirements and improves usability. Using the style attribute or CSS, you can precisely control table dimensions for responsive or fixed layouts.

HTML Table Width

The width property determines how wide your table will be within its parent container. Using percentages allows for responsive designs, while fixed units like pixels provide precise dimensions.

Example

<table style="width:100%">
  <tr>
    <th>Book Title</th>
    <th>Authors</th>
    <th>Published by</th>
  </tr>
  <tr>
    <td>HTML5 & CSS3 for the Real World: 2nd Edition</td>
    <td>Alexis Goldstein, Louis Lazaris, Estelle Weyl</td>
    <td>SitePoint</td>
  </tr>
  <tr>
    <td>Crafting HTML Email</td>
    <td>Rémi Parmentier</td>
    <td>SitePoint Hybrid Series</td>
  </tr>
</table>

Output

Book Title	Authors	Published by
HTML5 & CSS3 for the Real World: 2nd Edition	Alexis Goldstein, Louis Lazaris, Estelle Weyl	SitePoint
Crafting HTML Email	Rémi Parmentier	SitePoint Hybrid Series

Using a percentage as the size unit means the width is relative to the table's parent element, such as the <body>.

HTML Table Column Width

The width property applied to <th> or <td> elements customizes column sizes. This is useful for emphasizing specific data.

Example:

Set the first column's width to 70%:

<table style="width:100%">
  <tr>
    <th style="width:70%">Course Title</th>
    <th>Number of videos</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>Web Development Foundation: Learn HTML5, CSS3 & Bootstrap</td>
    <td>140</td>
    <td>23 hours 28 minutes</td>
  </tr>
  <tr>
    <td>Build Your First HTML & CSS Website</td>
    <td>21</td>
    <td>1 hours 53 minutes</td>
  </tr>
</table>

Output

Course Title	Number of videos	Duration
Web Development Foundation: Learn HTML5, CSS3 & Bootstrap	140	23 hours 28 minutes
Build Your First HTML & CSS Website	21	1 hours 53 minutes

HTML Table Row Height

The height property lets you control the vertical space occupied by individual rows. This can enhance readability or highlight specific rows.

Example:

Set the height of the second row to 200px:

<table style="width:100%">
  <tr>
    <th>Course Title</th>
    <th>Number of videos</th>
    <th>Duration</th>
  </tr>
  <tr style="height:200px">
    <td>JavaScript Fundamentals</td>
    <td>16</td>
    <td>1 hours 43 minutes</td>
  </tr>
  <tr>
    <td>CSS Animation</td>
    <td>8</td>
    <td>2 hours 40 minutes</td>
  </tr>
</table>

Output

Course Title	Number of videos	Duration
JavaScript Fundamentals	16	1 hours 43 minutes
CSS Animation	8	2 hours 40 minutes

FAQs on HTML Table Sizes

How to make an HTML table fixed size?

To make an HTML table fixed in size, set both the width and height properties directly on the <table> element using fixed units like px for pixels. Fixed sizes ensure consistent dimensions regardless of the table's content. Additionally, you can control the size of rows and columns individually to prevent content overflow.

<table style="width:500px; height:300px; border:1px solid black;">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

This ensures the table will remain 500 pixels wide and 300 pixels tall, even if the content inside is larger or smaller.

Tip: If content exceeds the fixed size, use overflow properties in CSS to handle it gracefully.

How to limit table width in HTML?

To limit a table's width, use the max-width property in CSS. This restricts the table's maximum width while allowing it to shrink when the content or screen size demands.

<table style="width:100%; max-width:600px; border:1px solid black;">
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>Introduction to React</td>
    <td>3 hours 8 minutes</td>
  </tr>
</table>

Combine max-width with min-width to create a responsive table that maintains a functional size across all devices.

Can we control the exact size of the table in HTML?

Yes, controlling the exact size of a table in HTML involves specifying both width and height using fixed units like px or relative units like em. You can also control the dimensions of individual cells, rows, or columns to ensure consistent layout.

<table style="width:400px; height:200px; border:1px solid black;">
  <tr>
    <td style="width:200px; height:100px;">Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

How do I auto-resize a table in HTML?

To make a table auto-resize, avoid setting fixed dimensions. Use percentages for width or height, rely on the table's content to define its size naturally or use CSS media queries. Set the table width to 100% for mobile and specify a fixed width (e.g., 600px) for larger screens.

Example:

<style>
  table {
    width: 100%;
    border: 1px solid black;
  }
  @media (min-width: 600px) {
    table {
      width: 600px;
    }
  }
</style>

This ensures the table is full-width on smaller devices and fixed-width on desktops.

Previous Next