In this tutorial, you will learn-
In this article, 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.