1
00:00:08,953 --> 00:00:11,081
Hi, today we're gonna
talk about tables and

2
00:00:11,081 --> 00:00:14,580
how you can use them to display
your data on your website.

3
00:00:14,580 --> 00:00:16,520
So, how I like to put it,

4
00:00:16,520 --> 00:00:20,510
is that we really used to consider
tables as being this evil kind of idea.

5
00:00:20,510 --> 00:00:24,400
Because people weren't using tables for
the reason they were supposed to.

6
00:00:24,400 --> 00:00:27,320
Instead, they were using tables
to kind of set things out,

7
00:00:27,320 --> 00:00:29,180
laying them out nicely on the screen.

8
00:00:29,180 --> 00:00:33,830
This started to happen back during
the time of HTML 2, maybe HTML 3.1.

9
00:00:33,830 --> 00:00:36,860
And people said,
I really want my page to look nice and

10
00:00:36,860 --> 00:00:39,770
I don't have a means to do it, so
I'm gonna make it a huge table and

11
00:00:39,770 --> 00:00:43,030
kind of lay everything out in
different rows or columns.

12
00:00:43,030 --> 00:00:47,580
This completely throws out the whole idea
of separation of content from layout.

13
00:00:47,580 --> 00:00:51,140
In addition, it makes it really confusing
for people who might be using assistive

14
00:00:51,140 --> 00:00:54,770
devices, because they're wondering,
is this really all a bunch of data,

15
00:00:54,770 --> 00:00:59,405
or is there content that should just be
kind of formatted in the regular way.

16
00:00:59,405 --> 00:01:01,045
So we're gonna start talking about tables.

17
00:01:01,045 --> 00:01:04,235
And what I really wanna do is stress
the idea that you should only be using

18
00:01:04,235 --> 00:01:08,165
tables if you have some sort
of data being displayed.

19
00:01:08,165 --> 00:01:11,562
Now before you even start
coding a single thing,

20
00:01:11,562 --> 00:01:15,472
I need you to sketch out your layout
of what your table should look like.

21
00:01:15,472 --> 00:01:18,982
Now, I've told my students this over and
over again, and they say yes, yes, and

22
00:01:18,982 --> 00:01:19,702
then they start to code.

23
00:01:19,702 --> 00:01:22,422
And then they say yes, yes,
and then they start to code.

24
00:01:22,422 --> 00:01:25,072
And, after about the fourth or
fifth time, they realize,

25
00:01:25,072 --> 00:01:30,680
oh, it's a lot easier to write clean code
the first time, than to fix broken code.

26
00:01:30,680 --> 00:01:34,040
And so, then they begin and
they think, alright, how many rows and

27
00:01:34,040 --> 00:01:36,770
columns do I actually need
to represent all of my data?

28
00:01:36,770 --> 00:01:39,987
And then you go a step further and
say, well are there any rows or

29
00:01:39,987 --> 00:01:42,904
columns where I actually need
to span multiple cells, or

30
00:01:42,904 --> 00:01:45,430
what we call the little
boxes in the table?

31
00:01:45,430 --> 00:01:49,050
Because if so, it's gonna be a lot easier
if I've drawn this out to figure out

32
00:01:49,050 --> 00:01:52,540
where I'm gonna need any special
attributes to make that happen.

33
00:01:52,540 --> 00:01:56,420
Because one of the most important things
to know when you're doing tables is that

34
00:01:56,420 --> 00:02:01,500
the browser's expecting there to be the
same number of cells on every single row.

35
00:02:01,500 --> 00:02:04,020
If you don't do that,
it's going to look very messy.

36
00:02:05,280 --> 00:02:07,500
Once you've decided what
your table should look like,

37
00:02:07,500 --> 00:02:09,930
then it's time to start
thinking about the tags.

38
00:02:09,930 --> 00:02:13,970
You start out with the table tag and it's
basically just a container element that's

39
00:02:13,970 --> 00:02:18,270
going to hold all the other attributes and
all the other tags inside of it.

40
00:02:18,270 --> 00:02:22,390
You're gonna have the table row and
then here for td, I have columns, but

41
00:02:22,390 --> 00:02:26,290
what I really think would be best is to
think of this as table cells, not really

42
00:02:26,290 --> 00:02:30,340
columns because what you're doing is
your talking about each individual box.

43
00:02:30,340 --> 00:02:34,050
So inside the table,
you're gonna have one or more table rows.

44
00:02:34,050 --> 00:02:38,850
And then inside each table row, you're
gonna have one or more TD elements, so

45
00:02:38,850 --> 00:02:40,540
the columns or the cells.

46
00:02:40,540 --> 00:02:43,790
So here's the code for
creating a very simple table.

47
00:02:43,790 --> 00:02:48,120
Although it looks very convoluted and like
there's a lot of things going on here.

48
00:02:48,120 --> 00:02:50,320
Most of this is just information for
the browser.

49
00:02:50,320 --> 00:02:53,420
When we look at the actual page that's
generated you will see that it's very

50
00:02:53,420 --> 00:02:54,620
clean and simple.

51
00:02:54,620 --> 00:02:55,600
So I have my code for

52
00:02:55,600 --> 00:02:59,990
my table on the outside and then each
one of my lines of code here is one row.

53
00:02:59,990 --> 00:03:02,810
I have my tr start and my tr end.

54
00:03:02,810 --> 00:03:06,660
And then inside each row I
have three elements, one, two,

55
00:03:06,660 --> 00:03:08,538
three which are inside the td tag.

56
00:03:08,538 --> 00:03:12,630
And I'm gonna tell you right now that when
I initially wrote this code It looked

57
00:03:12,630 --> 00:03:16,460
fine, but I kind of messed it up because
I'd forgotten to put in my ending tag.

58
00:03:16,460 --> 00:03:20,260
So make sure when you're coding these,
you're being very clean and concise.

59
00:03:20,260 --> 00:03:22,560
And if you do it correctly,
this will create a simple table,

60
00:03:22,560 --> 00:03:25,020
as I said, with nine elements in it.

61
00:03:25,020 --> 00:03:28,020
One, two, three, four, five,
six, seven, eight, nine.

62
00:03:28,020 --> 00:03:30,930
This is as simple as you can get,
as far as the table goes.

63
00:03:30,930 --> 00:03:35,320
Now in some cases you might want to add
what we call table headings to your code.

64
00:03:35,320 --> 00:03:39,740
Table headings is the idea that at the top
of each column, or even at the top or

65
00:03:39,740 --> 00:03:43,690
the start of each row, you have some sort
of text that is bold, that indicates

66
00:03:43,690 --> 00:03:47,740
this isn't data, this is actually the name
of the data that we're looking at.

67
00:03:47,740 --> 00:03:51,890
Now It's fine, I mean it's not fine, but
what some people would do is they would

68
00:03:51,890 --> 00:03:55,740
just make these regular TD elements and
perhaps make them bold.

69
00:03:55,740 --> 00:03:58,130
So the people that are looking
at it can say, oh hey look.

70
00:03:58,130 --> 00:04:00,080
This is bold so it must be more important.

71
00:04:00,080 --> 00:04:01,920
But we really want to avoid doing that.

72
00:04:01,920 --> 00:04:05,170
Instead of using a TD with
some sort of bold font,

73
00:04:05,170 --> 00:04:09,089
we want to use a semantic tag TH,
which stands for table heading.

74
00:04:10,200 --> 00:04:13,820
So here these three lines of code
are exactly the same as before, but

75
00:04:13,820 --> 00:04:17,530
I've added one new row,
where instead of td I have th.

76
00:04:17,530 --> 00:04:20,840
So I have row one,
row two, row three, etc.

77
00:04:20,840 --> 00:04:25,660
And what you can see here is that
what we get is this nice little table

78
00:04:25,660 --> 00:04:30,120
heading at the top of each one, that is
both visually lets the user know that

79
00:04:30,120 --> 00:04:34,630
these are headings, but also semantically
conveys that same information.

80
00:04:34,630 --> 00:04:37,940
So one of the things I mentioned earlier,
when you're designing your table

81
00:04:37,940 --> 00:04:40,730
is you wanna decide if you're
gonna be spanning multiple cells.

82
00:04:40,730 --> 00:04:43,460
It might be the case that the table
you wanna make isn't some sort of

83
00:04:43,460 --> 00:04:47,460
perfect tic tac toe grid,
or perfect nine by nine.

84
00:04:47,460 --> 00:04:49,800
So you can combine multiple rows and or

85
00:04:49,800 --> 00:04:54,280
multiple columns using the rowspan and
column span attributes.

86
00:04:54,280 --> 00:04:58,590
Inside your element you would include
rowspan equals two if you wanted to span

87
00:04:58,590 --> 00:05:03,630
two rows, or column span equals five if
you wanted to have it span five columns.

88
00:05:03,630 --> 00:05:06,420
Alright so let me go ahead and
show you an example with some code and

89
00:05:06,420 --> 00:05:11,010
again, I realize that if you're looking at
this on some tiny little screen that this

90
00:05:11,010 --> 00:05:14,120
seems really like a lot of
information to digest in.

91
00:05:14,120 --> 00:05:16,000
But it's not really that much going on.

92
00:05:16,000 --> 00:05:20,300
I have a simple table, where I have my
table headings with the Child's Name and

93
00:05:20,300 --> 00:05:21,790
then the Parent's Name.

94
00:05:21,790 --> 00:05:24,580
And then I go ahead and
I start putting in a child, and

95
00:05:24,580 --> 00:05:26,520
with each child, I include their parents.

96
00:05:26,520 --> 00:05:29,520
So here, I have rowspan equals two for
Catherine,

97
00:05:29,520 --> 00:05:34,010
which means I actually want my
Catherine cell to take up two lines.

98
00:05:34,010 --> 00:05:35,660
Same with the Edward cell.

99
00:05:35,660 --> 00:05:37,790
Maggie I've left completely alone.

100
00:05:37,790 --> 00:05:40,990
So let's just go and look at the end
result, and I think that's really if

101
00:05:40,990 --> 00:05:44,190
we backward chain, it's going to help
you understand what this code is doing.

102
00:05:45,210 --> 00:05:48,130
So again, I have the child's name and
the parent's name, and

103
00:05:48,130 --> 00:05:51,030
here are the two cells
where I did the row span.

104
00:05:51,030 --> 00:05:55,460
And you can see, it actually took up
Multiple rows because in this case,

105
00:05:55,460 --> 00:05:59,280
Catherine and Edward both had two parents
that we wanted to put it together with.

106
00:05:59,280 --> 00:06:03,800
Again, not a hard concept, but it is the
case that if you weren't thinking about

107
00:06:03,800 --> 00:06:06,960
it, and we went back to your code and
just started throwing rowspan and

108
00:06:06,960 --> 00:06:11,200
columnspan in, it just gets very messy and
harder to debug.

109
00:06:11,200 --> 00:06:12,540
One of the things you might have noticed,

110
00:06:12,540 --> 00:06:16,750
at the very top of the table,
I included a border attribute.

111
00:06:16,750 --> 00:06:19,620
The reason I did that is
because I think it's much

112
00:06:19,620 --> 00:06:25,030
easier to see this rowspan here because
I have the lines around each cell.

113
00:06:25,030 --> 00:06:27,700
So, you can use the border
attribute to go ahead and

114
00:06:27,700 --> 00:06:30,250
put lines inbetween
each one of your cells.

115
00:06:30,250 --> 00:06:32,180
And it's very common to do that.

116
00:06:32,180 --> 00:06:35,570
But, again, in your HTML,
I try to avoid styling.

117
00:06:35,570 --> 00:06:39,220
It's something we can add later if
you decide to learn more about CSS.

118
00:06:39,220 --> 00:06:41,970
But it's an attribute that's so
commonly used, I wanted to go ahead and

119
00:06:41,970 --> 00:06:44,610
put it in there so
you could see what was going on.

120
00:06:44,610 --> 00:06:46,570
Next, let's talk about captions.

121
00:06:46,570 --> 00:06:49,690
So, how do we link text
to a specific table?

122
00:06:49,690 --> 00:06:53,080
What people used to do is they would put
in some sort of heading, h2 or h3 and

123
00:06:53,080 --> 00:06:56,950
they would put it right above or
right below the table.

124
00:06:56,950 --> 00:06:59,920
So visually if you were looking at it,
you could kind of figure out, oh,

125
00:06:59,920 --> 00:07:01,370
this goes with the table.

126
00:07:01,370 --> 00:07:04,180
But again I really wanna push
you to use semantic tags.

127
00:07:04,180 --> 00:07:06,220
So instead of doing that,
you can go ahead and

128
00:07:06,220 --> 00:07:10,000
use the caption tag inside the table and

129
00:07:10,000 --> 00:07:13,740
it will help everyone know that oh this
caption goes with this specific table.

130
00:07:14,860 --> 00:07:16,660
So, let's go ahead and review.

131
00:07:16,660 --> 00:07:19,730
Number one, tables should only be used for
tabular data.

132
00:07:19,730 --> 00:07:21,600
Don't use it for layout.

133
00:07:21,600 --> 00:07:24,460
Two, draw your table before
you code your table.

134
00:07:24,460 --> 00:07:28,120
It's gonna save you so much heartache
in the end, I promise you that.

135
00:07:28,120 --> 00:07:32,400
Finally, and this is the third and most
important thing I hope you leave with,

136
00:07:32,400 --> 00:07:35,710
is that you need to check for
unclosed tags.

137
00:07:35,710 --> 00:07:40,330
One of the things that's great about
browsers when you're kind of developing

138
00:07:40,330 --> 00:07:43,440
locally, you're typing your code and
you're testing and looking at it, is that

139
00:07:43,440 --> 00:07:48,370
your browser can usually figure out what
you meant to do, even if you messed up.

140
00:07:48,370 --> 00:07:48,920
All right.

141
00:07:48,920 --> 00:07:52,260
And tables are a good example where
you can forget to close some tags,

142
00:07:52,260 --> 00:07:55,180
but your browser kind of
knows what you meant to do.

143
00:07:55,180 --> 00:07:58,400
But later if you decide to make a table,
and you're gonna upload it, and

144
00:07:58,400 --> 00:08:02,400
you really need to make sure that the data
in there is valid and represented well.

145
00:08:02,400 --> 00:08:05,860
One of the worst things you can
do is leave your tags unclosed.

146
00:08:05,860 --> 00:08:07,680
So make sure you validate your code,

147
00:08:07,680 --> 00:08:10,320
whenever you write a table or
really whenever you write any code.

148
00:08:10,320 --> 00:08:13,590
And you'll really be able to be sure that
you're writing the best code that you can.