1. What are CSS Tables?

CSS tables assist in defining the data in tabular form in rows and columns. Also, some styles applied to enhance their beauty and make them easily understandable. Actually, the look of an HTML table is marginally improved by applying styles.

Example

Customer Products Address
Gregory A Washington Pasta and Noodles 998 George Street, Florida
Veronika Tea, Bread, and Milk 352 Sundown Lane, Iowa
Alfred Cereal and Muesli 4528 Baker Avenue, Dallas
Christi J Herman Dried Fruits, Nuts and Seeds 1209 Ryder Avenue, Washington

Try in CodeLab

Tutorial Contents:

  1. Intro To CSS Tables
  2. CSS Tables Styling
  3. Data Alignment in Tables Using CSS
  4. Fancy CSS Tables
  5. Responsive Tables

2. How To Style CSS Tables?

Interestingly, CSS element selectors help in styling the HTML tables according to the requirement. Actually, CSS styles help in styling tables infinitely with CSS colors, borders, padding, margin, etc

2.1. Table Border

Basically, CSS border property aid in specifying the borders of a table. This property is helpful to make borders for table, thead, tbody, tr, td elements.
In below example, both table has double border because table and its elements th, td have own borders.

Example

Customer State
Gregory Florida
Veronika Iowa
Alfred Texas
Christi Washington
table, th, td{
border: 1px solid #999;
}

Try in CodeLab

2.2. Collapse Border Property

If a table with double borders is not required, border-collapse property collapses the borders into each other. Try in codelab to understand more effectively.

Example

Customer State
Gregory Florida
Veronika Iowa
Alfred Texas
Christi Washington
table, th, td{
border: 1px solid #999;
border-collapse: collapse;
}

Try in CodeLab

2.3. Cellpadding Property

The space between the cell text and the border can be set by CSS padding property. Actually, CSS Padding just makes the text more readable or legible. Visit Complete CSS padding tutorial

Example

First Name Last Name
Gregory Washington
John Doe
Emily Ment
Bily Hogg
th, td{
padding: 10px;
}

Try in CodeLab

2.4. Border Spacing Property

Clearly, the CSS border-spacing property is used to create spacing between table cells.

Note:

Importantly, the border-collapse and border-spacing properties cannot be used simultaneously.

Example

table{
border-spacing: 20px;
}

Try in CodeLab

2.5. Adding Caption

Since the caption element specifies the caption for HTML tables. Therefore, CSS defines caption position using the caption-side property. Usually, the caption on the top side is the default position.

Example

#table1 {
caption-side: bottom;
}

#table2 {
caption-side: top;
}

Try in CodeLab

2.6. Width and Height of Tables

width and height properties define the table width and height respectively. Also, these can be defined in pixels, centimeters, percentages, etc.

Example

table {
width: 100%;
}
th{
height: 100px;
}

Try in CodeLab

3. CSS Tables – Data Alignment

Additionally, CSS styles are also helpful in data alignment vertically or horizontally.

3.1. Horizontal Alignment

CSS text-align property is used to align the content in table <td> or <th> elements. The available postions are left, right or center.
By default, the data in <th> is aligned center and the data in <td> is aligned on left side.

Example

td, th{
text-align: right;
}

Try in CodeLab

3.2. Vertical Alignment

CSS vertical-align property aligns the content in table <td> or <th> elements. The positions are top, middle or bottom.
By default, the data in <th> and <td> is at middle position.

Example

td{
height: 50px;
vertical-align: top;
}

Try in CodeLab

4. How to Create Fancy Tables Using CSS Styles?

Additionally, CSS styles are helpful in making the tables more fancy and beautiful. Look at some examples below and experience in codelab.

4.1. Horizontal Dividers

CSS border-bottom property creates horizontal dividers below <tr> or other elements.

Example

Customer Country Order Amount
Henery Xeus Poland $20000
John Wick Hungry $12000
Emily Hughan Canada $123000
Bily Bordeaux Ireland $7700
td{
border-bottom: 1px solid #3949ab;
}

Try in CodeLab

4.2. Hoverable Tables

CSS: hover property can make the table rows or data cells hoverable. Find a complete tutorial about CSS Pseudo Elements.

Example

Customer Country Order Amount
Max Phil United Kingdom $1000
Dublin Newad Mexico $12900
Brett Pk United States $32100
Kailie Hen Brazil $77300
td:hover{
background: #3949ab33;
}
or
tr:hover{
background: #3949ab33;
}

Try in CodeLab

4.3. Striped Tables

Again, the CSS Pseudo element helps in making striped tables. For this purpose, CSS:nth-child selector is used. Basically, the selector selects the odd or even rows and then changes the background color.

Example

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

Try in CodeLab

5. How to Make Responsive Tables in CSS?

Sometimes, the data of a table get too wide and expands laterally on the screen. This data, however, is not fairly accessible on a mobile screen. In that case, CSS responsive tables add a tiny horizontal scrollbar to increase its accessibility. Therefore, CSS responsive tables are quite handy to make mobile-ready tables. overflow-x property is used to make a table responsive.

Example

<div style=”overflow-x:auto;”>

<table>
… table content …
</table>

</div>

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us