If you don't control the geometry of your tables, the web browser will automatically scale them based on the text inside. If one header says "ID" and the next says "Biographical Information", the second column will dynamically stretch to be huge. We fix this unpredictability using CSS width and height properties.
Most modern web layouts prefer tables to span entire containers rather than shrinking to fit their text. You accomplish this by grabbing the root <table> element and applying a percentage width.
<!-- Using inline CSS to make the table fill its space -->
<table style="width: 100%;">
<!-- Table data goes here -->
</table>100% means the table is fluid. If a user views your page on a narrow smartphone or a wide 4k display, the table will adapt naturally. hardcoding pixels like width: 800px can break mobile viewports.
To ensure specific data points get the reading space they deserve, you define the width of individual columns. A quirk of HTML tables is that if you define a width on a cell in the very top row (acting on the th element natively), every cell below it in that column respects the rule.
<table style="width: 100%;">
<tr>
<!-- Forcing the first column to take up exactly 30% of the space -->
<th style="width: 30%;">Feature ID</th>
<!-- The browser divides whatever is left over evenly for the rest -->
<th>Description</th>
<th>Status</th>
</tr>
<!-- Consecutive rows follow suit... -->
</table>Rows usually stretch vertically to accommodate tall text blocks correctly. But sometimes, especially for design constraints (like a grid of profile pictures or fixed layout UI tools), you need rows to have a minimum guaranteed height.
Apply CSS height adjustments to the <tr> (Row) element directly:
<table>
<!-- This entire horizontal slice will be exactly 150px tall -->
<tr style="height: 150px;">
<td>Metric Alpha</td>
<td>Metric Beta</td>
</tr>
</table>