in , ,

CSS Table Size

CSS Table Size
CSS Table Size

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.

salman khan

Written by worldofitech

Leave a Reply

CSS Tables

CSS Tables

CSS Table Alignment

CSS Table Alignment