- You might've heard somewhere along the way
that HTML tables are evil,
that you should never use a table,
or at least that's what some people have heard
or thought they heard, but it's not true.
It's not bad to use an HTML table for tabular data.
In fact, you should use an HTML table
when your content is a table, absolutely.
What you should not do is misuse HTML table elements
and pretend that you're making a table when you're not.
The whole point of semantic HTML
is to tell computers everywhere
what the thing you have is.
What is it?
If you have a button, use the button element.
If you have a table, use the table elements.
So why are people so sore about this?
How did the message get scrambled so badly
that people are scared of HTML tables?
Well, a long time ago, when the web was a tiny baby,
we did not have CSS.
We did not have any proper tools for styling or laying out
our content on a webpage.
Those things had just not been invented yet.
People used to take their content,
break it up into a lot of little pieces
and jam all those pieces into the cells
of an HTML table and just pretend everything was okay.
It was a horrible hack.
Things maybe looked okay, or even good,
but the semantics were terrible.
The content wasn't accessible,
it wasn't reusable, it wasn't find-able.
So what should we be using HTML tables for?
Well, tabular data.
A chart of data from a research project,
that's a table.
A bunch of information that's best communicated
by aligning things into rows and columns,
that's a data table.
Do you use Google Docs or Microsoft Office?
When do you decide to insert a table into the document?
Or when do you decide to use Excel instead of Word
or Google Sheets instead of Google Docs?
That's how to decide to use a table in HTML
because it's information that's best conveyed in a table.
Comparing prices of things that are for sale,
population data by town, election results,
product comparisons, schedules,
bits of information collected that you want people
to be able to quickly compare.
This is what tables are for.
The data might be numbers, but not always,
text perhaps.
It could even be images or other things.
As long as there's a semantic reason
for the data to be organized into a table,
that meaning is added by an arrangement
into rows or columns,
the table conveys a relationship
between the data cells and the header cells,
between one column or row and the next.
Is there something about the content that benefits
from revealing relationships like those?
Does using a table make it more clear what the content is?
If that's the nature of the information at hand,
then use a table in HTML to semantically mark it up
as what it is.
You can use CSS to rearrange how a table is displayed.
So it might not always look like a traditional table,
especially perhaps for small screens.
Changing the layout for different size screens, that's okay.
It doesn't always have to look like a table.
What matters is that if it's inherently a table,
then use an HTML table.
To create an HTML table
you use several different HTML elements
in just the right combination:
table, tr, th, and td.
Here, let's list them for you in a table.
The table element wraps around the whole table,
around all our content and markup for that table,
marking the beginning and end of the table itself.
The tr element stands for table row.
It wraps around a set of elements,
defining them as belonging to the same row.
The th element stands for table header.
It defines a header for a column.
And the td element stands for table data.
It marks up the cells of data.
Let's go through this using a simple example.
Here's some content that belongs in a table.
Let's get this into HTML.
We start with a table element
to mark the beginning of the table.
Of course, we'll close it at the end,
so let's do that now.
This table has six rows, five rows,
about five different birds, and the top row,
which contains the header for each column.
In the HTML we use the tr element to markup each row.
Six pairs of tr opening and closing tags make six rows.
Then we'll put the content inside of each row.
Let's start with the American Goldfinch.
We use the td element to wrap a cell of content,
American Goldfinch, yellow, eats mostly seeds,
and the image with an image element.
You can put any HTML markup inside of these cells,
paragraphs, videos, headlines, whatever you want.
There are four columns in this table,
which means four cells of data in each row.
Now let's fill in all the rest of the birds.
You can see this table shaping up on the right.
I've included a bit of styling and CSS
to make the table look more like a table
than the default styling that a browser uses.
But what about that header?
Well, we put the content for the header in the first row,
wrapping each one in a th element instead of a td element.
Td stands for table data while th stands for table header.
Bird, color, diet, photo.
In my reference document, the header is typeset in all caps,
but I don't want the words to actually be in all caps.
They aren't acronyms.
So I'm putting them into my HTML as normal words
and using CSS to change how they look.
That will ensure they are spoken aloud properly.
And if we want to change how the table is styled,
it will be easy to do so.
That's the basics of an HTML table.
Table element, tr for table rows,
th to mark content that's in a header,
and td for marking up the content of each table cell.
(upbeat techno music)