Scribd
Upload
25 views18 pages

CSS Tables: by MD Hamza Shaikh B-53

The document provides examples of CSS code to style tables in different ways such as setting borders, widths, alignment, colors, and responsiveness. Code examples are given for setting solid borders on tables, making tables full-width, collapsing borders, setting widths and heights of rows and columns, aligning text, adding padding and borders to cells, striping rows, and setting background and text colors of header rows for styled tables.

Uploaded by

Never Settle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views18 pages

CSS Tables: by MD Hamza Shaikh B-53

The document provides examples of CSS code to style tables in different ways such as setting borders, widths, alignment, colors, and responsiveness. Code examples are given for setting solid borders on tables, making tables full-width, collapsing borders, setting widths and heights of rows and columns, aligning text, adding padding and borders to cells, striping rows, and setting background and text colors of header rows for styled tables.

Uploaded by

Never Settle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like