Hello friends,
You all are welcome in this HTML series.
In the last segment,
We learned HTML headings, anchor tags, and image tags.
I hope you have tried all the examples and combined the Anchor and image tag.
If you have faced any difficulty while performing those examples, you can inform us on forum.learnvern.com.
We will try to resolve your issues as soon as possible.
Today’s topic is HTML tables.
The HTML table is a fundamental element while we design a webpage or website.
We can design a good layout using the HTML table.
The table is useful for fixing different components of a website like a navigation bar above the homepage or a big image or the content portion.
In short, a table is useful to design any webpage or to give a proper layout to the website.
So,
Let’s start today's segment on the Table.
First, What is a table?
Table tag is created by combining rows and columns & the tabular format we get is called a table.
So, by the definition, we understand that the fundamental elements of the table are rows and columns.
Normally, horizontal is called a row & vertical is called a column.
You must have seen excel.
We have many cells present in excel.
So, the space where the horizontal rows and vertical columns get combined is called a cell.
So,
Here the concept of the table is clear, that it is used to display data in tabular format and we can say it is row & column format.
As I said, the HTML table is very useful in managing the layout of the page.
For example: To structure the header section, navigation bar, body content, footer section, etc.
Normally, we use div tag also.
In today’s session, I will introduce the Div tag.
A proper layout is generated by using the div tag with the table.
Let us move further with the examples.
If we will learn the table with the help of the examples we will understand it faster.
So,
Firstly I will give a theoretical overview before moving further to the examples.
So, here is an example of the table.
As we know that HTML starts with an HTML tag,
In the same way, the table starts with the table tag.
Under table tag, when we start the table, we will write the <table> tag and end it by writing /table.
As I said, every table is formed with a combination of rows and columns.
So,
We have to start a new row with <tr> tag & and we have to use </tr> tag while closing the row <tr> stands for Table Row.
We can add any number of rows to our table by using multiple tr tags.
Now,
When we create a table, the first row has to be used for the headers.
Like,
If we are creating registration or an attendance table for a student, we have to put student id, first name, last name.
So these three things: the student's id, first name and last name are the headers.
So, to define the header <th> tag is used called the "Table Header" & the data we need to fill in columns can be filled using the td tag.
Usually, there are multiple <td> tags in the table, but only one <th> tag will be present in the first tr.
The header is only defined in the first row, after that we will use the td tag in all the rows.
So, let us see the example practically that has been explained theoretically.
So,
Firstly I will open a blank sublime text and set it on HTML, as we all know that if we want to write HTML5 code it starts with <DOCTYPE html>, <html> then <head> then <title>.
Title should be "Introduction to Table" then </head> tag then <body>.
Inside the body tag, we have to create the table.
So, for creating a table what we will do is,
Firstly, we will take a table tag
For creating a table we need to add the headers in the first row (as learned in the theoretical explanation).
Here starts the first row.
In my first row, I will add a header "Id".
After Id,
I am adding another header that is first Name and Last Name.
So, we have inserted all the headers (ID, first name, last name) in the first row & the row ends here.
Now we start another row.
In another row, we are using td, table data.
Guys, make sure that "th" is for the header and will come in the first row.
Now we will add the td, table data.
In the td tag,
we will add 1, student's name (ABC) and last name (XYZ) Now save,
For saving,
I made this HTML folder on the desktop,
I will rename this table.html.
So, the table.html is getting saved.
Here is our program & this is the example of the table.
The code that we can see here, we have created a simple table here in which we added headers in the first row and data in the second.
So, this is the example of the table.
Where in the first row, we get the ID, first name and last name & that is the data.
As we have defined ID, first name and last name as headers, that is why they are shown in bold here.
I am zooming in.
We can see ID, first name and last name in bold.
After that, this is the first row of the table where the Id is 1, ABC is the first name and XYZ is the last name.
That is how we create a table.
Now, if we want to add multiple rows,
We will write 2, DEF and PQR in the second row under the td tags.
So here is our second row.
If I copy both of these and paste them again,
Save and reload;
Let me update the Ids.
So, this is our dummy data.
So,
As we saw, these are our headers (Id, First name, Last Name).
After that, we have made four entries in the table.
We have made the first name and last name the same & here are our Ids.
So this defines the first row, second-row, third row, and fourth row.
And this is the header.
So this is a very simple example of a table.
Now,
We also have some variations in the table, as this was the basic example.
So, we will also see the variations, like the border is not present in the table, so we will add the border and make changes.
Currently, we will learn the supportive tags.
Our first table tag is <table>.
The table of HTML always starts with a <table> tag.
As we saw in the example when we created a table, it started with a table tag.
After that, we used the <tr> tag to start a row.
After that it is the header, to start the header we used the th tag.
And if the header is used once we do not include it again.
If we want to add it, we can. That is not a big deal.
We can add multiple headers but usually, the tables contain one header & the rest portion is the data portion.
That is why we use <th> only once in a table.
If we use <th> multiple times, usually no error is thrown.
Let me give you an example.
I am copying the header row and taking this complete anywhere in the middle.
And when I run it after saving;
Here it is.
We have used the header tag two times.
The output is given & no issues are there in the output also the program runs perfectly.
But the table is not shown properly, because we have never seen a table with multiple headers.
If a new table is starting after the first, it is another concept.
But, two headers in a single table is not suitable.
So we normally use the header tag only once.
The next tag is the <td> tag.
In the entire table,
Whenever we need to enter the data, we will enter it inside the <td> tag.
This is a new tag, Caption tag.
Whenever we create a table, we need to give information to the user (that following table is for this purpose or represents this thing), for this we use the caption tag.
So, if this is the table, I will use the caption tag above the table.
Here I am explaining that (we took the example of a table here).
The caption I wrote is "This is a Table" and then run.
So,
When I run this,
We got a header on the top (that this is the table) & below is the example of the table.
So, you can pass any information to the user by caption tag.
Next is <tbody>.
Here are three tags, <tbody>,<thead> and <tfoot>.
All these three tags are the tags of HTML5 and are an example of semantic tags.
As we learned earlier, some tags pass the information to the user and browser but no difference will appear in the output.
So, these three tags are semantic level tags.
These tags define that the tag which is in the head is the header tag, the t body tags are data level tags & the t footers are the last tags.
So, if we use t body and t footer tags in our table, it will be something like this.
The row after the table is the header row.
We will add t head & we will add the first row into the head.
The portion after that is the t body. Same
So here,
We have inserted the first row in the t head.
And inside the t body all the rows after that.
Save and reload!
So as we can see when I reload this page, no change can be seen and the table is shown as it is.
But the t body tags are semantic level tags that are useful for good programming, and it also informs the browser & the user, which segment is under t head is related to the head & the segment under "t body" is related to the body.
While using t body and t head tags,
If we see this is in CSS (that we will learn in the next session), when there is a specific CSS that has to be given to the header tag, we can give it by using t head & if there is any CSS that has to be given to the body, we can give it by using the t body tag.
Currently, the CSS portion we will learn in the next course, Now, we are only focusing on the basics of HTML.
So, there are our two tags T head and T body.
If we are adding the footer tag, similarly we can add it under t foot.
Copy and paste!
So, here is the last tag that I have added, the same as the fourth tag is under the footer tag.
Here we saw these three semantic level tags i.e., t header, t body, and t footer.
So, in total, we saw the tags from <table> to <tfooter> that are used to create a table.
Now,
We will use two attributes also that are present here.
The first one is rowspan & the second is colspan.
So firstly,
The table is not shown properly, so we will temporarily add a CSS to our table, to add the border.
So as we saw, when we add CSS, we must add it under the head tag.
So, <Style "type=/css">
Now,
I will add the CSS under this style tag.
So let us say,
I want to give a border to the table.
So now here under table tag "border: 1px solid";
Save and run!
So, as I just gave the border to the table I can see the table is within the border.
Now, we will learn how can we write CSS,
Currently,
I am explaining with the help of an example if we want to give CSS, then we have to write the property and the value in that way, so the name of the property then column and value (My border value is 1px which is here in the output) and then solid so that it can be shown solid.
If I want to give colour, I can do the same.
But, currently, I gave a border to the table & I can see the border around the table.
If I give a border to td, every border will be shown separately.
So, table tr td { border: 1px solid;
Now, every td is identifying itself in borders means as we give data to the border, then every td is shown with different borders because the CSS is not affecting the Id, Firstname, and Lastname as this is not td tag but, it is the th tag.
So,
If I want the th tag to be applied the same way, I will write a table, td th so that the same thing will apply to our headers.
Now, here we got all our td in borders in this output.
So this is a proper table-like structure.
If I want to use the rowspan attribute,
Let's say this first row under Id 1 and 2,
I want to place only 1 Id & here I want to show 2 values, in that case, I will create a single cell by merging 1 and 2.
For that, I will use rowspan
For rowspan,
Let us say, I want to apply it to 1 and 2.
So, in the body under td.
I will apply rowspan="2">1<td> because I want to merge these, so I do not want this one td,
And I am commenting that I am removing this from here.
So save and reload!
As you can see, the cell got merged into one cell and the remaining areas as it is.
So, what we have done here is; we have merged two rows horizontally, which is why we used the rowspan attribute.
If I want to merge the columns,
For ex: (ABC and XYZ), in that case, I will use the colspan attribute.
for using colspan, <td colspan="2">ABC</td>.
As I need two columns, I have to remove XYZ beside the ABC, and here it is that both the columns got merged.
So if we look here properly, when I applied the rowspan attribute, the two rows combined & got merged but, when I used colspan two columns got merged.
Now, every time I use rowspan or colspan, I remove one td to balance and manage the table structure.
If I do not remove this and keep it as it is, my table gets uneven or does not show properly because I gave colspan to ABC means I have merged two columns.
So,
By doing this, I am adding a new column to the row the column is showing, but going out of the structure means there is no heading on XYZ.
Same,
When I added rowspan in the Id, my id is getting merged but when I put the second id as it is, what happens is that the space gets occupied in the column beside.
So, while we are working on the design, table or using rowspan or colspan,
We have to make sure that if we add an attribute, we have to remove a tag it's td or tr.
So,
That our table structure will not get misaligned.
As you can see,
When I add XYZ again, it is going out of the table.
Here,
When I show 2 again in the next row, then one id is as is but the second is also present here (two Ids), which is a misplacement of the table.
So take note,
Every time we use rowspan or colspan attributes with tables, we have to keep the structure in mind.
And we have to add enough tags that can be shown once we merge. If I remove XYZ and 2 from here,
After running, the table is showing properly.
The rowspan and colspan are working properly.
So this is the example of the table.
We have seen all the table tags, two main table attributes, and how to merge the columns.
We will see the list in the next topic:
How we can make a list in HTML and how many types of lists are available in HTML.
This we will discuss in the next topic.
For today's segment of the table, we need to perform a practical.
So,
I request you all guys to try and perform the example shown here so that you can understand the table properly.
Without practice, it might be hard to understand.
So for that,
I request you guys to perform the example of the table given to you here.
If you find any issues or errors while performing the examples, you can inform us on forum.learnvern.com.
We will revert to you with the possible solutions as soon as possible.
We will see the types of lists in the upcoming segment.
Thank you!
Share a personalized message with your friends.