Building some nice looking html tables for everyday use

Well, I'm not 100% sure about the "nice" part, but we are a pragmatic bunch and we'll use these as baseline to build something better than what the browser brings by default.

To get the actual css for each table, inspect this page and click on the tables.css file, that's gonna be easier for you and for me since I didn't add add the css as code blocks here.

The content

We'll use a generic table with some hardcoded data about Bands.

          
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Founded</th>
      <th>Members</th>
      <th>Genre</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Metallica</td>
      <td>1981</td>
      <td>5</td>
      <td>Heavy Metal</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Accept</td>
      <td>1976</td>
      <td>4</td>
      <td>Heavy Metal</td>
      <td>no</td>
    </tr>
    <tr class="active-now">
      <td>W.A.S.P</td>
      <td>1982</td>
      <td>5</td>
      <td>Heavy Metal</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Power Trip</td>
      <td>2008</td>
      <td>5</td>
      <td>Thrash Metal</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Motley Crue</td>
      <td>1981</td>
      <td>4</td>
      <td>Heavy/Glam Rock</td>
      <td>no</td>
    </tr>
    <tr>
      <td>World of Pain</td>
      <td>2009</td>
      <td>5</td>
      <td>Hardcore Heavy Metal</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Bodysnatcher</td>
      <td>TBD</td>
      <td>4</td>
      <td>Deathcore Metal</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Valley of the Sun</td>
      <td>2010</td>
      <td>4</td>
      <td>Stoner Rock</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Desolated</td>
      <td>2007</td>
      <td>5</td>
      <td>Hardcore Heavy Metal</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>

Example 1

Orange-ish with collapsed borders.

Name Founded Members Genre Active
Metallica 1981 5 Heavy Metal yes
Accept 1976 4 Heavy Metal no
W.A.S.P 1982 5 Heavy Metal no
Power Trip 2008 5 Thrash Metal no
Motley Crue 1981 4 Heavy/Glam Rock no
World of Pain 2009 5 Hardcore Heavy Metal no
Bodysnatcher TBD 4 Deathcore Metal yes
Valley of the Sun 2010 4 Stoner Rock yes
Desolated 2007 5 Hardcore Heavy Metal yes

Example 2

Green with some nice active-row highlightning and box shadows.

Name Founded Members Genre Active
Metallica 1981 5 Heavy Metal yes
Accept 1976 4 Heavy Metal no
W.A.S.P 1982 5 Heavy Metal no
Power Trip 2008 5 Thrash Metal no
Motley Crue 1981 4 Heavy/Glam Rock no
World of Pain 2009 5 Hardcore Heavy Metal no
Bodysnatcher TBD 4 Deathcore Metal yes
Valley of the Sun 2010 4 Stoner Rock yes
Desolated 2007 5 Hardcore Heavy Metal yes

Example 3

Minimalistic with red highlightning (I'd agree this last bit wasn't necessary, but it's easy to remove, just look for the `active-now` css class.

Name Founded Members Genre Active
Metallica 1981 5 Heavy Metal yes
Accept 1976 4 Heavy Metal no
W.A.S.P 1982 5 Heavy Metal no
Power Trip 2008 5 Thrash Metal no
Motley Crue 1981 4 Heavy/Glam Rock no
World of Pain 2009 5 Hardcore Heavy Metal no
Bodysnatcher TBD 4 Deathcore Metal yes
Valley of the Sun 2010 4 Stoner Rock yes
Desolated 2007 5 Hardcore Heavy Metal yes

Example 4

A blue one, I guess we can call this one "Smurf".

Name Founded Members Genre Active
Metallica 1981 5 Heavy Metal yes
Accept 1976 4 Heavy Metal no
W.A.S.P 1982 5 Heavy Metal no
Power Trip 2008 5 Thrash Metal no
Motley Crue 1981 4 Heavy/Glam Rock no
World of Pain 2009 5 Hardcore Heavy Metal no
Bodysnatcher TBD 4 Deathcore Metal yes
Valley of the Sun 2010 4 Stoner Rock yes
Desolated 2007 5 Hardcore Heavy Metal yes

That's it! Those are some basic and nice looking tables that can be reused.

There is a separate stylesheet I've included for this page called `tables.css`, you can inspect this page and get a copy of it.

Go back