Filter (Advanced Search)
    Downloads
    1         Views
    295
    Video

    HTML Table Width | Tables

    HTML Watch on YouTube
    Details

    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:

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Table Width</title>
    </head>
    <body>
    <h2>100% wide HTML Table</h2>

    <table style="width:100%">
      <tr>
        <th>#</th>
        <th>Name of Student</th>
        <th>Class</th>
      </tr>
      <tr>
        <td>1.</td>
        <td>Taranpreet Singh</td>
        <td>6th</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Mehakpreet Kaur</td>
        <td>7th</td>
      </tr>
      <tr>
        <td>3.</td>
        <td>Veerpal Kaur</td>
        <td>8th</td>
      </tr>
      <tr>
        <td>4.</td>
        <td>Jasmeen</td>
        <td>9th</td>
      </tr>
      <tr>
        <td>5.</td>
        <td>Sonia</td>
        <td>10th</td>
      </tr>
      <tr>
        <td>6.</td>
        <td>Jaskaran Singh</td>
        <td>11th</td>
      </tr>
      <tr>
        <td>7.</td>
        <td>Arshdeep Kaur</td>
        <td>12th</td>
      </tr>
      
    </table>

    </body>
    </html>

    Output

    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.

    Ad