Controlling HTML Table Dimensions: Width, Height, and Columns

Learn how to manage the dimensions of your HTML tables using CSS and the `style` attribute. This tutorial shows you how to set table width, column width using `col`, and row height using `tr`, providing examples using pixels and percentages for flexible table layouts.

Controlling Table Dimensions in HTML

This chapter demonstrates how to control the dimensions (width and height) of HTML tables, rows, and columns using the `style` attribute and CSS.

Setting Table Width

To set the overall width of a table, add the `style="width: value;"` attribute to the <table> tag. You can use pixels (e.g., `width: 300px;`) or percentages (e.g., `width: 100%;`). A percentage width is relative to the table's parent container (often the browser window).

<table style="width:100%;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

Setting Column Width

To set the width of a specific column, add the `style="width: value;"` attribute to either a <col> element (for controlling multiple columns) or directly to a <td> or <th> element (for a single cell).

<table>
  <colgroup>
    <col style="width:70%;">
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

Setting Row Height

To control the height of a specific row, add the `style="height: value;"` attribute to the <tr> (table row) element. Use pixels (e.g., `height: 50px;`) or other suitable units.

<table>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr style="height:200px;">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>