CSS Table
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<!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<!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.<!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.<!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. |