Tables
Simple CSS for simple tables
Default table
To style an HTML table, just add the 'table' classname. The class normalizes the table and makes it look very clean
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Twitter</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abraham Kuri</td>
<td>@kurenn</td>
</tr>
<tr>
<td>2</td>
<td>Icalia Labs</td>
<td>@icalialabs</td>
</tr>
<tr>
<td>3</td>
<td>Codeando Mexico</td>
<td>@codeandomexico</td>
</tr>
</tbody>
</table>
Condensed table
A condensed table just look a little bit smaller by just reducing the padding on the headers a table data tags.
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Twitter</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abraham Kuri</td>
<td>@kurenn</td>
</tr>
<tr>
<td>2</td>
<td>Icalia Labs</td>
<td>@icalialabs</td>
</tr>
<tr>
<td>3</td>
<td>Codeando Mexico</td>
<td>@codeandomexico</td>
</tr>
</tbody>
</table>
Striped table
Large tables are easier to read when some rows are more visible than others. To do so just add the 'table-striped' classname to the table
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
#
Name
Twitter
1
Abraham Kuri
@kurenn
2
Icalia Labs
@icalialabs
3
Codeando Mexico
@codeandomexico
Bordered table
In order to add vertical and horizontal borders to all cells in a table, just add the 'table-bordered' classname
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
#
Name
Twitter
1
Abraham Kuri
@kurenn
2
Icalia Labs
@icalialabs
3
Codeando Mexico
@codeandomexico
All together
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
#
Name
Twitter
1
Abraham Kuri
@kurenn
2
Icalia Labs
@icalialabs
3
Codeando Mexico
@codeandomexico
Responsive Tables
Thanks to the Zurb guys we have responsive tables ready to rock, just add the 'responsive' classname to the table
| # | Name | Github | Website | |
|---|---|---|---|---|
| 1 | Abraham Kuri | @kurenn | https://github.com/kurenn | http://kurenn.net |
| 2 | Icalia Labs | @icalialabs | https://github.com/IcaliaLabs | http://icalialabs.com |
| 3 | Codeando Mexico | @codeandomexico | https://github.com/CodeandoMexico | http://codeandomexico.org |
#
Name
Twitter
Github
Website
1
Abraham Kuri
@kurenn
https://github.com/kurenn
http://kurenn.net
2
Icalia Labs
@icalialabs
https://github.com/IcaliaLabs
http://icalialabs.com
3
Codeando Mexico
@codeandomexico
https://github.com/CodeandoMexico
http://codeandomexico.org
Pst, here is a bonus
You can have colorful table rows by adding the correct class, watch!. Just a gotcha, don't add the 'table-striped' classname
| # | Name | |
|---|---|---|
| 1 | Abraham Kuri | @kurenn |
| 2 | Icalia Labs | @icalialabs |
| 3 | Codeando Mexico | @codeandomexico |
#
Name
Twitter
1
Abraham Kuri
@kurenn
2
Icalia Labs
@icalialabs
3
Codeando Mexico
@codeandomexico