Bootstrap Table Style
Table Tags
The following table lists the various elements supported by Bootstrap.
Tag | Description |
---|---|
<table> | Wrapping element for displaying data in a tabular format |
<thead> | Container element for table header rows (<tr>) to label table columns |
<tbody> | Container element for table rows (<tr>) in the body of the table |
<tr> | Container element for a set of table cells (<td> or <th>) that appears on a single row |
<td> | Default table cell |
<th> | Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead> |
<caption> | Description or summary of what the table holds, especially useful for screen readers |
Basic Table Style
If you want a nice, basic table style with just some light padding and horizontal dividers, add the base class of .table to any table. The basic layout has a top border on all of the <td> elements:
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from www.ja va 2s. c o m-->
<body style='margin: 20px;'>
<table class="table">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
For basic styling-light padding and only horizontal
dividers-add the base class .table
to any
<table>
.