FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

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 »

Bordered Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="subhodaya-table subhodaya-border">
Try It Yourself »

Striped Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="subhodaya-table subhodaya-striped">
Try It Yourself »

Bordered 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">
Try It Yourself »

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

Example

<table class="subhodaya-table-all">
Try It Yourself »

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 »

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 »

Table Colors

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="subhodaya-table subhodaya-blue">
Try It Yourself »

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

Example

<tr class="subhodaya-hover-green">
Try It Yourself »

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 »

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 »