html table sizes

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links

HTML Images

HTML Tables

HTML Lists

HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Table Sizes

Previous Next

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.

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

Example:

Set the width of the table to 100%:

<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>

Try it Yourself

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:

<table style="width:100%">
    <tr>
        <thstyle =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>

Try it Yourself

HTML Table Row Height

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

Example:

Set the height of the second row to 200 pixels:

<table style="width:100%">
    <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Age</th>
    </tr>
    <tr style =height:70%">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>

Try it Yourself

Previous Next

Report error:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: shaurya.y321@gmail.com

Forum | About

LearnToCode is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.