How to Set Table Cell Width & Height in HTML ?

Last Updated : 04 Apr, 2024

In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML.

Table of Content

Using inline Style
Using width and height attributes

Using Inline Style

In this approach, we are using the inline style to set the width and height of table cells. We can set the width and height of table cells directly within the <td> or <th> tags using the style attribute.

Example: In the below example we are using inline styling to set table cell width and height.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table Cell Width and Height</title>
</head>

<body>
    <h1 style="color: green;">GeeksForGeeks</h1>

    <h3>
          Set width and height of table cell 
          using Inline Styling
      </h3>
    <table border="1">
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
        <tr>
            <td style="width: 100px; height: 50px;">
              Cell 1 with 100px width
              </td>
            <td style="width: 200px; height: 50px;">
              Cell 2 with 200px width
              </td>
        </tr>
    </table>

</body>

</html>

Output:

tab1

Using Width and Height Attributes

In this approach, we are directly adding the width and height attributes to the <td> or <th> tags with the desired values.

Example: The below example uses width and height attributes to set table cells width and height.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Table Cell Width and Height</title>
</head>

<body>
    <h1 style="color: green;">GeeksForGeeks</h1>

    <h3>
          Set width and height of table cell using 
          width and height attribute
      </h3>

    <table border="1">
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
        <tr>
            <td width="100" height="50">Cell 1</td>
            <td width="150" height="50">Cell 2</td>
        </tr>
    </table>


</body>

</html>