Deprecated in HTML5. Do not employ.

Finish Using To Set Table Width In HTML: Here's Why

In HTML Attributes

Disclosure: Your support helps proceed the site running! We earn a referral fee for some of the services we recommend on this page. Acquire more

Attribute of
Dealing With Td Layout Issues In HTML5 - Quick Tutorial
What does Stop Using To Set up Table Width In HTML: Here'southward Why do?
Was used to ready the width of a table data jail cell to a value that would override the default width. This attribute has been deprecated. Utilise CSS to command 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 conform table columns to fit the contents of the tabular array. However, if you want to control the width of each column, yous can exercise then by adjusting the width of each <td> or <th> of a single row. Allow's see how this used to be washed with the width attribute and then we'll look at how the same thing can now exist done with CSS. But starting time, nosotros need a baseline to compare against.

                    <table>   <tr>     <thursday>Thin</th>     <th>Actually Actually Really Wide</th>   </tr>   <tr>     <td>Niggling</td>     <td>Lots and lots and lots and lots of content, and so much that nosotros might even need a line interruption.</td>   </tr> </tabular array>

As y'all can meet, in this start example we oasis't practical any CSS or attributes. What volition the browser practise with this table?

Thin Really Really Actually Wide
Niggling Lots and lots and lots and lots of content, so much that we might even demand a line break.

Equally you lot can meet, the browser gave the second cavalcade a lot more space than information technology gave the get-go. At present, let's try the same thing, but use the width attribute to forcefulness the columns to exist the same size.

                    <table>   <tr>     <th>Thin</th>     <th>Actually Really Really Wide</th>   </tr>   <tr>     <td width="fifty%">Petty</td>     <td width="50%">Lots and lots and lots and lots of content, and then much that we might even need a line interruption.</td>   </tr> </table>

In both cases, your browser should give each column the aforementioned width. Still, the first table should machine-size to fit the available space while the second will have a stock-still width.

Thin Really Really Actually Broad
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 as well isn't valid HTML since the width attribute has been deprecated. However, we can practice the same thing with some simple CSS.

                    <style> .equal-width td {   width: fifty%; } </fashion> <table form="equal-width">   <tr>     <thursday>Sparse</th>     <th>Really Really Really Broad</thursday>   </tr>   <tr>     <td>Niggling</td>     <td>Lots and lots and lots and lots of content, so much that information technology will require a line break.</td>   </tr> </table>

Let's run into what our browser does with this table using CSS rather than the width attribute:

.equal-width td{width: 50%;}

Sparse Really Really Really Wide
Piffling Lots and lots and lots and lots of content, so much that it will require a line break.

Adaptable Table Row Top

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 most adjusting column width we should cover adjusting row top equally well. Here'south how you would have done this in the past with the deprecated attribute:

                    <table>   <tr>     <th>Sparse</th>     <th>Really Really Actually Wide</th>   </tr>   <tr>     <td height="200px">Fiddling</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 Actually Really Broad
Petty Lots and lots and lots and lots of content, so much that information technology will crave a line break.

Since this aspect has been deprecated, we should show you how to do the same thing with CSS. Here's how you'd practice it:

                    <mode> .tall-row td {   height: 200px; } </style> <table class="tall-row">   <tr>     <th>Thin</th>     <th>Really Actually Really Broad</th>   </tr>   <tr>     <td>Lilliputian</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line pause.</td>   </tr> </tabular array>

Your browser should render this code in a manner that is near identical to the effect of the width attribute. Let's run into if it does:

.alpine-row td{height: 200px;}

Thin Really Actually Really Broad
Little Lots and lots and lots and lots of content, and then much that it will require a line pause.

To be honest, I'g not sure why'd you desire to control row peak. 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 top based on that information. Here's how you could apply that strategy:

                    <mode> .tall-row td {   padding: 80px 10px; } </style> <tabular array class="tall-row">   <tr>     <th>Sparse</th>     <th>Actually Really Really Broad</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, and then much that it will require a line pause.</td>   </tr> </table>

What this bit of CSS does is add 80 pixels of padding above and beneath each <td> element and x pixels of padding on the left and right of each <td> element. Here'southward the result:

.tall-row td{padding: 80px 10px;}

Sparse Actually Really Actually Broad
Little Lots and lots and lots and lots of content, and then much that it will require a line intermission.

Larn More About Styling Tables

Tables present a large number of styling challenges to web developers. To learn more nearly HTML tables and how to style them, accept a look at our tables tutorial.

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