Table

Default

The <div> before the <div class='table-color-container'> defines the width you want the table to be.

To change color change <div class='table-color-container'> and <table class='table-color'>

Colors:

table-green-container

and

table-green
table-red-container

and

table-red
table-orange-container

and

table-orange
table-yellow-container

and

table-yellow
table-blue-container

and

table-blue
table-purple-container

and

table-purple
table-gray-container

and

table-gray
table-light-container

and

table-light

Example:

#	Name	Last Name	User	E-mail
1	James	Miller	@james	james@mail.com
2	Jose	Erazo	@jose	jose@mail.com
3	Larry	Jones	@larry	larry@mail.com
4	Marco	Perez	@marco	marco@mail.com

      
      <!– In this div put the width –>”
        <div class="w-1/2">
          <div class="table-gray-container">
            <table class="table-gray">
              <thead>
                <tr class="table-title">
                  <th>#</th>
                  <th>Name</th>
                  <th>Last Name</th>
                  <th>User</th>
                  <th>E-mail</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>James</td>
                  <td>Miller</td>
                  <td>@james</td>
                  <td>james@mail.com</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jose</td>
                  <td>Erazo</td>
                  <td>@jose</td>
                  <td>jose@mail.com</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry </td>
                  <td>Jones</td>
                  <td>@larry</td>
                  <td>larry@mail.com</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>Marco</td>
                  <td>Perez</td>
                  <td>@marco</td>
                  <td>marco@mail.com</td>
                </tr>
              </tbody>
            </table>
        </div>