Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Context Classes
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>row 1 / column 1</th>
<th>row 1 / column 2</th>
<th>row 1 / column 3</th>
<th>row 1 / column 4</th>
</tr>
</thead>
<tbody>
<tr class='success'>
<td>row 2 / column 1</td>
<td>row 2 / column 2</td>
<td>row 2 / column 3</td>
<td>row 2 / column 4</td>
</tr>
<tr class='info'>
<td>row 3 / column 1</td>
<td>row 3 / column 2</td>
<td>row 3 / column 3</td>
<td>row 3 / column 4</td>
</tr>
<tr class='warning'>
<td>row 4 / column 1</td>
<td>row 4 / column 2</td>
<td>row 4 / column 3</td>
<td>row 4 / column 4</td>
</tr>
<tr class='danger'>
<td>row 5 / column 1</td>
<td>row 5 / column 2</td>
<td>row 5 / column 3</td>
<td>row 5 / column 4</td>
</tr>
</tbody>
</table>
</div>
1. Ausgabe für Context Classes
| row 1 / column 1 | row 1 / column 2 | row 1 / column 3 | row 1 / column 4 |
|---|---|---|---|
| row 2 / column 1 | row 2 / column 2 | row 2 / column 3 | row 2 / column 4 |
| row 3 / column 1 | row 3 / column 2 | row 3 / column 3 | row 3 / column 4 |
| row 4 / column 1 | row 4 / column 2 | row 4 / column 3 | row 4 / column 4 |
| row 5 / column 1 | row 5 / column 2 | row 5 / column 3 | row 5 / column 4 |
2. Code für Rowspan Attribute
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>row 1 / column 1</th>
<th>row 1 / column 2</th>
<th>row 1 / column 3</th>
<th>row 1 / column 4</th>
</tr>
</thead>
<tbody>
<tr class='success'>
<td>row 2 / column 1</td>
<td>row 2 / column 2</td>
<td>row 2 / column 3</td>
<td>row 2 / column 4</td>
</tr>
<tr class='info'>
<td>row 3 / column 1</td>
<td>row 3 / column 2</td>
<td>row 3 / column 3</td>
<td rowspan='2'>row 3 / column 4</td>
</tr>
<tr class='warning'>
<td>row 4 / column 1</td>
<td>row 4 / column 2</td>
<td>row 4 / column 3</td>
</tr>
<tr class='danger'>
<td>row 5 / column 1</td>
<td>row 5 / column 2</td>
<td>row 5 / column 3</td>
<td>row 5 / column 4</td>
</tr>
</tbody>
</table>
</div>
2. Ausgabe für Rowspan Attribute
| row 1 / column 1 | row 1 / column 2 | row 1 / column 3 | row 1 / column 4 |
|---|---|---|---|
| row 2 / column 1 | row 2 / column 2 | row 2 / column 3 | row 2 / column 4 |
| row 3 / column 1 | row 3 / column 2 | row 3 / column 3 | row 3 / column 4 |
| row 4 / column 1 | row 4 / column 2 | row 4 / column 3 | |
| row 5 / column 1 | row 5 / column 2 | row 5 / column 3 | row 5 / column 4 |
3. Code für Colspan Attribute
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>row 1 / column 1</th>
<th>row 1 / column 2</th>
<th>row 1 / column 3</th>
<th>row 1 / column 4</th>
</tr>
</thead>
<tbody>
<tr class='success'>
<td>row 2 / column 1</td>
<td>row 2 / column 2</td>
<td>row 2 / column 3</td>
<td>row 2 / column 4</td>
</tr>
<tr class='info'>
<td>row 3 / column 1</td>
<td>row 3 / column 2</td>
<td>row 3 / column 3</td>
<td>row 3 / column 4</td>
</tr>
<tr class='warning'>
<td>row 4 / column 1</td>
<td>row 4 / column 2</td>
<td align='center' colspan='2'>row 4 / column 3</td>
</tr>
<tr class='danger'>
<td>row 5 / column 1</td>
<td>row 5 / column 2</td>
<td>row 5 / column 3</td>
<td>row 5 / column 4</td>
</tr>
</tbody>
</table>
</div>
3. Ausgabe für Colspan Attribute
| row 1 / column 1 | row 1 / column 2 | row 1 / column 3 | row 1 / column 4 |
|---|---|---|---|
| row 2 / column 1 | row 2 / column 2 | row 2 / column 3 | row 2 / column 4 |
| row 3 / column 1 | row 3 / column 2 | row 3 / column 3 | row 3 / column 4 |
| row 4 / column 1 | row 4 / column 2 | row 4 / column 3 | |
| row 5 / column 1 | row 5 / column 2 | row 5 / column 3 | row 5 / column 4 |
4. Code für Hover Rows
<div class='table-responsive'>
<table class='table table-hover'>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
4. Ausgabe für Hover Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
5. Code für Bordered Table
<div class='table-responsive table-bordered'>
<table class='table'>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
5. Ausgabe für Bordered Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
6. Code für Striped Rows
<div class='table-responsive'>
<table class='table table-striped'>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
6. Ausgabe für Striped Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
7. Code für Basic Table
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
7. Ausgabe für Basic Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |