In this article, you will learn-
CSS Tables
CSS Tables: We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS:
The look of an HTML table can be greatly improved with CSS:
Table Borders
To specify table borders in CSS, use the border property.
The example beneath specifies a black border for <table>, <th>, and <td> elements:
Add a border to a table:
Firstname | Lastname |
---|---|
Sohail | Khan |
Haroon | Khan |
Example
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h2>Add a border to a table:</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Sohail</td> <td>Khan</td> </tr> <tr> <td>Haroon</td> <td>Khan</td> </tr> </table> </body> </html>
Full-Width Table
The table above may appear to be small in some cases. In the event that you need a table that should span the whole screen (full-width), add width: 100% to the <table> element:
Full-width Table
Firstname | Lastname |
---|---|
Sohail | Khan |
Haroon | Khan |
Example
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table { width: 100%; } </style> </head> <body> <h2>Full-width Table</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Sohail</td> <td>Khan</td> </tr> <tr> <td>Haroon</td> <td>Khan</td> </tr> </table> </body> </html>
Double Borders
Notice that the table in the examples above have double borders. This is on the grounds that both the table and the <th> and <td> elements have separate borders.
To eliminate double borders, take a look at the example underneath.
Collapse Table Borders
The border-collapse property sets whether the table borders ought to be collapsed into a single border:
Let the borders collapse
Firstname | Lastname |
---|---|
Sohail | Khan |
Haroon | Khan |
Example
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { width: 100%; border-collapse: collapse; } </style> </head> <body> <h2>Let the borders collapse</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Sohail</td> <td>Khan</td> </tr> <tr> <td>Haroon</td> <td>Khan</td> </tr> </table> </body> </html>
On the off chance that you just want a border around the table, just specify the border property for <table>:
Single Border Around The Table
Firstname | Lastname |
---|---|
Sohail | Khan |
Haroon | Khan |
Example
<!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; border: 1px solid black; } </style> </head> <body> <h2>Single Border Around The Table</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Sohail</td> <td>Khan</td> </tr> <tr> <td>Haroon</td> <td>Khan</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.