All language subtitles for 020 HTML Tables.en_US

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

right? Like this part

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.