Stop Using To Set Table Width In HTML: Here's Why »
Có thể bạn quan tâm
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:
.equal-width td{width: 50%;}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:
.tall-row td{height: 200px;}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:
.tall-row td{padding: 80px 10px;}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.
Adam WoodAdam is a technical writer who specializes in developer documentation and tutorials.Từ khóa » Html Cell Width Fixed
-
Fixed Table Cell Width - Stack Overflow
-
How To Set Fixed Width For
In A Table ? - GeeksforGeeks CSS Table-layout Property - W3Schools
Table-layout - CSS: Cascading Style Sheets - MDN Web Docs
How To Set The Table Column Width Regardless Of The Text Amount ...
How To Set Fixed Width For
Regardless Of Its Content Table-layout - CSS-Tricks
How To Create Tables With Fixed Width Cells
DataTable Width & Column Width | Dash For Python Documentation
How To Set Cell Width And Height In HTML? - Tutorialspoint
Advanced Table Settings: Column Width, Alignment And Merging Cells
Changing Column Width - The Complete HTML5 Tutorial
Html – Fixed Table Cell Width - ITecNote
Fix Column Width In Html Table Code Example
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu