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?

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.

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:

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.

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:

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:

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.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.