Building a Simple HTML Table

Sometimes you want to present information to your users in a simple column/row structure. HTML tables are an easy way to do this. Let's get started building a simple version for a Rails app.

We begin with opening and closing table tags <table> to define our feature and then add table row tags <tr>.

<table>
  <tr>   
  </tr>
</table>

Next, we add table header tags <th> and input the names that we want for our table columns (table headings will be bold and centered in our columns by default).

<table>
  <tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>
</table>

Great start! We already have our table header designed. Now, let's add a few more table rows <tr>. We'll fill these rows with table data tags <td> and our corresponding data.

<table>
  <tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Daz</td>
    <td>Orange</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Stimpy</td>
    <td>Red & White</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Cheshire Cat</td>
    <td>Purple</td>
    <td>71</td>
  </tr>
</table>

And just like that, we have a simple table in our app that should look something like this:

Great, right? But not very aesthetically pleasing. Luckily, we can spice this table up with just a few simple extras. Let's throw on a table name using <h2> tags and then specify a little styling within our opening <table> tag.

<h2>Famous Cats</h2>
<table style="width:50%" border="1" cellpadding="5">
<tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>

And for just a bit more oomph, we can add shading to our table rows by specifying this in our application.css file:

tr:nth-child(even) {
  background-color: #ced3d0;
}

Now we have a table feature that's dressed to impress.

Feel free to experiment with more styling until it's exactly how you want. Boom done.