All language subtitles for 1. HTML Tables

All right.
1

So previously we managed to get our website to include images as well as
2

links. So we added these image tags as was anchor tags
3

which can take us to external sites, but also to internal sites,
4

like the brand new my hobbies page that we created,
5

or the contact me. Now in this lesson,
6

we're going to take things a little bit further. In our personal site/CV
7

I want to have a section where we can list our work experience,
8

so what we've done and when we've done it. Currently,
9

if we went into our code and say below that unordered list,
10

and, um, we add a h3,
11

let's call it work experience. Now,
12

if we added a standard paragraph tag and we said maybe 2010
13

to 2013, um,
14

let's say Lead Developer at Tempo App.
15

So let's save that and take a look.
16

And if we refresh then it looks like this,
17

which is all well and good if we have that range,
18

but what if I wanted to add something where I didn't have a year range?
19

Say if it was 2010 when I worked as a researcher,
20

uh,
21

at Institute of Cognitive Neurosciences.
22

So let's save that and let's refresh and you can see that it looks really
23

right? Like this part
24

and this part,
25

they're not really indented at the same level horizontally and everything just looks
26

really messy.
27

So how can we implement something that looks nice like this where there's
28

even a bit of padding in between and everything looks really regular?
29

Well,
30

one of the ways that we can achieve this using just HTML is to create a table.
31

So if we have a look at the docs on MDN and we look at table,
32

you can see that a very simple table just looks like this.
33

This is a bog-standard, simple table.
34

But tables can get really complicated as well
35

and you can use it to structure and represent data in your website.
36

So we could have table headings, we could have different cells,
37

we could have column groups and columns,
38

we can have captions and a whole bunch of things. So let's try and add
39

a table to our website so that we can make our CV look a little bit more like
40

this.
41

So let's first add a horizontal rule here between our table and these two links.
42

And let's use auto-complete to
43

add a table tag for us. Inside the table
44

we can create table rows and also table data,
45

which are essentially like cells.
46

So say if we create a brand new table row and it's really helpful that
47

auto-suggest actually tells you what each of these tags are.
48

So let's go ahead and hit enter.
49

So this is a single row
50

and if I want to create another row underneath then I would just have to create
51

another tr. Now inside the top row,
52

I'm going to have two table data elements or rather two cells in this single
53

row.
54

And to represent the cells, I'm going to use the td or table data element.
55

So the first cell is going to contain my date
56

and the second cell is going to contain what I did.
57

So that's our first row complete.
58

Now let's go ahead and create another two cells or another two tds inside our
59

second row. So let's again, copy and paste, um,
60

the date
61

and the work into the table
62

data elements.
63

And I'm going to delete these two paragraphs. Let's hit save,
64

go back to our website and hit refresh and see what it looks like. Okay.
65

That's already looking a lot better than before, right?
66

It's being a table means that all columns our structured together.
67

So these two lines are structured so that they are indented to the same place
68

and it makes it look so much neater than before. Now,
69

aside from having just rows and cells, tables also have headers,
70

body and footer mirroring what we have for our HTML websites.
71

And you can declare them quite simply by writing thead for table
72

head, and tbody for table body,
73

and tfoot for table footer. Now inside the table head,
74

we can add some titles to each of our columns
75

and they get formatted by default in bold.
76

So if we create a new table row and inside this row
77

instead of creating table data or td elements,
78

we're going to create th elements or a table header cell element.
79

And inside here, we're going to give the name of our first column
80

which is going to be Dates.
81

And then we're going to create another table header cell
82

and this one is going to be the work that we did.
83

So let's hit save and hit refresh.
84

And you'll see that we now have table headings for each of our columns.
85

Now, for those of you guys who might've been playing around with this code,
86

you would have realized that if I cut this table row
87

and instead of putting it inside the header,
88

I actually put it just inside the main table
89

and I delete all of this and we hit save and we hit refresh,
90

you'll notice that it looks exactly the same and that's because we're using
91

these special elements
92

the table header cell elements and most browsers know how these should be
93

formatted. So it looks exactly the same.
94

But the reason why we might have different sections of our table, for example,
95

putting these cells inside the table
96

head and putting these inside the body is because sometimes we might want to
97

select and isolate the table
98

header and the table body in order to style it differently or make it function in
99

a different way. For example,
100

if we separated the table header from the table body,
101

we can use some code to isolate the header and fix it in place so that when
102

users scroll through our table, we can keep these headings on the screen.
103

Now that requires a little bit more fancy stuff like CSS or JavaScript,
104

which we'll wait until later modules to talk about,
105

but it's a good reason to be aware of why you might want to place the header
106

cells inside the head, the main body of the table inside the body,
107

and maybe some footer cells into the table footer. And generally,
108

this is the structure that you'll see for most tables with a head and with a
109

body. Now, if we have a look at these tables on the MDN
110

developer docs, you can see that they've got outlines
111

whereas what we've created doesn't have any borders or boundaries or outlines at
112

all. If we take a look at the MDN developer docs for the table element,
113

you can see that there's a whole bunch of attributes, such as background
114

color, or border or cell padding,
115

cell spacing,
116

and a whole bunch of things that you can apply to the table element to change
117

its appearance.
118

But if you take a closer look at each of these styling attributes,
119

then you can see they all have a little thumbs-down sign next to them.
120

And this is because all of these attributes for the table element are
121

deprecated.
122

And you'll hear that word quite often in Programming across many different
123

languages and disciplines.
124

And what that word means is that it's almost like it's downgraded.
125

It's something that they no longer recommend you using.
126

And the reason is because we have to always keep in mind that HTML is for
127

structure,
128

CSS is for styling and the JavaScript is for behavior.
129

And even though it's possible to affect the style of your website through using
130

HTML attributes or through using different HTML elements,
131

you have to try and resist when you can.
132

But since we haven't yet learned about CSS,
133

I wanna take you into the primitive days before web designers had access to CSS what
134

they might've done using just HTML.
135

And if we scroll through these attributes,
136

you'll come across something called border.
137

And this defines, in pixels,
138

the size of the frame that's surrounding the table.
139

We can add this attribute to our table element,
140

not to thead or table row or a table heading cell, well any of the other ones
141

because we're currently reading the table docs, remember,
142

and we can add it and say, border equals one pixel
143

let's say. And if we refresh our site,
144

then we'll see this incredibly ugly HTML table that you'll see a lot in
145

websites from the nineties. So let's get rid of it.
146

Let's just quickly recap the HTML structure for creating a table. To start off,
147

we create this table tag and we also close it
148

and everything in between is the actual content of our table.
149

This just creates a simple table. Now, by default,
150

your browser will style the table to not have any borders or padding or anything
151

style related. Now,
152

in order for our table to actually start holding some pieces of data,
153

we're going to have to create something called a table row.
154

And between the open and closing tr tags is where the data for that row is going
155

to go.
156

And this section of code will just create a single row inside our table,
157

again, with no associated styling.
158

So if there's nothing between these two tags,
159

then you won't actually see anything appear on screen. Now,
160

the next part is our table data
161

or rather, our table cells that we create using the td tag. And in between the
162

open and closing td tags, we place the actual data
163

that's going to go into that cell.
164

And this is a single table cell that's going to contain the word Angela
165

and it's going to go inside the first table row. And so over here.
166

And as you populate your table with more rows and more data, then you will see
167

this structure reflected on your website.
168

So the biggest hurdle that you have to get over is that there are no table
169

columns. All that you're doing is going from top to bottom
170

defining new table rows and inside each row,
171

you're putting in individual cells and each cell gets placed horizontally, one
172

after the other,
173

creating effectively the columns. While the main job of tables is to display
174

structured data,
175

you can also see how you could use it to affect the layout of the various HTML
176

elements on your website.
177

And that's what we're going to look at in the next lesson.