Table Sizes in HTML

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 Sizes in HTML with Examples

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.

Table Row Height in HTML

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.

Leave a Reply

Your email address will not be published.