How To Make A Data Table For Your Web Page

In This Tutorial, I Show You How To Make A Data Table For Your Web Page

Have you heard that using tables to make web pages is a "no-no?"

Well, that’s not true. It’s how tables are used that’s the issue, not that they are used at all.

Like anything to do with HTML, it’s what you do with it that matters.

Tables are used for the presentation of tabular data and hence, you may have heard the term "data table." What’s a data table? Anytime you have information that needs to be organized into rows and columns, that’s a data table. Calendars, chart info, trains schedules are some good examples.

What you don’t use tables for is web page layout. Sure, people have and always will- tragically – use them, but it is not the best practice. When it comes to all matters of style – and that certainly includes page layout – you’ll want to use Cascading Style Sheets.

So let’s make a table to display data.

Let’s Break This Down

My table consists of 4 rows and 4 columns. I start with an open table tag <table> and end up with a close table tag </table>. The rows are formed with <tr></tr> pairs. The columns (cells of the table) are made with either a <th></th> pair or <td></td>.

Here we go. This is your bread and butter data table.

Code View

<table summary="This is a data table that has 4 rows and 4 columns">
<caption>
Meal Costs Comparison Of 3 Cities</caption>


<tr>
<th></th>
<th>
New York, NY</th>
<th>
Cleveland, OH</th>
<th>
Winslow, AZ</th>
</tr>

<tr>
<th>
Breakfast</th>
<td>
$12.00</td>
<td>
$8.00</td>
<td>
$2.25</td>
</tr>

<tr>
<th>
Lunch</th>
<td>
$25.50</td>
<td>
$13.75</td>
<td>
$3.25</td>
</tr>

<tr>
<th>
Dinner</th>
<td>
$50.00</td>
<td>
$27.50</td>
<td>
$4.25</td>
</tr>


</table>

A Couple Of Pointers

  1. I used summary="This is a data table that has 4 rows and 4 columns" for those who use screen readers to read web pages. The summary attribute is not something you’ll see in the Browser View.
  2. Being a data table, I like using the <caption> tag to briefly describe what’s in the table.
  3. When the information is at the start of a row or column, I use <th>. I think of this tag as a special <td> tag because it works just like it. But the only time I use it is when the information is at the head of a row or column. Browsers generally display the contents of these table header cells in bold text centered horizontally and vertically in the cell.
    (Note that I used an empty <th></th> for the first cell. That’s not my favorite practice but I’ll let you get away with it).

This is what it all adds up to.

Browser View

Meal Costs Comparison Of 3 Cities
New York, NY Cleveland, OH Winslow, AZ
Breakfast $12.00 $8.00 $2.25
Lunch $25.50 $13.75 $3.25
Dinner $50.00 $27.50 $4.25

Go Ahead, Try It Yourself

Copy and paste the above list code in the box below or feel free to write your own code. Then click the “GIVE IT A TRY” box and check it out.

Test Your Code In This Box – The Code Tester


Here’s What You Did

What About Other Tags To Use For Tables?

So maybe you’ve seen and wondered what <thead>, <tbody>, and <tfoot> do.

Any – or all – of those tags are used to group rows and columns as necessary. Because CSS can be applied to ANY HTML tag (element), you can hang your style rules on those 3 tags as well.

In my example I didn’t use any of these tags, but I certainly could have used
<thead> and <tbody> to define the head and body sections of the table.

5 thoughts on “How To Make A Data Table For Your Web Page

  1. I have a question regarding one of my pages. On my show archives page you will see for the year 2013, a list of my radio shows in four columns. How can I put a gap between the months so that it looks more appealing?

    • Randy

      I think I saw the link to the page you are talking about. I didn’t check but if you are using float layout for your columns you can use CSS padding and margin properties to add and control space. So try using padding an margin to put a gap between the months. Let me know how that goes.

  2. Interesting blog! Is your theme custom made or did you download it from
    somewhere? A theme like yours with a few simple adjustements would really
    make my blog jump out. Please let me know where you got your theme.

    Thanks

    My page; google

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials