Set Fixed Width for TD in a Table

To set the fixed width to the table's <td> element we can use multiple approaches. But before that we need to know about the <td> element.

HTML <td> element defines a data cell in an HTML table. It is used to display data in the table, such as text, images, or links. Each <td> element is enclosed within a <tr> element, which represents the row in the table.

Fixed Table Cell Width

It is important that the table looks consistent and easy to read when it displays on the web page. We can easily achieve this by setting a fixed width for the <td> elements in the table. With this, we ensure that each column in the table is the same width, which makes it easier for users to find the information.

Ways to Set fixed <td> Width

Examples of fixed <td> Width

Below examples will illustrate the each ways with the code.

Using HTML width Attribute

To set cell width we can use HTML width attribute with specified values with pixels inside the <td> tag.

<!DOCTYPE html>
<html>
<body>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

Using CSS width Property

To set cell width we can use CSS width property with specified values with pixels on the <td> tag.

<!DOCTYPE html>
<html>
<head>
    <style>
          td {
             width: 100px;
          }
    </style>
</head>
<body>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>
Updated on: 2024-08-22T16:09:43+05:30

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements