How to Create Table in HTML?

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>

Output:

tab2

How to Create Table in HTML?

yuvrajghule281

Improve

Article Tags :

Similar Reads

How to merge table cells in HTML ?

The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es

How to Set Viewport Height & Width in CSS ?

Set viewport height and width in CSS is essential for creating responsive and visually appealing web designs. We'll explore the concepts of setting viewport height and width by using various methods like CSS Units, Viewport-Relative Units, and keyframe Media Queries. Table of Content Setting viewpor

How to Create Table in HTML?

HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable Elements Description <table> The <table> element

How to specify the width and height of the object in HTML5?

The <object> tag is used to display multimedia like audio, videos, images, PDFs, and Flash in web pages. It can also be used for displaying another webpage inside the HTML page. The <param> tag is also used along with this tag to define various parameters. Any text that is written within

How to create table cell using HTML5 ?

In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: <!DOCTYPE html> <html> <head> <

How to set the height and width of the video player in HTML5 ?

In this article, we will learn to set the width and height of the video player in HTML5. The following are the two scenarios The width and height of the video are fixed.Make the video respond to your screen width. Approach: The HTML5 width and height attributes of the video tag are used to set the h

How to set fixed width for <td> in a table ?

The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted

How to Define a Minimum Width for HTML Table Cell using CSS ?

To set a minimum width for an HTML table cell using CSS, apply the min-width property directly to the <td> element, ensuring it does not shrink below the specified size. This ensures a minimum width for the cell content, maintaining layout integrity. Table of Content Using the min-width Proper

How to Set Width and Height of an Image using HTML?

When adding images to a webpage, it's important to set their dimensions using the height and width attributes in HTML. Without these dimensions, the browser won't know how much space to reserve for the image, which can cause layout shifts that disrupt the viewing experience. Note: Always specify the

How to Create Header Cell in a Table using HTML?

A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default. Syntax <th> Conten