How to set table width in HTML?

We use inline style attribute, to set the table width in HTML. The attribute is used within the HTML <table> tag, with the CSS property width to set table width.

Syntax

Following is the syntax to set table width in HTML.

<table style="width: width value in percentage">… </table>

Example

Following is the example program to set table width in HTML.

<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
      </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 50%">
      <tr>
         <th>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

In above example we used width=50%, it will expand our table to the 50% of the browser tab size on the web page.

Example

Following is another example program to set table width in HTML. 

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <table style="width:100%">
      <caption>Cricketers...</caption>
      <tr style="background-color: Mediumseagreen">
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>babar azam</td>
         <td>34</td>
         <td>pakistan</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Shami</td>
         <td>29</td>
         <td>India</td>
      </tr>
      <tr style="background-color: Mediumseagreen">
         <td>3</td>
         <td>Cummins</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

Now we try to extend our table to our browser tab size using style attribute.

Example

Following is the example program to extend our table to our browser tab size using style attribute.

<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Updated on: 21-Oct-2023

21K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements