View video tutorial

HTML Table Sizes

HTML

HTML <table> can have different sizes in width or height.

HTML Table size


style attribute is used to set the size of cells, columns, rows, or table itself.

To get full window width and 250px height of a table, style should be like this style = "width:100%; height:250px;"

CSS style can be applied to every individual parts of a table like, <td>, <th>, <tr> etc.

HTML Table header

Company Contact Country
Magazzini Alimentari Moctezuma Yoshi Chang Germany
Laughing Bacchus Futterkiste Giovanni Anders Mexico
Ernst Trading Bennett Roland Austria
Island Handel Mendel Helen UK
Centro comercial Riuniti Maria Rovelli Italy
Alfreds Winecellars Francisco Tannamuri Canada

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #00000055;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>

<body>

    <h2>HTML Table</h2>

    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Magazzini Alimentari Moctezuma</td>
            <td>Yoshi Chang</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Futterkiste</td>
            <td>Giovanni Anders</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Trading</td>
            <td>Bennett Roland</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Island Handel</td>
            <td>Mendel Helen</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Centro comercial Riuniti</td>
            <td>Maria Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td>Alfreds Winecellars </td>
            <td>Francisco Tannamuri</td>
            <td>Canada</td>
        </tr>
    </table>

</body>

</html>
Try it Now »

Click on the "See output" button to see how it works.