HTML tables are created using the table tag with the combination of subsequent tags like tr tag to create a new row in the table. The th tag for table headers and td tag is used for defining a cell in the table. However, each cell of the table is by default designed to fit content of any size hence each changes its width according to the information inside it. Hence we learn how to fix the width of a cell to any size or value.
By default the HTML cell size is dynamic. So if the content to be displayed in the cell is large the size of the cell changes according to the content in it. However, there are some scenarios where fixed cell size is required to maintain uniformity and for aesthetic purposes.
There are several ways to make the cell size fixed in HTML tables.
Using CSS table-layout Property: This property should be used for changing the layout features of the table. By default the table-layout value is auto. This means the cell size varies according to the content in it if we changed it to fix that will affect. By changing the value to fixed, the table layout is fixed. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths. The column widths are divided equally across the table, regardless of content inside the cells.
Below example illustrate the above approach:
-
Example:
<!DOCTYPE html><html><head><title>table-layout property</title><style>table {border-collapse: collapse;border: 1px solid black;}th,td {border: 1px solid black;}table#table1 {table-layout: auto;width: 200px;}/* Equal width table cell */table#table2 {table-layout: fixed;width: 200px;}div {max-width: 200px;padding: 10px;border: 1px solid black;}h1 {color: green;}</style></head><body><center><h1>GeeksforGeeks</h1><div><h3>Default width table cell</h3><tableid="table1"><tr><th>Author Name</th><th>Age</th><th>College</th></tr><tr><td>RaviPratap Singh</td><td>24</td><td>GFG</td></tr><tr><td>Rakesh Singh</td><td>25</td><td>GEEKS</td></tr></table></div><br><div><h3>Equal width table cell</h3><tableid="table2"><tr><th>Author Name</th><th>Age</th><th>College</th></tr><tr><td>RaviPratap Singh</td><td>24</td><td>GFG</td></tr><tr><td>Rakesh Singh</td><td>25</td><td>GEEKS</td></tr></table></div></center></body></html> -
Output:
Using CSS width property: By using this property, we can define each cell’s width value. If we set the value in the equal percentage unit then the width of the each cell will be equal, every time window size doesn’t matter.
-
Example:
<!DOCTYPE html><html><head><title>table-layout property</title><style>table {border-collapse: collapse;border: 1px solid black;}th,td {border: 1px solid black;}table#table2 td {width: 33%;}div {max-width: 200px;padding: 10px;border: 1px solid black;}h1 {color: green;}</style></head><body><center><h1>GeeksforGeeks</h1><div><h3>Default width table cell</h3><tableid="table1"><tr><th>Author Name</th><th>Age</th><th>College</th></tr><tr><td>RaviPratap Singh</td><td>24</td><td>GFG</td></tr><tr><td>Rakesh Singh</td><td>25</td><td>GEEKS</td></tr></table></div><br><div><h3>Equal width table cell</h3><tableid="table2"><tr><th>Author Name</th><th>Age</th><th>College</th></tr><tr><td>RaviPratap Singh</td><td>24</td><td>GFG</td></tr><tr><td>Rakesh Singh</td><td>25</td><td>GEEKS</td></tr></table></div></center></body></html> -
Output: