For basic styling add the base class .table to any <table>.
| # | Name | Company | Engine |
|---|---|---|---|
| 1 | Firefox | Mozilla | Gecko |
| 2 | Chrome | WebKit | |
| 3 | Internet Explorer | Microsoft | Trident |
| 4 | Safari | Apple | WebKit |
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | Name | Homepage | Description |
|---|---|---|---|
| 1 | Nginx | http://nginx.org | webserver |
| 2 | Apache | http://apache.org | webserver |
| 3 | Skype | http://www.skype.com | Messenger |
| 4 | Blender | http://www.blender.org | 3D-modeller |
Add .table-bordered for borders on all sides of the table and cells.
| # | Name | Homepage | Description |
|---|---|---|---|
| 1 | Tor | http://torproject.org | Anonymous network |
| 2 | Bitcoin | http://bitcoin.org | Anonymous money |
| 3 | I2P | http://www.i2p2.de | Anonymous network |
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | Name | Homepage | Description |
|---|---|---|---|
| 1 | OpenOffice | http://openoffice.org | Office suite |
| 2 | PyCharm | http://jetbrains.com | IDE |
| 3 | VirtualBox | http://oracle.com | Virtual machine |
| # | Company | Product | Homepage | Product description |
|---|---|---|---|---|
| 1 | Oracle | OracleDB | http://oracle.com | SQL server |
| 2 | RedHat | RedHat Advanced Server | http://redhat.com | Operation System |
| 3 | Microsoft | Windows | http://microsoft.com | Operation System |
| 4 | Apple | MacOSX | http://apple.com | Operation System |
| 5 | Adobe | Adobe Photoshop | http://adobe.com | Design suite |
| 6 | Corel | Corel Draw! | http://corel.com | Design suite |
| 7 | Chrome | http://google.com | Web-browser | |
| 8 | Mozilla | Firefox | http://mozilla.org | Web-browser |
.table-striped, .table-bordered, .table-hover and .table-heading
Also you can use contextual classes to color table rows or individual cells
| Column #1 | Column #2 | Column #3 | Column #4 | Column #5 |
|---|---|---|---|---|
| no | class | to | default | view |
| class | active |
to | color | row |
| class | primary |
to | color | row |
| class | success |
to | color | row |
| class | info |
to | color | row |
| class | warning |
to | color | row |
| class | danger |
to | color | row |
active class to color cell |
success class to color cell |
info class to color cell |
warning class to color cell |
danger class to color cell |