Creating a table in HTML

For our 6-week project using ruby on rails at Flatiron, my project partner and I needed a way to display stats from many different football players, in a clean organized fashion. One of the better methods we decided on was creating a table in HTML. This would allow us to display all of the data in an organized fashion, then go back and make it pretty using css. Hopefully some other people can benefit from our time messing with tables, so here we go.

Starting off, a table in html is denoted by the <table> tag. Inside of the table tags there are the <thead> and <tbody> tags. While the table will functionally work without these tags, they are great for accessibility and some other features which can be interesting, such as having the table body scroll independently from the header.

*note: no tags in the table are self closing

<table class="first_table">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

Inside of the <thead> tags will go your column titles. In order to express you want to add a row to your table, you use the <tr> tag, with <th> tags nested inside, the inner text of which will be your column titles!

<table class="first_table">
   <thead>
       <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
       </tr>
    </thead>

    <tbody>
    </tbody>
</table>

Awesome! Now that we have some column titles (table headers), let’s make some rows. To do this we do the same as we make a new row inside of the <tbody> tags using the <tr> tag, exactly the same as with the column titles, except this time we use the <td> tag, to tell the table we want this to be table data. Each <td> will become a cell in the table. Since we have 3 table headers, let’s make 3 table cells, I’m going to make 3 rows of data to show off some styling later in this blogpost.

<table class="first_table">
  <thead>
        <tr>
           <th>Column 1</th>
           <th>Column 2</th>
           <th>Column 3</th>
       </tr>
  </thead>
  <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>  
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
  </tbody>
</table>

Awesome, now we have a very basic table with three rows of data!

It isn’t very pretty, nor that easy to read as you get into larger sets of data which need to be displayed, and I encourage you to try out some styling options! By adding just a few lines of css:

.first_table {
    min-width: 400px;
    border-collapse: collapse;
    font-size: 1.3em;
    text-align: left;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

th {
     background: #336B87;
}

tr {
     background: lightgrey;;
}

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

We can get a much more visually appealing and readable table.