---
layout: default
permalink: /tables
category: components
title: Tables
description: "Traditional HTML tables stylized from minimalist to extravagant colors."
---
{{page.title}} Component
{{page.description}}
Example:
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
Striped rows
Use striped to add sautéed lines alternating color.
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
Bordered table
Use bordered to add borders to all the borders of the table and cells.
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
Hovered table
Use hovered to add a scrolling effect in each row.
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
Combinations of tables
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
Colors
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}
thead
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
2 |
Willy |
Morrison |
willy@hotmail.com |
3 |
Mery |
Martinez |
mery@icloud.com |
{% highlight html %}
NO° |
First |
Last |
Email |
1 |
Efrain |
Peralta |
efraperalta@gmail.com |
{% endhighlight %}