CSS Tables - Styling, Alignment, Fancy and Responsive Tables

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.

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.

table, th, td{
border: 1px solid #999;
}

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.

table, th, td{
border: 1px solid #999;
border-collapse: collapse;
}

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

th, td{
padding: 10px;
}

2.4. Border Spacing Property

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

table{
border-spacing: 20px;
}

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.

#table1 {
caption-side: bottom;
}

#table2 {
caption-side: top;
}

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.

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

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.

td, th{
text-align: right;
}

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.

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

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.

td{
border-bottom: 1px solid #3949ab;
}

4.2. Hoverable Tables

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

td:hover{
background: #3949ab33;
}
or
tr:hover{
background: #3949ab33;
}

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.

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

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.

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

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

</div>