bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

Example

Formatted code
<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>
  <tr>
    <td>Eve</td>

    <td>Jackson</td>
    <td>94</td>

  </tr>
</table>

Live preview

Note

Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

Example

Formatted code
<table style="width:100%">

<tr>
    <th style="width:70%">Firstname</th>

    <th>Lastname</th>
    <th>Age</th>

</tr>

<tr>
    <td>Jill</td>

    <td>Smith</td>
    <td>50</td>

</tr>
  <tr>
    <td>Eve</td>

    <td>Jackson</td>
    <td>94</td>

  </tr>
</table>

Live preview

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Formatted code
<table style="width:100%">

<tr>
    <th>Firstname</th>

    <th>Lastname</th>
    <th>Age</th>

</tr>

<tr style="height:200px">
    <td>Jill</td>

    <td>Smith</td>
    <td>50</td>

</tr>
  <tr>
    <td>Eve</td>

    <td>Jackson</td>
    <td>94</td>

  </tr>
</table>

Live preview

Previous

HTML Table Borders

Next

HTML Table Headers