CSS table provides better look and feel. There are various properties of CSS table that are given below.
- border
- border-collapse
- padding
- width
- height
- text-align
- color
- background-color
CSS Table Border
You can set the border of the table by using table tag th and td.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr><th>NAME</th><th>CLASS</th><th>ROLL NO</th></tr> <tr><td>Rahul</td><td>PHD</td><td>1</td></tr> <tr><td>James</td><td>MBBS</td><td>2</td></tr> <tr><td>Frank</td><td>MCA</td><td>3</td></tr> <tr><td>Jack</td><td>BCA</td><td>4</td></tr> </table> </body> </html> |
Collapse Table Borders
You can collapse the table border by using its property.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <h2> Example borders collapse</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Address</th> </tr> <tr> <td>ABC</td> <td>DEM</td> <td>Noida</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>Delhi</td> </tr> </table> </body> </html> |
CSS Table Padding
You can specify the padding of table header and table data by using CSS padding property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 7px; } </style> </head> <body> <table> <tr><th>Product_Name</th><th>Price(rs)</th><th>Total_Product</th></tr> <tr><td>TV</td><td>35,000</td><td>60</td></tr> <tr><td>Computer</td><td>56.000</td><td>80</td></tr> <tr><td>Laptop</td><td>3,500</td><td>82</td></tr> <tr><td>Cooler</td><td>20,000</td><td>72</td></tr> </table> </body> </html> |
Responsive table
A responsive table is used to create responsive table. It will display horizontal scroll bar if the screen is too small. You should use only overflow-x: auto properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} </style> </head> <body> <div style="overflow-x:auto;"> <table> <tr> <th>Reg No</th> <th>Fname</th> <th>Lname</th> <th>Address</th> <th>Pin</th> </tr> <tr> <td>1</td> <td>Jill</td> <td>Smith</td> <td>Noida</td> <td>50</td> </tr> <tr> <td>2</td> <td>Eve</td> <td>Jackson</td> <td>Delhi</td> <td>94</td> </tr> <tr> <td>3</td> <td>Adam</td> <td>Johnson</td> <td>Patna</td> <td>67</td> </tr> </table> </div> </body> </html> |
CSS Table Properties
| Property | Description |
|---|---|
| Border | It is used to set the border properties in one declaration. |
| border-collapse | It specifies whether table borders should be collapsed. |
| border-spacing | It specifies the distance between the borders of adjacent cells. |
| Caption-side | It specifies the placement of a table caption. |
| Empty-cells | It specifies the borders and background on empty cells in a table. |
| Table-layout | It is used to set the layout algorithm to be used for a table. |