TheBestTutorials.css Tables
Displaying a Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Bo | Nilsson | 50 |
Mike | Ross | 35 |
Basic Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Try It Yourself »
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Bordered Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Striped Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Bordered Striped Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Border Around a Striped Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-border">
Try It Yourself »
Table All
If you want to use all of the classes above, you can use TheBestTutorials-table-all (combines borders, stripes, padding, etc).
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Flipping the Stripes
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
To flip the stripes, just add <thead> around the table header:
Example
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Try It Yourself »
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Table with a Colored Heading
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<thead>
<tr class="subhodaya-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Try It Yourself »
<tr class="subhodaya-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Table Colors
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Hoverable Table
The TheBestTutorials-hoverable class adds a grey background color on mouse-over:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-border
subhodaya-hoverable">
Try It Yourself »
If you want a specific hover color, add any of the TheBestTutorials-hover-classes to each <tr> element:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Table as a Card
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-card-4">
Try It Yourself »
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.
Try to resize the screen to see the effect.
First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Example
<div class="subhodaya-responsive">
<table class="subhodaya-table subhodaya-bordered subhodaya-striped">
... table content ...
</table>
</div>
Try It Yourself »
<table class="subhodaya-table subhodaya-bordered subhodaya-striped">
... table content ...
</table>
</div>
Tiny Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-tiny">
Try It Yourself »
Small Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-small">
Try It Yourself »
Large Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-large">
Try It Yourself »
XLarge Table
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-xlarge">
Try It Yourself »
XXLarge Table
Name | Points |
---|---|
Jill Smith | 50 |
Eve Jackson | 94 |
Adam Johnson | 67 |
Bo Nilson | 35 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-xxlarge">
Try It Yourself »
XXXLarge Table
Name | Points |
---|---|
Smith | 50 |
Jackson | 94 |
Johnson | 67 |
Nilson | 35 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-xxxlarge">
Try It Yourself »
Jumbo Table
Name | Points |
---|---|
Smith | 50 |
Jackson | 94 |
Johnson | 67 |
Nilson | 35 |
Example
<table class="subhodaya-table subhodaya-bordered subhodaya-striped subhodaya-jumbo">
Try It Yourself »