All right. 1
So previously we managed to get our web site to include images as well as links so we added these image 2
tags as well as anchor tags which can take us to external sites but also to internal sites like the brand 3
new My Hobbies page that we created or the Contact Me. 4
Now in this lesson we're going to take some of those concepts that we learned in previous lessons. 5
Now in this lesson we can take things a little bit further. 6
So in our personal site/CV I want to have a section where we can list our work experience. 7
So what we've done and when we've done it. 8
So currently if we went into our code and say below that unordered list and we add a h3, let's call 9
it Work Experience. 10
Now if we added a standard paragraph tag and we said maybe 2010-2013, let's say, Lead Developer at Tempo App. 11
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
if we have that range. 13
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
a researcher at Institute of Cognitive Neurosciences. 15
So let's save that and let’s refresh and you can see that it looks really awkward, right? Like this part 16
and this part, they're not really indented at the same level horizontally and everything just looks really 17
messy. 18
So how can we implement something that looks nice like this where there's even a bit of padding in between 19
and everything looks really regular. 20
Well, one of the ways that we can achieve this using just HTML is to create a table. 21
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
just looks like this. 23
This is a bog standard simple table but tables can get really complicated as well and you can use it 24
to structure and represent data in your web site so we can have table headings. 25
We could have different cells, we could have column groups and columns, we can have captions and a whole 26
bunch of things. 27
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
So let's first add a horizontal rule here between our table and these two links. 29
And let's use auto complete to add a table tag for us and inside a table we can create table rows and 30
also table data which are essentially like cells. 31
So, say if we create a brand new table row, and it's really helpful that autosuggest actually tells you what 32
each of these tags are so let's go ahead and hit enter. 33
So this is a single row. 34
And if I want to create another row underneath then I would just have to create another tr. 35
Now inside the top row I'm going to have two table data elements or rather two cells in this single 36
row and to represent the cells 37
I'm going to use the td or table data element. 38
So the first cell is going to contain my date and the second cell is going to contain what I did. 39
So that's our first row complete. 40
Now let's go ahead and create another two cells or another two tds inside our second row. 41
So let's again copy and paste the date and the work into the table data elements, and I'm going to delete 42
these two paragraphs. 43
So let's hit save but go back to our web site and hit refresh and see what it looks like. 44
OK. 45
That's already looking a lot better than before. 46
Right? 47
So it being a table means that our columns are structured together. 48
So these two lines are structured so that they are indented to the same place and it makes it look so 49
much neater. 50
Now aside from having just rows and cells, tables also have headers, body and footer, mirroring what we 51
have for our HTML web sites, and you can declare them quite simply by writing thead for table head and 52
tbody for table body and tfoot for table footer. 53
Now inside the table head we can add some titles to each of our columns and they get formatted by default 54
in bold. 55
So if we create a new table row and inside this row instead of creating table data or td elements, we're going 56
to create th elements or a table header cell element. 57
And inside here we're going to give the name of our first column which is going to be dates and then 58
we're going to create another table header cell and this one is going to be the work that we did. 59
So let's hit save and hit refresh and you'll see that we now have table headings for each of our columns. 60
Now for those of you guys who might have been playing around with this code you would have realized that 61
if I cut this table row and instead of putting it inside the header I actually put it just inside the 62
main table and I delete all of this and we hit save and we hit refresh, 63
you’ll notice that it looks exactly the same. 64
And that's because we're using these special elements, 65
the table header cell elements, and most browsers know how these should be formatted. 66
So it looks exactly the same but the reason why we might have different sections of our table for example 67
putting these cells inside the table head and putting these inside the body is because sometimes we 68
might want to select and isolate the table header and the table body in order to style it differently 69
or make it function in a different way. 70
Now, for example, if we separated the table header from the table body we can use some code to isolate 71
the header and fix it in place so that when users scroll through our table we can keep these headings 72
on screen. 73
Now that requires a little bit more fancy stuff like CSS or Javascript which we'll wait until later 74
modules to talk about. 75
But it's a good reason to be aware of why you might want to place the header cells inside the head, 76
the main body of the table inside the body, and maybe some footer cells into the table footer. 77
And generally this is the structure that you'll see for most tables with a head and with a body. 78
Now if we have a look at these tables on the MDN developer docs, 79
you can see that they've got outlines whereas what we've created doesn't have any borders or boundaries 80
or outlines at all. 81
Now if we take a look at the MDN developer docs for the table element, you can see that there's a whole 82
bunch of attributes such as background color or border or cell padding, cell spacing and a whole bunch 83
of things that you can apply to the table element to change its appearance. 84
But if you take a closer look at each of these styling attributes then you can see they all have a little 85
thumbs down sign next to them. 86
And this is because all of these attributes for the table element are deprecated and you'll hear that 87
word quite often in programming across many different languages and disciplines. 88
And what that word means is that it's almost like it's downgraded. 89
It's something that they no longer recommend you using. 90
And the reason is because we have to always keep in mind that HTML is for structure, CSS is for styling 91
and Javascript is for behavior. 92
And even though it's possible to affect the style of your web site through using HTML attributes 93
or through using different HTML elements, you have to try and resist when you can. 94
But since we haven't yet learned about CSS, I want to take you to the primitive days before web designers 95
had access to CSS, what they might have done using just HTML. 96
And if we scroll through these attributes you'll come across something called border. 97
And this defines in pixels the size of the frame that's surrounding the table. 98
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
ones, because we're currently reading the table docs, remember, and we can add it and say border equals 100
one pixel let's say. 101
And if we refresh our site then we'll see this incredibly ugly HTML table that you'll see a lot in 102
web sites from the 90s. 103
So let's get rid of it. 104
Now let's just quickly recap the HTML structure for creating a table. 105
So to start off we create this table tag and we also close it and everything in between is the actual 106
content of our table. 107
So this just creates a simple table. 108
Now by default your browser will style the table to not have any borders or padding or anything style 109
related. 110
Now in order for our table to actually start holding some pieces of data we're going to have to create something 111
called a table row and and between the open and closing tr tags is where the data for that row is going 112
to go. 113
And this section of code will just create a single row inside our table. 114
So again with no associated styling. 115
So if there's nothing between these two tags then you won't actually see anything appear on screen. 116
Now the next part is our table data or rather our table cells that we create using the td tag, and in 117
between the open and closing td tags we place the actual data that's going to go into that cell. 118
And this is a single table cell that's going to contain the word Angela. 119
And it's going to go inside the first table row. 120
And so over here, and as you populate your table with more rows and more data then you will see the structure 121
reflected on your website. 122
So the biggest hurdle that you have to get over is that there are no table columns, all that you're doing 123
is going from top to bottom defining new table rows and inside each row you're putting in individual 124
cells and each cell gets placed horizontally one after the other creating, effectively, the columns. 125
Now, while the main job of tables is to display structured data, you can also see how you could use it 126
to affect the layout of the various HTML elements on your website. 127
And that's what we're going to look at in the next lesson.