This is where we lived in the previous video by explaining rows and columns when it comes to a HTML
table.
It's time for us to put them into practice.
So let's get back to Visual Studio Code.
And I'm going to create a new folder for this, and I'm going to name it as table.
And I would like to rearrange this one in order.
So I'm going to name this one as number one.
And this one as number two.
And the icons.
As number three.
And I want to put this one that is an inline block element into a folder and is going to be number four
as inline versus block element.
And I'm going to put it inside it as that and the table as five.
All right.
So let me rename this one well as element.
Great.
So in future, you can see the order, how you should go about it if you want to make some reference.
So inside the table, let's create one a HTML and I can call it as index, but let me name it as table
dot HTML.
And let's use the image syntax and scaffold the HTML as that.
And let me change this one to table.
For the meantime, let me remove this once from here as we move on.
And that is, if we get back to responsive design, we will dive in in greater details.
And let me add a comment as table and let me use each one.
And we are going to create a table for customers or students.
So I'll call this one as customers.
Table.
All right.
And let me underline it.
Perfect at this point.
We haven't created any table yet, but we are on our way.
Let me open it and let me bring it here as the table.
All right.
So let's continue.
How can we create a table?
And we are going to use a tag called table.
So let's explain What is the importance for this table tag?
This is the overall container element for the table and it defines the start and then the end of a table.
And this one contains all other elements that make up the table.
So in short, this is a container that help us to create a table and remember that tables are made up
of rows and columns.
So from left to right are the rows, and from top to bottom is the column.
And for this, we are going to add a title, for example, name, gender and age.
So it means that we are going to create a row.
So in here I will say first row or let me say row one and it goes like this to R for table row.
And inside we are going to add the title.
For example, the name Gender or H.
So inside the first row, we are going to use what is called the table head.
Let me explain one more time.
The table row.
The table row contains the cells that make up the row.
And like I said, the cells are the actual content inside a specific row.
What about the table head?
The table head defines a table header cell.
So let's say that for our customers, we want to keep track about the names, about the customers.
So inside the table head, we are going to provide name and if you want to have a header of H, we are
going to use table head as the H and I also want the gender.
So it's going to be table head and gender with this one.
Let's save it and let's see what we have.
As you can see, these are the titles for our table.
Without CSS, it looks like they are together, but they are not.
Now that we have the table head, it is time for us to put some content under each.
So it means that we are going to create second row.
So our code is one as row for PTD.
Now the table head is supposed to be t h instead and the row to.
Is going to be the actual data.
So it's going to be a stable, raw.
And this time around we are going to use TD, which represent table data.
So the first name, I'll call this one as John Smith.
And the next data about John Smith is going to be the age, going to be table data and age has 26.
And lastly, about the particular user is going to be the gender.
And I will say male.
As you can see under the name, we have John Smith, age of 26 and gender as male.
One key point we need to bear in mind is that if you have three table heads, it means that we are going
to use three table data.
As you see here, we have three table heads, meaning that for the table data you're going to have three
of them.
So this is the first data.
So let's say that I want to keep track about more users so I can even copy this one.
And here I'm going to change the second user name to John Doe.
I want to make it as DOE and the age is 27 and male and let me copy for that user.
This one going to be third and then the fourth user, sorry, supposed to be this one is first and second
and third.
All right, so this am I right?
I'm going to use gifting for the second user and the age is 30 and female.
Let's save it and let's have a look.
As you can see, we have three users.
If you get back to JavaScript, we can use JavaScript to create this data dynamically, but for the
meantime, we are doing it manually.
And one thing is that, as you can see, the table doesn't look good because it lacks some styling.
And since we haven't talked about CSS, that's how we are supposed to have it.
By the next video we will play around with CSS by using what is called inline styling to style this
table to make it more beautiful than this.
Let's continue into next video.