馃攳
HTML Tutorial - TABLES: What's the best way to use them? - YouTube
Channel: unknown
[0]
- You might've heard
somewhere along the way
[1]
that HTML tables are evil,
[3]
that you should never use a table,
[5]
or at least that's what
some people have heard
[8]
or thought they heard, but it's not true.
[12]
It's not bad to use an HTML
table for tabular data.
[17]
In fact, you should use an HTML table
[19]
when your content is a table, absolutely.
[23]
What you should not do is
misuse HTML table elements
[27]
and pretend that you're making
a table when you're not.
[31]
The whole point of semantic HTML
[33]
is to tell computers everywhere
[35]
what the thing you have is.
[38]
What is it?
[39]
If you have a button,
use the button element.
[42]
If you have a table,
use the table elements.
[45]
So why are people so sore about this?
[48]
How did the message get scrambled so badly
[51]
that people are scared of HTML tables?
[55]
Well, a long time ago, when
the web was a tiny baby,
[58]
we did not have CSS.
[61]
We did not have any proper
tools for styling or laying out
[64]
our content on a webpage.
[66]
Those things had just
not been invented yet.
[69]
People used to take their content,
[71]
break it up into a lot of little pieces
[74]
and jam all those pieces into the cells
[77]
of an HTML table and just
pretend everything was okay.
[82]
It was a horrible hack.
[84]
Things maybe looked okay, or even good,
[89]
but the semantics were terrible.
[91]
The content wasn't accessible,
[93]
it wasn't reusable, it wasn't find-able.
[96]
So what should we be
using HTML tables for?
[101]
Well, tabular data.
[104]
A chart of data from a research project,
[106]
that's a table.
[107]
A bunch of information
that's best communicated
[109]
by aligning things into rows and columns,
[112]
that's a data table.
[113]
Do you use Google Docs
or Microsoft Office?
[116]
When do you decide to insert
a table into the document?
[119]
Or when do you decide to
use Excel instead of Word
[123]
or Google Sheets instead of Google Docs?
[126]
That's how to decide
to use a table in HTML
[128]
because it's information that's
best conveyed in a table.
[133]
Comparing prices of
things that are for sale,
[135]
population data by town, election results,
[138]
product comparisons, schedules,
[140]
bits of information collected
that you want people
[143]
to be able to quickly compare.
[145]
This is what tables are for.
[148]
The data might be numbers, but not always,
[150]
text perhaps.
[151]
It could even be images or other things.
[154]
As long as there's a semantic reason
[156]
for the data to be organized into a table,
[158]
that meaning is added by an arrangement
[161]
into rows or columns,
[163]
the table conveys a relationship
[165]
between the data cells
and the header cells,
[168]
between one column or row and the next.
[171]
Is there something about
the content that benefits
[174]
from revealing relationships like those?
[177]
Does using a table make it
more clear what the content is?
[181]
If that's the nature of
the information at hand,
[184]
then use a table in HTML
to semantically mark it up
[189]
as what it is.
[191]
You can use CSS to rearrange
how a table is displayed.
[195]
So it might not always look
like a traditional table,
[198]
especially perhaps for small screens.
[200]
Changing the layout for different
size screens, that's okay.
[204]
It doesn't always have
to look like a table.
[206]
What matters is that if
it's inherently a table,
[210]
then use an HTML table.
[213]
To create an HTML table
[215]
you use several different HTML elements
[218]
in just the right combination:
[220]
table, tr, th, and td.
[225]
Here, let's list them for you in a table.
[228]
The table element wraps
around the whole table,
[231]
around all our content
and markup for that table,
[234]
marking the beginning and
end of the table itself.
[237]
The tr element stands for table row.
[240]
It wraps around a set of elements,
[242]
defining them as
belonging to the same row.
[245]
The th element stands for table header.
[248]
It defines a header for a column.
[251]
And the td element stands for table data.
[254]
It marks up the cells of data.
[257]
Let's go through this
using a simple example.
[259]
Here's some content
that belongs in a table.
[261]
Let's get this into HTML.
[263]
We start with a table element
[264]
to mark the beginning of the table.
[266]
Of course, we'll close it at the end,
[268]
so let's do that now.
[269]
This table has six rows, five rows,
[272]
about five different
birds, and the top row,
[274]
which contains the header for each column.
[276]
In the HTML we use the tr
element to markup each row.
[280]
Six pairs of tr opening and
closing tags make six rows.
[286]
Then we'll put the content
inside of each row.
[289]
Let's start with the American Goldfinch.
[292]
We use the td element to
wrap a cell of content,
[295]
American Goldfinch,
yellow, eats mostly seeds,
[299]
and the image with an image element.
[301]
You can put any HTML markup
inside of these cells,
[304]
paragraphs, videos,
headlines, whatever you want.
[307]
There are four columns in this table,
[309]
which means four cells
of data in each row.
[312]
Now let's fill in all
the rest of the birds.
[315]
You can see this table
shaping up on the right.
[318]
I've included a bit of styling and CSS
[320]
to make the table look more like a table
[322]
than the default styling
that a browser uses.
[325]
But what about that header?
[326]
Well, we put the content for
the header in the first row,
[329]
wrapping each one in a th
element instead of a td element.
[334]
Td stands for table data while
th stands for table header.
[339]
Bird, color, diet, photo.
[342]
In my reference document, the
header is typeset in all caps,
[345]
but I don't want the words
to actually be in all caps.
[349]
They aren't acronyms.
[350]
So I'm putting them into
my HTML as normal words
[353]
and using CSS to change how they look.
[355]
That will ensure they are
spoken aloud properly.
[358]
And if we want to change
how the table is styled,
[360]
it will be easy to do so.
[363]
That's the basics of an HTML table.
[365]
Table element, tr for table rows,
[368]
th to mark content that's in a header,
[370]
and td for marking up the
content of each table cell.
[375]
(upbeat techno music)
Most Recent Videos:
You can go back to the homepage right here: Homepage