CSS 

Tables

By Md Hamza Shaikh
B-53
 Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:

Example
table, th, td {
  border: 1px solid;
}
 Full-Width Table

Example
table {
  width: 100%;
}
 Collapse Table Borders

Example
table {
  border-collapse: collapse;
}
Example
table {
  border: 1px solid;
}
CSS Table Size

Example
table {
  width: 100%;
}
th {
  height: 70px;
}
Example
table {
  width: 50%;
}
 CSS Table Alignment
❮ Previ

Example
td {
  text-align: center;
}
 Example
 th {
  text-align: left;
}
 Vertical Alignment

Example
td {
  height: 50px;
  vertical-align: bottom;
}
CSS Table Style

Example
th, td {
  padding: 15px;
  text-align: left;
}
Try it Yourself »
Example
th, td {
  border-bottom: 1px solid #ddd;
}
Hoverable Table

Example
tr:hover {background-color: coral;}
Try it Yourself
Striped Tables

Example
tr:nth-child(even) {background-color: #f2f2f2;}
 Table Color

Example
th {
  background-color: #04AA6D;
  color: white;
}
CSS Responsive Table

Example
<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
THANK YOU
-Md Hamza Shaikh
B-53