CSS Styling Table
CSS Styling Table
In this tutorial we will learn, how to style the HTML Table with CSS. We can style and design the HTML Table to improve the looks of Tables. Here we learn how to style table with CSS properties such as collapsing table border, padding, table aligning text content, layout and width of table, striped rows and coloring the table rows and columns.
If you haven’t read the HTML Table, how to make table in HTML basic knowledge to make table in HTML, you can visit and Learn HTML Table Full Tutorial.
CSS Table Border
In table we can sets the border by using the border CSS property, below the programming example how to set border in HTML Table.
Programming Example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Table Border</title>
<style type="text/css">
table, td,th{border: 1px
solid red;}
</style>
</head>
<body>
<p>Programming Example CSS Border
Table</p>
<table>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>07</td>
<td>Shubham</td>
<td>BCA</td>
</tr>
<tr>
<td>20</td>
<td>Mahid</td>
<td>BCA</td>
</tr>
<tr>
<td>19</td>
<td>Sonu</td>
<td>BCA</td>
</tr>
<tr>
<td>25</td>
<td>Bipul</td>
<td>BCA</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output of programming example.
 |
Above programming output, you can see the border in the table, here we use the border property of CSS.
CSS Collapsing Table border
We can collapse the border of table by using the border-collapse: collapse property of CSS, now you see the programming example how to collapse the table border.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML & CSS Table</title> <style type="text/css"> table, th, td{ border: 1px solid blue; } table{ border-collapse: collapse; } </style> </head> <body> <p>Table padding & text align</p> <table> <thead> <tr> <th>Roll No</th> <th>Name</th> <th>Subject</th> </tr> </thead> <tbody> <tr> <td>07</td> <td>Shubham</td> <td>BCA</td> </tr> <tr> <td>20</td> <td>Mahid</td> <td>BCA</td> </tr> <tr> <td>17</td> <td>Bipul</td> <td>BCA</td> </tr> <tr> <td>42</td> <td>sonu</td> <td>BCA</td> </tr> </tbody> </table> </body> </html> |
Output of programming example.
|
Above output of programming, you can see we collapsed the table border by using the CSS property.
CSS Table Padding & Text Alignment
To add space between a table sell’s border and content we need to use the padding CSS property. And we can also set the text alignment inside the table cell using the text-align property of CSS. Now you see below the programming example.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML & CSS Table</title> <style type="text/css"> table, th, td{ border: 2px solid blueviolet;} table{ border-collapse: collapse; th, td{ padding: 5px; text-align: center;} </style> </head> <body> <p>Table border collapse</p> <table> <thead> <tr> <th>Roll No</th> <th>Name</th> <th>Subject</th> </tr> </thead> <tbody> <tr> <td>07</td> <td>Shubham</td> <td>BCA</td> </tr> <tr> <td>20</td> <td>Mahid</td> <td>BCA</td> </tr> <tr> <td>17</td> <td>Bipul</td> <td>BCA</td> </tr> <tr> <td>42</td> <td>sonu</td> <td>BCA</td> </tr> </tbody> </table> </body> </html> |
Output of programming example.
 |
Above output of programming example, you can see the text align is center because we used text align center property and you also see the space between the table cell, here we used padding 5px.
CSS Table – Layout, Width and Color
We also set the Layout and width of table; it is the default value of table the width of table resizes according to their content size.
To set table layout we need to used table-layout property. Below example we used :nth-child class to individually select the <th> element.
It is generally a good idea to set the table-layout property to fix the table layout, we can set the size of column by setting the table’s heading width.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML & CSS Table</title> <style type="text/css"> table, th, td{ border: 2px solid brown; } td{color: blue;} th{color: red;} table{ border-collapse: collapse; table-layout: fixed; width: 100%; font-family: cursive; } th, td{ padding: 5px; text-align: center; } thead th:nth-child(1){width: 20%;} thead th:nth-child(2){width: 30%;} thead th:nth-child(3){width: 40%;} </style> </head> <body> <p>Table Layout & Width</p> <table> <thead> <tr> <th>Lorem Heading</th> <th>Lorem Heading</th> <th>Lorem Heading</th> </tr> </thead> <tbody> <tr> <td>Lorem15</td> <td>Lorem15</td> <td>Lorem15</td> </tr> </tbody> </table> </body> </html> |
Output of programming Example.
 |
Above output of programming example, you can see the color of table heading and table data is changes, and the width of all cells is different.
CSS Table Striped Rows
We can color the rows alternative to make table data easier to read and shown. To do this we need to select both even and odd rows than style them differently. Here we also used the :nth-child pseudo-class.
You see below the example how to do this and how looks table after doing this.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML & CSS Table</title> <style type="text/css"> table, th, td{ border: 2px solid green; } td{color: blue;} th{color: red; background-color: lightyellow} table{ border-collapse: collapse; width: 100%; font-family: cursive; } th, td{ padding: 5px; text-align: center; } tr:nth-child(odd){background: lightgreen;} tr:nth-child(even){background: lightskyblue;} </style> </head> <body> <p>Table Background Color</p> <table> <thead> <tr> <th>First Name</th> <th>Last Nmae</th> <th>Gender</th></tr> </thead> <tbody> <tr> <td>Shubham</td> <td>Verma</td> <td>Male</td> </tr> <tr> <td>Sunidhi</td> <td>Verma</td> <td>Female</td> </tr> <tr> <td>Mahid</td> <td>Sinha</td> <td>Male</td> </tr> <tr> <td>Samridhi</td> <td>Kumari</td> <td>Female</td> </tr> <tr> <td>Bipul</td> <td>Sahu</td> <td>Male</td> </tr> </tbody> </table> </body> </html> |
Output of programming example,
 |
Above you see the programming example of colorful table we used the even & odd property to use the color in table.
In this tutorial you learned the CSS Table Styling, how to style the table such as Table Border, Collapsing Border, Table Padding, Table content text alignment, Layout and Width of Table, Background and Color of table, and Striped Rows of table. I hope you read these all property and see the programming example of all properties. If you have any doubt in this CSS Table Tutorial, you ask in the comment section.
Also Read-
2 Comments
zoritoler imol · June 30, 2022 at 11:46 am
Merely wanna say that this is handy, Thanks for taking your time to write this.
Julienne Dukeshier · September 23, 2022 at 12:15 pm
Excellent read, I just passed this onto a friend who was doing some research on that. And he just bought me lunch as I found it for him smile Therefore let me rephrase that: Thanks for lunch!