0
1
00:00:00,810 --> 00:00:01,140
All right.
1

2
00:00:01,140 --> 00:00:08,430
So previously we managed to get our web site to include images as well as links so we added these image
2

3
00:00:08,430 --> 00:00:15,270
tags as well as anchor tags which can take us to external sites but also to internal sites like the brand
3

4
00:00:15,270 --> 00:00:19,140
new My Hobbies page that we created or the Contact Me.
4

5
00:00:19,140 --> 00:00:24,610
Now in this lesson we're going to take some of those concepts that we learned in previous lessons.
5

6
00:00:24,630 --> 00:00:27,790
Now in this lesson we can take things a little bit further.
6

7
00:00:27,900 --> 00:00:35,100
So in our personal site/CV I want to have a section where we can list our work experience.
7

8
00:00:35,100 --> 00:00:37,590
So what we've done and when we've done it.
8

9
00:00:37,710 --> 00:00:47,610
So currently if we went into our code and say below that unordered list and we add a h3, let's call
9

10
00:00:47,610 --> 00:00:50,350
it Work Experience.
10

11
00:00:50,350 --> 00:01:05,650
Now if we added a standard paragraph tag and we said maybe 2010-2013, let's say, Lead Developer at Tempo App.
11

12
00:01:05,940 --> 00:01:12,600
So let's save that and take a look and if we refresh then it looks like this which is all well and good
12

13
00:01:12,600 --> 00:01:13,920
if we have that range.
13

14
00:01:13,950 --> 00:01:19,800
But what if I wanted to add something where I didn't have a year range, say if it was 2010 when I worked as
14

15
00:01:19,800 --> 00:01:28,030
a researcher at Institute of Cognitive Neurosciences.
15

16
00:01:28,080 --> 00:01:35,940
So let's save that and let’s refresh and you can see that it looks really awkward, right? Like this part
16

17
00:01:36,480 --> 00:01:45,630
and this part, they're not really indented at the same level horizontally and everything just looks really
17

18
00:01:45,630 --> 00:01:46,620
messy.
18

19
00:01:46,620 --> 00:01:52,770
So how can we implement something that looks nice like this where there's even a bit of padding in between
19

20
00:01:52,770 --> 00:01:54,950
and everything looks really regular.
20

21
00:01:54,960 --> 00:02:02,040
Well, one of the ways that we can achieve this using just HTML is to create a table.
21

22
00:02:02,040 --> 00:02:09,750
So if we have a look at the docs on MDN and we look at table you can see that a very simple table
22

23
00:02:09,900 --> 00:02:11,420
just looks like this.
23

24
00:02:11,410 --> 00:02:18,030
This is a bog standard simple table but tables can get really complicated as well and you can use it
24

25
00:02:18,030 --> 00:02:23,490
to structure and represent data in your web site so we can have table headings.
25

26
00:02:23,670 --> 00:02:30,780
We could have different cells, we could have column groups and columns, we can have captions and a whole
26

27
00:02:30,780 --> 00:02:31,740
bunch of things.
27

28
00:02:31,770 --> 00:02:40,020
So let's try and add a table to our website so that we can make our CV look a little bit more like this.
28

29
00:02:40,020 --> 00:02:46,760
So let's first add a horizontal rule here between our table and these two links.
29

30
00:02:46,860 --> 00:02:54,810
And let's use auto complete to add a table tag for us and inside a table we can create table rows and
30

31
00:02:54,810 --> 00:02:58,580
also table data which are essentially like cells.
31

32
00:02:58,790 --> 00:03:06,240
So, say if we create a brand new table row, and it's really helpful that autosuggest actually tells you what
32

33
00:03:06,240 --> 00:03:10,850
each of these tags are so let's go ahead and hit enter.
33

34
00:03:11,370 --> 00:03:13,700
So this is a single row.
34

35
00:03:13,920 --> 00:03:19,030
And if I want to create another row underneath then I would just have to create another tr.
35

36
00:03:19,110 --> 00:03:28,350
Now inside the top row I'm going to have two table data elements or rather two cells in this single
36

37
00:03:28,350 --> 00:03:31,470
row and to represent the cells
37

38
00:03:31,470 --> 00:03:36,880
I'm going to use the td or table data element.
38

39
00:03:36,960 --> 00:03:47,490
So the first cell is going to contain my date and the second cell is going to contain what I did.
39

40
00:03:49,800 --> 00:03:52,680
So that's our first row complete.
40

41
00:03:52,680 --> 00:04:01,320
Now let's go ahead and create another two cells or another two tds inside our second row.
41

42
00:04:01,380 --> 00:04:13,840
So let's again copy and paste the date and the work into the table data elements, and I'm going to delete
42

43
00:04:13,930 --> 00:04:15,570
these two paragraphs.
43

44
00:04:16,770 --> 00:04:22,340
So let's hit save but go back to our web site and hit refresh and see what it looks like.
44

45
00:04:22,650 --> 00:04:22,950
OK.
45

46
00:04:22,950 --> 00:04:25,970
That's already looking a lot better than before.
46

47
00:04:25,980 --> 00:04:26,460
Right?
47

48
00:04:26,670 --> 00:04:33,060
So it being a table means that our columns are structured together.
48

49
00:04:33,150 --> 00:04:40,710
So these two lines are structured so that they are indented to the same place and it makes it look so
49

50
00:04:40,710 --> 00:04:42,040
much neater.
50

51
00:04:42,090 --> 00:04:49,890
Now aside from having just rows and cells, tables also have headers, body and footer, mirroring what we
51

52
00:04:49,890 --> 00:05:01,350
have for our HTML web sites, and you can declare them quite simply by writing thead for table head and
52

53
00:05:01,440 --> 00:05:07,480
tbody for table body and tfoot for table footer.
53

54
00:05:07,530 --> 00:05:15,000
Now inside the table head we can add some titles to each of our columns and they get formatted by default
54

55
00:05:15,090 --> 00:05:16,240
in bold.
55

56
00:05:16,260 --> 00:05:24,240
So if we create a new table row and inside this row instead of creating table data or td elements, we're going
56

57
00:05:24,240 --> 00:05:29,390
to create th elements or a table header cell element.
57

58
00:05:29,580 --> 00:05:37,530
And inside here we're going to give the name of our first column which is going to be dates and then
58

59
00:05:37,530 --> 00:05:43,360
we're going to create another table header cell and this one is going to be the work that we did.
59

60
00:05:43,680 --> 00:05:53,180
So let's hit save and hit refresh and you'll see that we now have table headings for each of our columns.
60

61
00:05:53,190 --> 00:05:58,230
Now for those of you guys who might have been playing around with this code you would have realized that
61

62
00:05:58,320 --> 00:06:07,680
if I cut this table row and instead of putting it inside the header I actually put it just inside the
62

63
00:06:07,680 --> 00:06:14,140
main table and I delete all of this and we hit save and we hit refresh,
63

64
00:06:14,160 --> 00:06:17,360
you’ll notice that it looks exactly the same.
64

65
00:06:17,520 --> 00:06:20,720
And that's because we're using these special elements,
65

66
00:06:20,730 --> 00:06:26,160
the table header cell elements, and most browsers know how these should be formatted.
66

67
00:06:26,160 --> 00:06:32,700
So it looks exactly the same but the reason why we might have different sections of our table for example
67

68
00:06:32,940 --> 00:06:39,390
putting these cells inside the table head and putting these inside the body is because sometimes we
68

69
00:06:39,390 --> 00:06:45,510
might want to select and isolate the table header and the table body in order to style it differently
69

70
00:06:45,570 --> 00:06:47,990
or make it function in a different way.
70

71
00:06:48,150 --> 00:06:54,840
Now, for example, if we separated the table header from the table body we can use some code to isolate
71

72
00:06:54,870 --> 00:07:00,810
the header and fix it in place so that when users scroll through our table we can keep these headings
72

73
00:07:00,870 --> 00:07:01,860
on screen.
73

74
00:07:01,860 --> 00:07:08,130
Now that requires a little bit more fancy stuff like CSS or Javascript which we'll wait until later
74

75
00:07:08,130 --> 00:07:09,180
modules to talk about.
75

76
00:07:09,210 --> 00:07:15,810
But it's a good reason to be aware of why you might want to place the header cells inside the head,
76

77
00:07:15,930 --> 00:07:21,370
the main body of the table inside the body, and maybe some footer cells into the table footer.
77

78
00:07:21,630 --> 00:07:27,750
And generally this is the structure that you'll see for most tables with a head and with a body.
78

79
00:07:27,750 --> 00:07:32,020
Now if we have a look at these tables on the MDN developer docs,
79

80
00:07:32,040 --> 00:07:37,740
you can see that they've got outlines whereas what we've created doesn't have any borders or boundaries
80

81
00:07:37,740 --> 00:07:39,270
or outlines at all.
81

82
00:07:39,270 --> 00:07:44,940
Now if we take a look at the MDN developer docs for the table element, you can see that there's a whole
82

83
00:07:44,940 --> 00:07:53,850
bunch of attributes such as background color or border or cell padding, cell spacing and a whole bunch
83

84
00:07:53,850 --> 00:07:58,380
of things that you can apply to the table element to change its appearance.
84

85
00:07:58,380 --> 00:08:05,030
But if you take a closer look at each of these styling attributes then you can see they all have a little
85

86
00:08:05,040 --> 00:08:07,900
thumbs down sign next to them.
86

87
00:08:08,160 --> 00:08:14,970
And this is because all of these attributes for the table element are deprecated and you'll hear that
87

88
00:08:14,970 --> 00:08:20,320
word quite often in programming across many different languages and disciplines.
88

89
00:08:20,610 --> 00:08:24,750
And what that word means is that it's almost like it's downgraded.
89

90
00:08:24,840 --> 00:08:28,000
It's something that they no longer recommend you using.
90

91
00:08:28,020 --> 00:08:35,990
And the reason is because we have to always keep in mind that HTML is for structure, CSS is for styling
91

92
00:08:36,300 --> 00:08:38,770
and Javascript is for behavior.
92

93
00:08:38,970 --> 00:08:45,330
And even though it's possible to affect the style of your web site through using HTML attributes
93

94
00:08:45,360 --> 00:08:51,390
or through using different HTML elements, you have to try and resist when you can.
94

95
00:08:51,450 --> 00:08:57,300
But since we haven't yet learned about CSS, I want to take you to the primitive days before web designers
95

96
00:08:57,330 --> 00:09:02,230
had access to CSS, what they might have done using just HTML.
96

97
00:09:02,370 --> 00:09:08,030
And if we scroll through these attributes you'll come across something called border.
97

98
00:09:08,520 --> 00:09:13,840
And this defines in pixels the size of the frame that's surrounding the table.
98

99
00:09:14,190 --> 00:09:22,580
So we can add this attribute to our table element, not to thead or table row or table heading cell or any of the other
99

100
00:09:22,580 --> 00:09:30,530
ones, because we're currently reading the table docs, remember, and we can add it and say border equals
100

101
00:09:30,620 --> 00:09:32,220
one pixel let's say.
101

102
00:09:32,710 --> 00:09:39,440
And if we refresh our site then we'll see this incredibly ugly HTML table that you'll see a lot in
102

103
00:09:39,690 --> 00:09:41,260
web sites from the 90s.
103

104
00:09:41,330 --> 00:09:46,930
So let's get rid of it.
104

105
00:09:47,110 --> 00:09:52,900
Now let's just quickly recap the HTML structure for creating a table.
105

106
00:09:53,140 --> 00:10:00,490
So to start off we create this table tag and we also close it and everything in between is the actual
106

107
00:10:00,490 --> 00:10:02,620
content of our table.
107

108
00:10:02,620 --> 00:10:05,900
So this just creates a simple table.
108

109
00:10:06,130 --> 00:10:13,450
Now by default your browser will style the table to not have any borders or padding or anything style
109

110
00:10:13,450 --> 00:10:14,410
related.
110

111
00:10:14,410 --> 00:10:20,200
Now in order for our table to actually start holding some pieces of data we're going to have to create something
111

112
00:10:20,200 --> 00:10:29,320
called a table row and and between the open and closing tr tags is where the data for that row is going
112

113
00:10:29,320 --> 00:10:30,020
to go.
113

114
00:10:30,100 --> 00:10:35,440
And this section of code will just create a single row inside our table.
114

115
00:10:35,560 --> 00:10:38,540
So again with no associated styling.
115

116
00:10:38,560 --> 00:10:45,840
So if there's nothing between these two tags then you won't actually see anything appear on screen.
116

117
00:10:45,850 --> 00:10:55,420
Now the next part is our table data or rather our table cells that we create using the td tag, and in
117

118
00:10:55,420 --> 00:11:02,710
between the open and closing td tags we place the actual data that's going to go into that cell.
118

119
00:11:03,010 --> 00:11:07,740
And this is a single table cell that's going to contain the word Angela.
119

120
00:11:07,900 --> 00:11:11,270
And it's going to go inside the first table row.
120

121
00:11:11,410 --> 00:11:20,530
And so over here, and as you populate your table with more rows and more data then you will see the structure
121

122
00:11:20,570 --> 00:11:22,950
reflected on your website.
122

123
00:11:22,960 --> 00:11:29,800
So the biggest hurdle that you have to get over is that there are no table columns, all that you're doing
123

124
00:11:29,830 --> 00:11:38,080
is going from top to bottom defining new table rows and inside each row you're putting in individual
124

125
00:11:38,080 --> 00:11:46,770
cells and each cell gets placed horizontally one after the other creating, effectively, the columns.
125

126
00:11:46,780 --> 00:11:54,460
Now, while the main job of tables is to display structured data, you can also see how you could use it
126

127
00:11:54,550 --> 00:12:00,170
to affect the layout of the various HTML elements on your website.
127

128
00:12:00,220 --> 00:12:02,940
And that's what we're going to look at in the next lesson.