Stop Using To Set Table Width In HTML: Here's Why
- Attribute of
- Dealing With Td Layout Issues In HTML5 - Quick Tutorial
- What does
Stop Using To Set Table Width In HTML: Here's Why
do? - Was used to set the width of a table data cell to a value that would override the default width. This attribute has been deprecated. Use CSS to control layout of data cells in HTML tables.
Adjusting Table Column Width
The width
attribute, now deprecated, was once the correct way to adjust the width of a table’s columns. By default, a browser will adjust table columns to fit the contents of the table. However, if you want to control the width of each column, you can do so by adjusting the width of each <td>
or <th>
of a single row. Let’s see how this used to be done with the width
attribute and then we’ll look at how the same thing can now be done with CSS. But first, we need a baseline to compare against.
<table> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td>Little</td> <td>Lots and lots and lots and lots of content, so much that we might even need a line break.</td> </tr> </table>
As you can see, in this first case we haven’t applied any CSS or attributes. What will the browser do with this table?
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
As you can see, the browser gave the second column a lot more space than it gave the first. Now, let’s try the same thing, but use the width
attribute to force the columns to be the same size.
<table> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td width="50%">Little</td> <td width="50%">Lots and lots and lots and lots of content, so much that we might even need a line break.</td> </tr> </table>
In both cases, your browser should give each column the same width. However, the first table should auto-size to fit the available space while the second will have a fixed width.
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that we might even need a line break. |
That’s a lot nice. Unfortunately, it also isn’t valid HTML since the width
attribute has been deprecated. However, we can do the same thing with some simple CSS.
<style> .equal-width td { width: 50%; } </style> <table class="equal-width"> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td>Little</td> <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td> </tr> </table>
Let’s see what our browser does with this table using CSS rather than the width
attribute:
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Adjustable Table Row Height
Another attribute closely related to width
is height
. This attribute has also been deprecated, so you shouldn’t use it, but as long as we’re talking about adjusting column width we should cover adjusting row height as well. Here’s how you would have done this in the past with the deprecated attribute:
<table> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td height="200px">Little</td> <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td> </tr> </table>
And here’s what your browser does with that information.
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Since this attribute has been deprecated, we should show you how to do the same thing with CSS. Here’s how you’d do it:
<style> .tall-row td { height: 200px; } </style> <table class="tall-row"> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td>Little</td> <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td> </tr> </table>
Your browser should render this code in a way that is virtually identical to the effect of the width
attribute. Let’s see if it does:
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
To be honest, I’m not sure why’d you want to control row height. It makes a lot more sense to control the margin and padding around the contents of the <td>
element and let the browser automatically set the row height based on that information. Here’s how you could apply that strategy:
<style> .tall-row td { padding: 80px 10px; } </style> <table class="tall-row"> <tr> <th>Thin</th> <th>Really Really Really Wide</th> </tr> <tr> <td>Little</td> <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td> </tr> </table>
What this bit of CSS does is add 80 pixels of padding above and below each <td>
element and 10 pixels of padding on the left and right of each <td>
element. Here’s the result:
Thin | Really Really Really Wide |
---|---|
Little | Lots and lots and lots and lots of content, so much that it will require a line break. |
Learn More About Styling Tables
Tables present a large number of styling challenges to web developers. To learn more about HTML tables and how to style them, take a look at our tables tutorial.