Sizing tables

You already know about the benefits of using HTML tables and have seen how to create them. In this topic, you'll learn how CSS properties can be applied to size tables according to the viewport or other project requirements.

Table size

By default, the size of a table cell is determined by the size of the piece of data within it. The table is as wide as the total width of the widest cells and as tall as the combined heights of its rows. But in some cases, you may want to use specific values to alter the overall size of the table. This can be achieved by applying the width and height CSS properties to the <table> element, as you will see in the next section.

Table width and height

You can set the overall width and height of a table by using the width and height properties. The values of these properties can be specified in pixels (px) if you want to set the exact size of the table. Or they can be expressed as percentages (%).

Let's start by looking at a table that has a default width and height:

HTML:

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>

    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

Output:

As you can see above, the table has the default width and height determined by the size of its cells.

The same table is shown below. But now its size has been set using CSS width and height properties specified in an external stylesheet. Take a look at the difference this makes:

CSS:

table {
  width: 400px;
  height: 100px;
}

Output:

Column width

It's also possible to set the size of a column by specifying the width of one of its cells. The following code snippets demonstrate how this can be done:

HTML:

<table>
  <thead>
    <tr>
      <th id="col-one">Heading 1</th>
      <th id="col-two">Heading 2</th>
      <th id="col-three">Heading 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>

    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

CSS:

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

table {
  width: 100%;
}

#col-one {
  width: 20%;
}

#col-two {
  width: 50%;
}

#col-three {
  width: 30%;
}

Output:

In the above example, the total width of the table is set to 100%. And the individual columns have their widths specified as percentage values. So the first column takes up 20% of the total width, the second takes up 50%, and the last takes up 30%. These percentages are portions of the total table width, meaning the sum of the column widths should be 100%.

Variable and fixed table widths

As previously explained, a table's width can either be set in pixels or as a percentage value. For example, a 50px width table creates a fixed-sized table regardless of the viewport or window size. On the other hand, if the table's width is set to 50%, it will take up half the width of its parent container. In this topic's examples, the parent container is the browser window. So setting the table's width to 50% would make it stretch across half of the browser window's width. But if the table width was set to 100%, it would take up the whole width of the parent container and be fitted according to the viewport size.

Conclusion

You now know how to set the width and height of a table using properties specified in an external stylesheet. You have learned that a table's width and height can be set using pixel or percentage values. You have also seen how to set the size of a column by specifying the width of one of its cells. Don't forget that it used to be possible to specify the size of a table with width and height attributes, but they aren't supported in HTML5.