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.
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
Here we go. This is your bread and butter data table.
<table summary="This is a data table that has 4 rows and 4 columns">Meal Costs Comparison Of 3 Cities
New York, NY
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.
<caption>tag to briefly describe what’s in the table.
<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.
<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.
|New York, NY||Cleveland, OH||Winslow, AZ|
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
So maybe you’ve seen and wondered what
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
<tbody> to define the head and body sections of the table.
Get Happy And Start Learning HTML Right Now
Do The First Two Lessons For Free!!
All Of My Free Web Design Tutorials