Back to: HTML Tutorials
Table Sizes in HTML with Examples
In this article, I am going to discuss Table Sizes in HTML with Examples. Please read our previous article where we discussed Table Borders in HTML with Examples. At the end of this article, you will learn everything about HTML Table Sizes with Examples.
HTML Table Sizes
We can change the size of the entire table, column, or row using the HTML style attribute. We can specify different width and height properties to a table, row, or column.
Table Width in HTML
To set the width of an entire Html table we can apply a style attribute inside the opening tag of the table element. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
padding:8px;
background-color:slateblue;
color:white;
border-color:white;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Rollins</td>
<td>42</td>
</tr>
<tr>
<td>Eve</td>
<td>Mares</td>
<td>73</td>
</tr>
<tr>
<td>Jhonny</td>
<td>Wepper</td>
<td>28</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Table Column Width in HTML
To set the width of a specific column we can add the style attribute inside the <th> and <td> element opening tag. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
padding:8px;
background-color:slateblue;
color:white;
border-color:white;
}
</style>
<body>
<table>
<tr>
<th style="width:50%">Firstname</th>
<th style="width:50%">Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Rollins</td>
<td>42</td>
</tr>
<tr>
<td>Eve</td>
<td>Mares</td>
<td>73</td>
</tr>
<tr>
<td>Jhonny</td>
<td>Wepper</td>
<td>28</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Table Row Height in HTML
To set the height of a specific row we can add the style attribute inside the <tr> element opening tag. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
padding:8px;
background-color:slateblue;
color:white;
border-color:white;
}
</style>
<body>
<table>
<tr style="height:100px">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Rollins</td>
<td>42</td>
</tr>
<tr>
<td>Eve</td>
<td>Mares</td>
<td>73</td>
</tr>
<tr>
<td>Jhonny</td>
<td>Wepper</td>
<td>28</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Here, in this article, I try to explain Table Sizes in HTML with Examples and I hope you enjoy this HTML Table Sizes with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.