How to set cell width and height in HTML?

HTML Web Development Front End Technology

We use the inline CSS style, to set the cell width and height.

The HTML style element contains width and height attributes. To set cell width and height we should place these attributes with specified values with pixels inside the <td> tag.

Syntax

Following is the syntax to set cell width and height in HTML.

<td style="width: 20px;height: 40px">content</td>

Example

Following is the example program to set cell width and height in HTML.


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

In above example we tried to set width and height of the first-row cells of the table.

Example

Following is the example program to set cell width and height in HTML.


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

In above example we tried to set width and height of the first all the rows cells of the table.

Example

Following is the example program to set cell width and height in HTML.


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