50 CSS Table Examples

A curated collection of the top free CSS table code examples. These CSS tables utilize unique code implementations, designs, layouts, and colors schemes that make them suitable for use in many web development applications.

css tables featured

Hover to play
Title:

Table responsive

Author:

Pablo Garcia

Created on:

November 16, 2020

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Beautiful and responsive data table created using pure HTML and CSS. It has an amazing 3d hover effect when you hover on a table cell and also it will highlight the table row to cell.

Hover to play
Title:

Responsive table with detail view

Author:

Heather Buchel

Created on:

June 29, 2014

Made with:

HTML(Haml), SCSS, jQuery

Responsive:

Yes

Dependencies:

jQuery, Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, amazing responsive table with a detailed view is created using HTML, SCSS, and jQuery. When you click on select button, it will show more detail that overwrites the current page with sliding effects.

Hover to play
Title:

CSS table

Author:

Andrew Lohman

Created on:

October 03, 2017

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, beautiful data table is created using pure HTML and SCSS. When you hover over the table, it will expand the row with more information and also change the background color of the row. It uses CSS to show fade in and fade out effects that gives rich look to the web page.

Title:

Static HTML5 table

Author:

David Kern

Created on:

December 16, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A static HTML5 table is created using HTML and CSS. The table looks beautiful with white text and table border and there is a subsection also in the table.

Title:

HTML table and css table

Author:

Ahmad Awais

Created on:

January 21, 2022

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple static monthly saving data table is created using pure HTML and SCSS. It looks modern with an orange background color and a white table. You can put hover effects on a row by changing the actual color of the row background.

Hover to play
Title:

Responsive table with data tables

Author:

Sitepoint

Created on:

April 15, 2015

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, responsive table with a search and sort functionality is created using HTML, CSS, and jQuery. When you click on the table, heading row it will sort all rows according to that column and search functionality is given to search any desired record.

Hover to play
Title:

Slick tables

Author:

Zach Saffrin

Created on:

October 29, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated slick table is created using pure HTML and CSS. It looks great with a dark color scheme website. Hover effects are also given to the rows. Header fields are highlighted with the other color to differentiate between header and data rows.

Hover to play
Title:

Tooltip alternative

Author:

Bryan Levay

Created on:

May 23, 2014

Made with:

HTML(Pug), CSS(Stylus)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic and decent tooltip alternative table is created using HTML(Pug) and CSS(Stylus). You don’t have to show the tooltip of the cell that has more text, instead, it will expand that cell when you hover on it.

Hover to play
Title:

Heavy table

Author:

Victor Darras

Created on:

October 16, 2013

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful and modern table is created using HTML, CSS and, jQuery. You can edit the text of a cell. Field names of the table are highlighted.

Hover to play
Title:

Flat university timetable

Author:

Mark murray

Created on:

September 05, 2014

Made with:

HTML(Haml), SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A multicolor flat university timetable is created using HTML(Haml) and SCSS. It looks beautiful and easy to understand the schedule. When you hover over the cell, it will show the actual subject name on the tooltip with a smooth fade-in effect.

Hover to play
Title:

Table sorting with js and flexbox

Author:

Ana Tudor

Created on:

January 10, 2015

Made with:

HTML, SCSS, Javascript

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple plain table with a sorting functionality is created using HTML, SCSS, and Javascript. When you click on the table header, it will sort the rows by that column and also highlight that column with blue transparent color.

Hover to play
Title:

Pure css table highlight

Author:

Alexander Eriandsson

Created on:

March 22, 2016

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A gradient color transparent table is created using pure HTML and CSS. When you hover over the cell, it will show amazing highlighting with column, row, and cell itself. Table field names are also highlighted with the different background colors.

Hover to play
Title:

Fade and blur on hover data table

Author:

Jack Rugile

Created on:

July 31, 2012

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, classic data table with blurring effects is created using pure HTML and CSS. When you hover over the table, it will only show the row that is hovered while other rows are blurred. It is useful when the user wants to focus on a particular row and doesn’t want to see the others.

Hover to play
Title:

Responsive table with flexbox

Author:

Matys

Created on:

April 06, 2017

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A modern and clean-looking responsive table with flexbox is created using pure HTML and SCSS. Hovering effects are given on table header buttons.

Hover to play
Title:

Fixed table header

Author:

Nikhil Krishnan

Created on:

November 03, 2016

Made with:

HTML, CSS, jQuery

Responsive:

Yes

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, transparent table with scrolling functionality is created using HTML, CSS, and jQuery. The header fields are freezed to scroll the data and are highlighted with a different background color. It looks great with a gradient background.

Title:

CSS tricks responsive table

Author:

Alico

Created on:

April 11, 2016

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful responsive table is created using pure HTML and SCSS. It looks great with a white color scheme website. Field names of the table are also highlighted with a yellow background color.

Hover to play
Title:

Sortable tabular data

Author:

Jake’s Tuts

Created on:

January 10, 2014

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic data table with a sort functionality is created using HTML, CSS, and jQuery. When you click on the field name of the column it will sort all rows according to that column. The developer has used the table sorter library in jQuery for sorting.

Hover to play
Title:

Responstable

Author:

Jordy van Raaij

Created on:

February 19, 2014

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, responsive data table with row selecting option is created using HTML and SCSS. It is showing striped rows in the table with a different light background color.

Hover to play
Title:

Angular JS Filter

Author:

Jyothi B N

Created on:

September 30, 2016

Made with:

HTML, CSS, Angular.js

Responsive:

Yes

Dependencies:

Angular.js

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, classic data table with a searching and pagination functionality is created using HTML, CSS, and Angular.js. It looks simple but you can add background to the field row. It has also given amazing pagination functionality.

Hover to play
Title:

Angular material table

Author:

Mickael B.

Created on:

September 25, 2016

Made with:

HTML, CSS, Angular.js

Responsive:

Yes

Dependencies:

Angular.js

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, angular material table with hovering effects is created using HTML, CSS, and Angular.js. It also has searching functionality for the table. Pagination is also implemented for the table data.

Hover to play
Title:

Pricing table

Author:

Agustin Ortiz

Created on:

October 03, 2014

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, professional pricing tables with hover effects is created using pure HTML and CSS. It is responsive and attractive that shows all the plans of the website. When you hover over the table, it scales the button to give it a pop out effect.

Hover to play
Title:

Animated pricing table

Author:

Paulo Ribeiro

Created on:

October 27, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An interactive, animated pricing tables is created using HTML and SCSS. When you hover over the table, it will pop out the card so the user can focus and also slide the subscribe button to 100% width on the card that looks amazing.

Title:

Static pricing table

Author:

Trang Si Hung

Created on:

May 10, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple static pricing table is created using pure HTML and SCSS. For all the cards in the table, a border shadow is given. The cards are arranged such that it gives the 3D effect to price table.

Hover to play
Title:

Pricing plans

Author:

Florin Pop

Created on:

March 19, 2019

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic static pricing plan table with hover effect on the buttons is created using pure HTML and CSS. It looks great with a image background and also highlights the best price of the plan with a different dark look. The button shadows looks cool when you hover over the button.

Hover to play
Title:

Classic pricing tables

Author:

Aris Kuckovic

Created on:

April 27, 2019

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, simple pricing table in red and white theme is created using pure HTML and SCSS. When you hover over the buttons, it will change the background and text color of that button.

Hover to play
Title:

Adaptive pricing table

Author:

Alex

Created on:

April 23, 2021

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, modern and clean-looking pricing table is created using HTML and SCSS. When you hover over the table, it will pop out the card so the user can focus on the plan and also show a nice popup effect when you hover on the button. It also shows the spinning button highlighting the most popular plan.

Hover to play
Title:

Gradient pricing table

Author:

Jamal Hassonui

Created on:

February 14, 2018

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful pricing tables with a gradient background is created using pure HTML and CSS. When you hover over the table, it will scale the card to a bigger size so the user can focus. It looks great with the white color scheme website.

Hover to play
Title:

Pricing table UI design

Author:

Chouaib Belagoun

Created on:

October 03, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant pricing table on the green background is created using pure HTML and SCSS. When you hover on the button, it has a nice sliding effect that shows the cart icon.

Hover to play
Title:

Pure css pricing table

Author:

Travis Williamson

Created on:

April 11, 2018

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated, responsive and modern pricing table is created using pure HTML and CSS. It looks great with the white color scheme website. When you hover over the buttons in each plan, it highlights to brighter color to show the hover effect.

Hover to play
Title:

Pricing table with button hover effects

Author:

Aladin Bensassi

Created on:

August 23, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, amazing pricing table with gradient background is created using pure HTML and CSS. It has shown the best pricing plan with different background so as to catch user attention. When you hover over the button, it expands with a smooth animating effects.

Hover to play
Title:

Flat table

Author:

Leonardo Santo

Created on:

August 24, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple flat table is created using pure HTML and CSS. The table row is also having modify and delete icons. When you hover over the edit and delete icons, it will be enabled and filled with a blue color. When you hover over the table rows, it will highlight the row with a beige background.

Title:

CSS responsive table layout

Author:

Luke Peters

Created on:

November 27, 2017

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A static, simple and responsive table layouts are created using HTML and Sass. There is a striped row pattern used for all the tables. It is responsive for all sizes of devices and also changes the shape of a table in mobile devices.

Hover to play
Title:

CSS table with checkbox

Author:

Robert Lyall

Created on:

July 02, 2015

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A static, simple table layout with a checkbox is created using pure HTML and SCSS. It is responsive and looks great for a web page with white background.

Hover to play
Title:

Responsive and accessible table

Author:

Andrew Mosby

Created on:

September 30, 2018

Made with:

HTML, CSS(Less)

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, responsive table layout is created using HTML and CSS. Field names of the rows are highlighted with different backgrounds and also a stripped row pattern is given in the table.

Title:

Treehouse more table tips

Author:

John Mutch

Created on:

January 12, 2015

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish, modern and simple-looking table layout is created using pure HTML and CSS. Field names of the row are highlighted with the gray background color. Also, the table has stripped row patterns giving a rich look to the web page.

Title:

Dynamic background tiles

Author:

Andrea Mignolo

Created on:

April 17, 2014

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful dynamic background tiles table layout is created using pure HTML and SCSS. It is responsive and looks clean and modern to differentiate between the columns of data.

Hover to play
Title:

Data table

Author:

Alassetter

Created on:

September 10, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic and stylish data table layout is created using pure HTML and CSS. When you hover over the table, it will highlight rows with the gray background. It also changes the text color to give a rich look to the table data.

Title:

Collapsible responsive table

Author:

Geoff Yuen

Created on:

March 25, 2014

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A responsive table layout is created using HTML and SCSS. The table collapses into a "list" on small screens. Headers are pulled from data attributes. Field names are highlighted with bold and yellow colors.

Hover to play
Title:

Sticky table headers

Author:

Wolf Wortmann

Created on:

July 13, 2020

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful table layout with different color sticky table headers is created using pure HTML and CSS. It has a sticky table header in multiple colors that pushes one other to show a beautiful circular effect.

Title:

Simple responsive table in css

Author:

Matt Smith

Created on:

August 05, 2021

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A static and simple but responsive table layout is created using pure HTML and CSS. It is suited with white color scheme websites if you want a plain design. It will change the row into vertical cards on mobile devices.

Hover to play
Title:

Modern table

Author:

Phelipe M Peres

Created on:

September 10, 2013

Made with:

HTML, SCSS, jQuery

Responsive:

No

Dependencies:

Sass, jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, beautiful table layout is created using HTML, SCSS, and jQuery. When you hover over the table rows, it will highlight the row with the beige background color. Box shadow is also given so as to give a 3D look to the table.

Title:

Responsive tables using LI

Author:

Faiz Ahmed

Created on:

January 11, 2018

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic, responsive table layout is created using HTML and SCSS. The field name row is highlighted with a gray background. Each row has a cell spacing between them and shadow effect is given to give an amazing look to table data.

Title:

Responsive table html and css only

Author:

Flor Antara

Created on:

June 17, 2019

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decent, responsive and clean table layout is created using pure HTML and CSS. The header row is highlighted with a different color layout. On mobile devices, the header row is fixed to the left and the content is scroll-able horizontally.

Title:

Flat css price table

Author:

Narcisse

Created on:

April 18, 2014

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, static price table layout with dark color scheme is created using pure HTML and CSS. It looks great on the white background, highlighting the Plus plan.

Hover to play
Title:

Featured pricing table

Author:

Daniel Riemer

Created on:

September 13, 2013

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful featured pricing table layout is created using pure HTML and CSS. The best plan is highlighted with a red banner that will catch the user's attention.

Hover to play
Title:

Elegant pricing table

Author:

Joseph Victory

Created on:

May 13, 2020

Made with:

HTML, CSS, jQuery

Responsive:

No

Dependencies:

jQuery

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, beautiful pricing table with gradient background is created using HTML, CSS, and jQuery. The font in the headers has more weight so it will catch user attention more.

Title:

Static pricing table using scss

Author:

Chris Frees

Created on:

December 04, 2012

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple pricing table layout is created using pure HTML and SCSS. The best plan is highlighted with purple color so it will catch more user attention. You can add hover effects on the button so it will look interactive.

Hover to play
Title:

Pricing table with hover effect

Author:

Mike Torosian

Created on:

February 24, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive pricing table layout with gradient background is created using pure HTML and SCSS. When you hover over the table, it will scale the button larger giving the pop out effect and also highlight the border and the button with an orange background with smooth animation.

Hover to play
Title:

Comparison table

Author:

Shane hicks

Created on:

May 11, 2017

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, comparison table layout is created using pure HTML and CSS. The best plan is highlighted using a dark color scheme so it will catch more user attention. There are hover effects on each “sign me up” button.

Hover to play
Title:

Table row dismiss using angular

Author:

Chris Geirman

Created on:

November 18, 2014

Made with:

HTML, CSS, Angular.js

Responsive:

No

Dependencies:

Angular.js

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An angular data table layout with removing functionality is created using HTML, CSS, and Angular.js. When you click on the remove button, it will show a message that the row was removed successfully. When you close that message, row will disappear from the table.