HTML Table Size

❮ PreviousHome ❯

When creating HTML tables for a website, we can make different parts of the table different sizes.

It means we can make some columns wide or narrower, some rows taller or shorter, or even change the size of the entire table.

Using the style attribute, we can set the width or height for the table, a row, or a column.

It's a simple way to give our tables a custom look and feel, making them more visually appealing to your audience.

Russia 1 500
United States 2 500
India 3 600
Russia 1 500
United States 2 500
India 3 600
Russia 1 500
United States 2 500
India 3 600

HTML Table Width

To change the width of an entire HTML table, we add the style attribute to the <table> element and use the width property to specify the desired size.

The value of the width property can be specified in different units, such as pixels or percentages.

If the value is in percentage, it is relative to its parent element.

Let's see an example where we have set the width of the first table to 200px and the width of the second table to 100%.

Click on 'result on editor' to view the output of the code.

Example
<!DOCTYPE html>
<html>
<head>

<title>Table Width Example</title>

<style>

table, td, th {
border:2px solid black;
border-collapse: collapse;
}

</style>
<head>
</head>
<body>

<h1>Table Width Example</h1>

<table style="width:200px;">
<tr>
<th>No</th>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here width of the entire table is set to 200 px.</p>

<table style="width:100%;">
<tr>
<th>No</th>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here width of the table is set to 100%.</p>

</body>
</html>

HTML Table Height

It is possible to set the height of an entire HTML table.

Similar to how the width is set, we can use the style attribute within the opening <table> tag and add the height property.

If the value is in percentage, it is relative to its parent element.

Let's see an example where we have set the height of the first table to 400px and the height of the second table to 100%.

Click on 'result on editor' to view the output of the code.

Example
<!DOCTYPE html>
<html>
<head>

<title>Table Height Example</title>

<style>

table, td, th {
border:2px solid black;
border-collapse: collapse;
}

</style>
<head>
</head>
<body>

<h1>Table Height Example</h1>

<table style="height:400px;">
<tr>
<th>No</th>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here height of the entire table is set to 400px.</p>

<table style="height:100%;">
<tr>
<th>No</th>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here height of the table is set to 100%.</p>

</body>
</html>

Keep in mind that setting the height of a table will not change the size of the stuff inside the table.

It will just add a height property to the table element, which can cause the content to be hidden if it doesn't fit in the set height of the table.

Table Column Width

We can set the width of an HTML table column by using the CSS width property in the style attribute on <th> or <td> element.

In the example below, we have set the width of the second column to 60%. Click on 'result on editor' to view the output.

Example
<!DOCTYPE html>
<html>
<head>

<title>HTML Table Column Width Example</title>

<style>

table, td, th {
border:2px solid black;
border-collapse: collapse;
}

</style>
<head>
</head>
<body>

<h1>HTML Table Column Width Example</h1>

<table style="width:100%;">
<tr>
<th>No</th>
<th style="width:60%;">Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here width of the second column is set to 60%.</p>

</body>
</html>

Table Row Height

To set the height of a specific row in an HTML table, we add the style attribute to the opening <tr> tag for that row and set the height property.

We can set the value of the height property in pixels or percentages.

In the below example, the height of the third row is set to 180px. See the codes.

Example
<!DOCTYPE html>
<html>
<head>

<title>HTML Table Row Height Example</title>

<style>

table, td, th {
border:2px solid black;
border-collapse: collapse;
}

</style>
<head>
</head>
<body>

<h1>HTML Table Row Height Example</h1>

<table style="width:100%;">
<tr>
<th>No</th>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>1</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr style="height:180px;">
<td>2</td>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>3</td>
<td>United Kingdom</td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>5</td>
<td>France</td>
<td>Paris</td>
</tr>
</table>

<p>Here height of the third row is set to 180px.</p>

</body>
</html>

Due to various reasons, we frequently need to adjust the width and height of a table, a column and a row. Some of them are as follows:

Design:

Adjusting the dimensions of our table may fit the overall design of our website or document.

Percentage values for width and height instead of fixed values make the table adapt to different screen sizes and resolutions.

Usability:

By making certain columns or rows wider or taller, we can make it easier for users to read and understand the information in our table.

Adjusting the height of rows or the width of columns can prevent the content from overflowing and make the table more readable.

❮ PreviousHome ❯
1. HTML Tutorial
2. Introduction to HTML
3. Basic HTML Page
4. HTML Editors
5. Web Browser
6. HTML History
7. Basic HTML Tags
8. HTML Elements
9. HTML Attributes
10. HTML Headings
11. HTML Paragraphs
12. HTML Text Formatting
13. HTML Styles
14. HTML Comment
15. HTML Quotation
16. HTML Colors
17. HTML RGB Colors
18. HTML HEX Colors
19. HTML HSL Color
20. HTML CSS
21. HTML Links
22. HTML Link Colors
23. Link within Page
24. HTML Images
25. HTML Background Image
26. HTML Image Map
27. HTML Picture Element
28. HTML Favicon
29. HTML Table
30. HTML Table Border
31. HTML Table Size

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.