So the next element I want to talk about is the HCM l table.
So the table is how we create charts or tables like this one here on the Indian page for table.
There's a table here you can see of a chart.
There's another table here for colors and then here's a few examples of the types of things that we're
going to work on.
So these are tables in nature.
They're pretty simple.
Obviously they're not the most beautiful things without styling but they are very useful to display
information in a tabular format.
I'm going to go ahead and comment.
A lot of this file out remember in sublime command slash and I'm going to put in a new table element
and inside of every table and this is where it gets a little tricky because there's a few different
ways of doing this.
The first we're going to show you is we write a t r element which stands for table row and then inside
of each table row you put a t d element.
So I'm going to just write this out just to show you a pic first then we're going to come back and discuss
it.
So tiddy and we're just going to put some random text here so let's go back to colors red and orange
and let's leave it at that.
I refresh my page and I have a beautiful table.
However I don't have any border on this table so it's hard to see what's happening.
You would do this using CSSA.
Ordinarily this is not a really great idea the way that I did it here with a border attribute.
This is sort of the old way of doing it.
This is how you could do it back in time for basically before things became more oriented around doing
all your styling in your C Ss so you could still do it.
I'm just going to add here just to show you what's happening.
So what I've done is made a table that is one row and it has two elements to TDL instead of a row.
So I can make another row and I'm going to make green
and yellow
and take a moment to just think about what this should look like when I refresh.
We all have two rows now red and orange and yellow and green.
So again we've got table we've got t r for each row and then a T D for each cell.
So that's great.
The next thing though that I want to show is how we could create a heading on the table so let's let's
change our data a bit and let's make this table about people.
So we'll have something like name and age and then below that we'll have you know name is or maybe this
is dogs that rusty My dog has to watch it.
My other dog who is 13 and so on.
So to do this we want name and age to be part of a table kind of the bolded heading of the table.
And so there's another element.
We'll make another row and rather than Tweedy's we're going to use a tag called Th.
So th's for a table head or table header.
And we're going to have a name and age and then our first row will go ahead and fill out Rusty and his
age is to then our next row will be Wyatt and his age 13.
It's good for a dog.
So I refresh the page.
Oh well you can see my beautiful diagram this comment that out.
And now here's my table.
So I've got my th's in one row and then if I had another row with two elements and then another row
with two elements.
So one other thing we can discuss here.
There is a slightly more complicated way to make the exact same table.
And it's really more complicated it's just another tag or two that gives our table more meaning.
So right now our heading information is two headers are just part of a regular TR.
So there's no distinction between this TR And this TR They're both just table rows.
Well initially of all five again the emphasis is on making each team out and having markup that is somewhat
meaningful.
So that if some other code is looking at this site and someone who is using a screen reader screen reader
code can see my aged him HMO and read it and it will know the heading in it will know what the body
of the table that might behave slightly differently than if it just reads all the roads out loud.
So what we do there are two elements that we can add and there's a T head and a t body and these will
not make a difference at all in the appearance.
But I can do is just move the heading stuff everything that corresponds to this top part into a T head
.
And then what I'll do is move the actual body of the table all the content
into the body so it looks identical nothing should change.
And let's just do one other quick to change here so let's add another column so this will be name age
and breed.
So resti is a mutt and why it is a golden.
There we go.
So that's the basis of tables.
Again they're not usually that ugly.
We usually use C S S and so this is just a normal table without any styling.
And then we'll go and see assess and change the fonts and add a border and background colors and all
of that.
Okay great.