Tables

There are still many uses for tables in websites, but normally for displaying data type content. However, you can still get creative with tables and have an amazing page when displaying theme, especially when they are styled like you see below. Each one uses a class to achieve the styles shown.

Table Class: table

# First Name Last Name Position
1 Sarah Lorem Marketing Director
2 Jeremy Curabitur Product Development
3 Leanne Consectetur Business Coach

Table Class: table-bordered

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.
MySQL Cras aliquam ipsum tellus, ac mattis ligula ullamcorper luctus.

Table Class: table-bordered table-striped

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.
MySQL Cras aliquam ipsum tellus, ac mattis ligula ullamcorper luctus.

Table Class: table-grey

With tables, you can put almost anything in them, such as this example where I added progress bars.

Skills Description
HTML
72% HTML
PHP
63% PHP
CSS
80% CSS

Table Class: table-aqua

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Class: table-brown

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Class: table-tan

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Class: table-red

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Class: table-orange

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Class: table-green

Skills Description
HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.

Table Coloured Column (No Header)

This table gives you an option without the top header row, but gives you a column with a background colour using the <col style="background-color: #eff0f0;" /> option. In this case, I used it for the first column.

HTML In pulvinar erat quis placerat aliquam. Aliquam sed urna massa. Donec eleifend nisl at eros tempus.
PHP Vestibulum pharetra molestie justo, eget venenatis nulla dictum in. Ut in augue nibh.
CSS Nam nec varius eros. Ut nec consectetur nisl. Pellentesque eu gravida eros. Praesent pellentesque tellus.
MySQL Cras aliquam ipsum tellus, ac mattis ligula ullamcorper luctus.