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 |
|
PHP |
|
CSS |
|
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. |