HTML Table Size: Width and Height

The size of an HTML table refers to its dimensions, specifically its width and height of columns and rows. We can create a table in HTML of different size for each column, each row, or for the entire table. It allows us to create tables that could fit the specific layout and design of the website as per requirements.

Some key points related to HTML table size are as follows:

(1) Table width: It represents the overall width of the table. We can set it with a specific value in pixels px, points pt, ems em, or as a percentage % of its containing element. However, we can also leave unset it to expand naturally based on its content and the width of its container.

(2) Table Height: Similar to width, we can also define the height of an entire table, individual rows, or even specific cells to achieve specific requirements using specific measurements or percentages. However, setting the height of table is less common than setting the width. It is usually determined by its content.

Adjusting HTML Table Size with HTML and CSS

(1) HTML Attributes: We can directly set the width and height of tables and their elements (like rows and cells) in the HTML using the width and height attributes. This approach provided a straightforward method to define the size of an HTML table. However, this approach is now considered outdated for most applications. Let’s take an example in which we will set the size of a table in HTML using width and height attributes.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Setting the size of HTML table using width and height attributes</title>
<style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table width = "50%" height = "200">
<tr>
   <th>Header 1</th>
   <th>Header 2</th>
   <th>Header 3</th>
</tr>
<tr>
   <td>Data 1</td>
   <td>Data 2</td>
   <td>Data 3</td>
</tr>
<tr>
   <td>Data 4</td>
   <td>Data 5</td>
   <td>Data 6</td>
</tr>
</table>
</body>
</html>

[adinserter block=”5″]

Output:

In this example, we have set width as 50% and height 200. Here, we have specified the height of a table without a unit. When we specify the height of the table without a unit, it’s interpreted as pixels, not as a percentage.

(2) CSS Styles: The modern and recommended way to define the size of tables in HTML is through CSS. Let’s take an example in which we will define the size of a table in HTML using internal CSS. It involves adding a <style> block in the <head> section of the HTML document, where we will specify the width and height properties for the HTML table.

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Setting the HTML table size using CSS</title>
<style>
table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
}
/*Using internal CSS*/
table {
    width: 50%;
    height: 200px;
}
</style>
</head>
<body>
<table>
<tr>
   <th>Header 1</th>
   <th>Header 2</th>
   <th>Header 3</th>
</tr>
<tr>
   <td>Data 1</td>
   <td>Data 2</td>
   <td>Data 3</td>
</tr>
<tr>
  <td>Data 4</td>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>
</table>
</body>
</html>

[adinserter block=”2″]

Setting Width of HTML Table

To set the width of a table, we only need to add the style attribute with the width property to the <table> element. This method is inline CSS, where we can directly add the style attribute inside the <table> tag to set its width and height. It applies the styles directly to the table element and overrides any other styles specified elsewhere for the table element.

Let’s take an example in which we will set the width of the table to 100%.

Example 3:

<!--Using inline CSS-->
<table style="width: 100%">
<tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
</tr>
<tr>
   <td>Jack</td>
   <td>Smith</td>
   <td>35</td>
</tr>
<tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>70</td>
</tr>
</table>

In this example, we have set a percentage as the size unit for a width of table, meaning how will this element be wide as compared to its parent element, which is the <body> element in this case.

HTML Table Column Width

To set the size of a specific column in a table, we only need to add the style attribute on a <th> or <td> element. Let’s do it.

Example 4:

<table style="width:70%">
<tr>
   <!-- Setting the size of a specific column in a HTML table-->
   <th style="width:30%">Name</th>
   <th>School</th>
   <th>Roll No</th>
</tr>
<tr>
   <td>Deepak Gupta</td>
   <td>RSVM</td>
   <td>15</td>
</tr>
<tr>
   <td>Eve Jackson</td>
   <td>DPS</td>
   <td>20</td>
</tr>
</table>

HTML Table Height Row

To set the height of a specific row of a table in HTML, we only need to add the style attribute to a row element in a table. Let’s take an example where we will set the height of the second row to 200 pixels in the table.

Example 5:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
}
table {
   width: 50%;
   height: 200px;
}
</style>
</head>
<body>
<table style="width:50%">
<tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
</tr>
<!-- Setting the height of a specific row in a HTML table-->
<tr style="height:200px">
   <td>Saanvi</td>
   <td>Kumari</td>
   <td>15</td>
</tr>
<tr>
   <td>Ivaan</td>
   <td>Sagar</td>
   <td>19</td>
</tr>
<tr>
   <td>Mark</td>
   <td>Smith</td>
   <td>20</td>
</tr>
</table>
</body>
</html>

Output:

In this tutorial, we’ve explored the methods of setting the size of HTML tables, including both width and height, through traditional HTML attributes and modern CSS properties. We hope that you will have understood the basic concept of setting width and height of a table in HTML through CSS style.

Adjusting HTML Table Size with HTML and CSS

Setting Width of HTML Table

HTML Table Column Width

HTML Table Height Row

Related Posts

Trending now