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 With Gray Header
| 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 With Blue Header
| 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 With Red Header
| 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 With Green Header
| 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. |