All right.
So previously we managed to get our website to include images as well as
links. So we added these image tags as was anchor tags
which can take us to external sites, but also to internal sites,
like the brand new my hobbies page that we created,
or the contact me. Now in this lesson,
we're going to take things a little bit further. In our personal site/CV
I want to have a section where we can list our work experience,
so what we've done and when we've done it. Currently,
if we went into our code and say below that unordered list,
and, um, we add a h3,
let's call it work experience. Now,
if we added a standard paragraph tag and we said maybe 2010
to 2013, um,
let's say Lead Developer at Tempo App.
So let's save that and take a look.
And if we refresh then it looks like this,
which is all well and good if we have that range,
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 a researcher,
uh,
at Institute of Cognitive Neurosciences.
So let's save that and let's refresh and you can see that it looks really
1: right? Like this part
0: and this part,
they're not really indented at the same level horizontally and everything just looks
really messy.
So how can we implement something that looks nice like this where there's
even a bit of padding in between and everything looks really regular?
Well,
one of the ways that we can achieve this using just HTML is to create a table.
So if we have a look at the docs on MDN and we look at table,
you can see that a very simple table just looks like this.
This is a bog-standard, simple table.
But tables can get really complicated as well
and you can use it to structure and represent data in your website.
So we could have table headings, we could have different cells,
we could have column groups and columns,
we can have captions and a whole bunch of things. 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.
So let's first add a horizontal rule here between our table and these two links.
And let's use auto-complete to
add a table tag for us. Inside the table
we can create table rows and also table data,
which are essentially like cells.
So say if we create a brand new table row and it's really helpful that
auto-suggest actually tells you what each of these tags are.
So let's go ahead and hit enter.
So this is a single row
and if I want to create another row underneath then I would just have to create
another tr. Now inside the top row,
I'm going to have two table data elements or rather two cells in this single
row.
And to represent the cells, I'm going to use the td or table data element.
So the first cell is going to contain my date
and the second cell is going to contain what I did.
So that's our first row complete.
Now let's go ahead and create another two cells or another two tds inside our
second row. So let's again, copy and paste, um,
the date
and the work into the table
data elements.
And I'm going to delete these two paragraphs. Let's hit save,
go back to our website and hit refresh and see what it looks like. Okay.
That's already looking a lot better than before, right?
It's being a table means that all columns our structured together.
So these two lines are structured so that they are indented to the same place
and it makes it look so much neater than before. Now,
aside from having just rows and cells, tables also have headers,
body and footer mirroring what we have for our HTML websites.
And you can declare them quite simply by writing thead for table
head, and tbody for table body,
and tfoot for table footer. Now inside the table head,
we can add some titles to each of our columns
and they get formatted by default in bold.
So if we create a new table row and inside this row
instead of creating table data or td elements,
we're going to create th elements or a table header cell element.
And inside here, we're going to give the name of our first column
which is going to be Dates.
And then we're going to create another table header cell
and this one is going to be the work that we did.
So let's hit save and hit refresh.
And you'll see that we now have table headings for each of our columns.
Now, for those of you guys who might've been playing around with this code,
you would have realized that if I cut this table row
and instead of putting it inside the header,
I actually put it just inside the main table
and I delete all of this and we hit save and we hit refresh,
you'll notice that it looks exactly the same and that's because we're using
these special elements
the table header cell elements and most browsers know how these should be
formatted. So it looks exactly the same.
But the reason why we might have different sections of our table, for example,
putting these cells inside the table
head and putting these inside the body is because sometimes we might want to
select and isolate the table
header and the table body in order to style it differently or make it function in
a different way. For example,
if we separated the table header from the table body,
we can use some code to isolate the header and fix it in place so that when
users scroll through our table, we can keep these headings on the screen.
Now that requires a little bit more fancy stuff like CSS or JavaScript,
which we'll wait until later modules to talk about,
but it's a good reason to be aware of why you might want to place the header
cells inside the head, the main body of the table inside the body,
and maybe some footer cells into the table footer. And generally,
this is the structure that you'll see for most tables with a head and with a
body. Now, if we have a look at these tables on the MDN
developer docs, you can see that they've got outlines
whereas what we've created doesn't have any borders or boundaries or outlines at
all. If we take a look at the MDN developer docs for the table element,
you can see that there's a whole bunch of attributes, such as background
color, or border or cell padding,
cell spacing,
and a whole bunch of things that you can apply to the table element to change
its appearance.
But if you take a closer look at each of these styling attributes,
then you can see they all have a little thumbs-down sign next to them.
And this is because all of these attributes for the table element are
deprecated.
And you'll hear that word quite often in Programming across many different
languages and disciplines.
And what that word means is that it's almost like it's downgraded.
It's something that they no longer recommend you using.
And the reason is because we have to always keep in mind that HTML is for
structure,
CSS is for styling and the JavaScript is for behavior.
And even though it's possible to affect the style of your website through using
HTML attributes or through using different HTML elements,
you have to try and resist when you can.
But since we haven't yet learned about CSS,
I wanna take you into the primitive days before web designers had access to CSS what
they might've done using just HTML.
And if we scroll through these attributes,
you'll come across something called border.
And this defines, in pixels,
the size of the frame that's surrounding the table.
We can add this attribute to our table element,
not to thead or table row or a table heading cell, well any of the other ones
because we're currently reading the table docs, remember,
and we can add it and say, border equals one pixel
let's say. And if we refresh our site,
then we'll see this incredibly ugly HTML table that you'll see a lot in
websites from the nineties. So let's get rid of it.
Let's just quickly recap the HTML structure for creating a table. To start off,
we create this table tag and we also close it
and everything in between is the actual content of our table.
This just creates a simple table. Now, by default,
your browser will style the table to not have any borders or padding or anything
style related. Now,
in order for our table to actually start holding some pieces of data,
we're going to have to create something called a table row.
And between the open and closing tr tags is where the data for that row is going
to go.
And this section of code will just create a single row inside our table,
again, with no associated styling.
So if there's nothing between these two tags,
then you won't actually see anything appear on screen. Now,
the next part is our table data
or rather, our table cells that we create using the td tag. And in between the
open and closing td tags, we place the actual data
that's going to go into that cell.
And this is a single table cell that's going to contain the word Angela
and it's going to go inside the first table row. And so over here.
And as you populate your table with more rows and more data, then you will see
this structure reflected on your website.
So the biggest hurdle that you have to get over is that there are no table
columns. All that you're doing is going from top to bottom
defining new table rows and inside each row,
you're putting in individual cells and each cell gets placed horizontally, one
after the other,
creating effectively the columns. While the main job of tables is to display
structured data,
you can also see how you could use it to affect the layout of the various HTML
elements on your website.
And that's what we're going to look at in the next lesson.