Home / HTML / Tables / Sizes

HTML Table Sizes

What are Table Sizes?

Table sizes refer to the width and height of tables and their cells. In HTML5, the width and height attributes are deprecated, so CSS should be used to control table dimensions.

Table Width

Set the table width using CSS width property:

Fixed Width

Example
<style>
    table {
        width: 500px;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Percentage Width

Use percentage for responsive table width:

Example
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Cell Width

Set the width of individual cells:

Example
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
    .name-col {
        width: 60%;
    }
    .age-col {
        width: 40%;
    }
</style>
<table>
    <tr>
        <th class="name-col">Name</th>
        <th class="age-col">Age</th>
    </tr>
    <tr>
        <td class="name-col">John Doe</td>
        <td class="age-col">25</td>
    </tr>
</table>

Table Height

Set the table height using CSS. Note that table height is less commonly used:

Example
<style>
    table {
        height: 200px;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Cell Height

Set the height of individual cells:

Example
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
    .tall-cell {
        height: 100px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>John</td>
        <td class="tall-cell">Tall cell with more content</td>
    </tr>
</table>

Max-Width and Min-Width

Use max-width and min-width to control responsive behavior:

Example
<style>
    table {
        max-width: 800px;
        min-width: 400px;
        width: 100%;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Deprecated HTML Attributes

The HTML width and height attributes are deprecated. Use CSS instead:

Example - Don't Use (Deprecated)
<table width="500" height="200"></table>
<td width="100" height="50"></td>
Example - Modern Way (CSS)
<style>
    table {
        width: 500px;
        height: 200px;
    }
    td {
        width: 100px;
        height: 50px;
    }
</style>

Responsive Table Sizes

For responsive tables, use percentage widths and CSS media queries:

Example
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
    @media (max-width: 600px) {
        table {
            font-size: 12px;
        }
        td, th {
            padding: 4px;
        }
    }
</style>

Best Practices

← Table Borders Table Headers →