CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Styling Tables

This chapter will teach you how to style an HTML table using CSS:

Name City Phone
Vishal Delhi 999945850
Espy Mizoram 8425896528
Mudit Jaipur 9858621233
Ankit Mumbai 9560478555
Nancy Delhi 9210154545

Table Borders

The border property is the best way to define the borders for the tables.

The example below specifies a black border for <table>, <th>, and <td> elements:

Firstname Lastname
Vishal Choudhary
Ankit Choudhary
Run code

Notice that the table in the example above has double borders. This is because the <table>, <th>, and <td> elements have separate borders. But, you can collapse the separate table borders into one by using the border-collapse property.


Collapsing Table Borders

The border-collapse property specifies whether the cell borders of a table are collapsed in a single border or separated.

Firstname Lastname
Vishal Choudhary
Ankit Choudhary
Run code

If you only want a single border around the table, only specify the border property for <table>.

Firstname Lastname
Vishal Choudhary
Ankit Choudhary
Run code

Full Width Table

Use width property to define the width of a table.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Run code

Horizontal Alignment

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

Use text-align property sets the horizontal alignment (like left, right, or center) of the content in <th>.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Run code

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Run code

Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Espy Kinase 9210154545
Run code

Hoverable Table

Use the :hover pseudo-class on <tr> to highlight table rows on mouse over.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Espy Kinase 9210154545
Run code

Striped Table

For zebra-striped tables, use the :nth-child() pseudo-class and add a background-color to table rows.

Firstname Lastname Phone
Vishal Choudhary 999945850
Ankit Choudhary 9560478555
Espy Kinase 9210154545
Tarush Balodhi 8425896528
Manish Bhosle 9858621233
Run code

Setting table-layout

The table-layout property specifies the algorithm used to lay out table cells, rows, and columns.

Run code

Controlling the Position of Table Caption

The caption-side property specifies the placement of a table <caption>.

Run code

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Add a container element (like <div>) with overflow-x: auto; around the <table> element to make it responsive:

NameCityPhonePointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPointsPoints
VishalDelhi9999858565050125550168510010019505050
RohitDelhi955514586805050715010501003950525050
AmitDelhi92915881645502503509050605050419950
Run code

CSS Table properties

Property Description
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table