Table
Simple Table
This is the bare bone of tables. Formed by <table> tag. Further styling and modification is allowed but should be consistent with the overall system. Selected row should have class .selected
|
|
First Name | Last Name | Username |
|---|---|---|---|
|
|
John | Tight | john.tight357 |
|
|
Pete | Skinny | pete_skeleton |
|
|
Walter | White | wwhite.246 |
|
|
John | Tight | john.tight357 |
|
|
John | Tight | john.tight357 |
<table class="table">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>First name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>John</td>
<td>Tight</td>
<td>john.tight357</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Walter</td>
<td>White</td>
<td>wwhite.246</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Pete</td>
<td>Skinny</td>
<td>pete_skeleton</td>
</tr>
</tbody>
</table>
Table-like with DIV
Sometimes, using <div> might be needed to display a table as it makes it easier to control inner elements.
Fist Name
Last Name
Username
John
Tight
john.tight357
Pete
Skinny
pete_skeleton
Walter
White
wwhite.246
<div class="data-table">
<!-- Data-table head -->
<div class="row -head">
<div class="cell">...</div>
</div>
<!-- Other Data-table rows -->
<div class="row selected">...</div>
<div class="row">...</div>
</div>