In this tutorial, you will learn-

CSS Table Size

Table Width and Height

CSS Table Size: The width and height of a table are defined by the width and height properties.

The example underneath sets the width of the table to 100%, and the height of the <th> elements to 70px:

The width and height Properties

Set the width of the table, and the height of the table header row:

Firstname Lastname Savings
Sohail Khan $100
Haroon Khan $150
Asad Khan $300
Jawad Khan $250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

To create a table that should just span half of the page, use width: 50%:

The width and height Properties

Set the width of the table, and the height of the table header row:

Firstname Lastname Savings
Sohail Khan $100
Haroon Khan $150
Asad Khan $300
Jawad Khan $250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 50%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder