Bootstrap Tables
Bootstrap 3 Tutorial » Bootstrap Tables
Add the .table class to any <table> element to apply the basic Bootstrap 3 styles for tables. The result is a table with very subtle padding and with separating lines only in the rows.
It may seem absurd to have to add the .table class for tables to be styled, but note that the <table> element is used for many other things that are not necessarily tables, such as calendars and date pickers .
.table class adds basic styling to a table:
Syntax table:
...
</table>
Parameters: This method accepts five parameters:
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>Doene</td>
<td>chrisd@example.com</td>
</tr>
<tr>
<td>George</td>
<td>Moene</td>
<td>georgem@example.com</td>
</tr>
<tr>
<td>Anne</td>
<td>Daley</td>
<td>anned@example.com</td>
</tr>
</tbody>
</table>
| Firstname | Lastname | |
|---|---|---|
| Chris | Doene | chrisd@example.com |
| George | Moene | georgem@example.com |
| Anne | Daley | anned@example.com |
Striped Rows
The .table-striped class adds zebra-stripes to a table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>Doene</td>
<td>chrisd@example.com</td>
</tr>
<tr>
<td>George</td>
<td>Moene</td>
<td>georgem@example.com</td>
</tr>
<tr>
<td>Anne</td>
<td>Daley</td>
<td>anned@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Semantic (Contextual Classes) tables - example
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):
The semantic (Contextual) CSS classes explained in the previous chapter for text can also be applied to rows and cells in a table:
.active, applies the hover state color to the row or cell to make it appear to be active.
.success, indicates that the result of some operation has been a success.
.warning, warns the user that some circumstance has occurred that may require their attention.
.danger, indicates that an action is negative or potentially dangerous.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap3 Contextual Classes Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
<h2>Bootstrap3 Contextual Classes Example</h2>
<p>Contextual classes Bootstrap3 can be used to color table rows or table cells.</p>
<table class="table">
<thead>
<tr>
<th>First_name</th>
<th>Last_name</th>
<th>E_mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jorty</td>
<td>Soane</td>
<td>jsoane@e_mail.com</td>
</tr>
<tr class="success">
<td>Sone</td>
<td>Doene</td>
<td>sdoene@example.com</td>
</tr>
<tr class="danger">
<td>Seatar</td>
<td>Moere</td>
<td>seatam@agernic.com</td>
</tr>
<tr class="info">
<td>Ninna</td>
<td>Danaey</td>
<td>ndanae@tutorial.com</td>
</tr>
<tr class="warning">
<td>Wassa</td>
<td>Refiles</td>
<td>va_re@example.com</td>
</tr>
<tr class="active">
<td>Anna</td>
<td>Dorae</td>
<td>adorae@example.com</td>
</tr>
</tbody>
</table>
</div></body>
</html>
Bootstrap tables theme, responsive, pagination, styles, css, size, colors, sortable, table column width template, no border, filter, sort, row height, react
Bootstrap tables theme, responsive, pagination, styles, css, size, colors, sortable, table column width template, no border, filter, sort, row height, react
Bootstrap Tables - bootstrap
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.