Each column, row, or the complete HTML table can have a varied size.

To specify the size of a table, row, or column, use the style attribute along
with the width or height values.

Table width in HTML

Add the style attribute to the
<table> element to specify a
table’s width:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table sizes in HTML</title>
    <style>
     table, th, td {
        border:1px solid green;
      border-collapse: collapse;
  }
  </style>
</head>
<body>

    <h2>Wide HTML Table, 100%</h2>

    <table style=“width:100%”>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Rocky</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Anju</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Nayna</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

It should be noted that using a % as the size unit for an element’s width
indicates how large it will be in relation to its parent element, in this case
the <body> element.

Table Column Width in HTML

Add the style attribute to a <th> or <td> element to specify the
size of a certain column:
Table sizes in HTML


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table sizes in HTML</title>
    <style>
     table, th, td {
        border:1px solid green;
      border-collapse: collapse;
  }
  </style>
</head>
<body>

    <h2>First column should be 80% of the table’s width.</h2>

    <table style=“width:100%”>
      <tr>
        <th style=“width:80%”>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Rocky</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Anju</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Nayna</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

MR STAR EDIT
Rate this post

Categorized in: