HTML Course Beginner to Advance | Tables in HTML | Web Development Course Lecture 8

Summary

This web-development course segment covers HTML tables, teaching how to create and structure them using 'table', 'tr', 'td', and 'th' tags. It explains the use of 'thead', 'tbody', and 'tfoot' for organization, 'caption' for titles, and 'colgroup' with 'col' for column styling. The instructor demonstrates Emmet shortcuts for coding efficiency and emphasizes styling tables with CSS over deprecated HTML attributes. The video also touches on 'rowspan' and 'colspan' for merging cells and encourages learners to practice by replicating a sample table.

Takeaways

• 🌐 The video is a part of a complete web-development course covering HTML, CSS, and JavaScript from beginner to advanced levels.
• 📘 The focus of the video is on creating tables in HTML, which are useful for displaying data in a structured format.
• 🔑 The 'table' tag is fundamental for creating tables, with 'tr' for table rows and 'td' for table data.
• 📝 The video demonstrates how to code a simple table with HTML, including using Emmet for quicker coding.
• 🖌️ It's recommended to style tables using CSS rather than deprecated HTML attributes for better practices in modern web development.
• 🔍 For a deeper understanding of tables, viewers are encouraged to visit MDN for comprehensive information on table elements and styling.
• 🔑 'th' is used to create table headers, making the text bold and distinct from the rest of the table data.
• 📊 The 'thead', 'tbody', and 'tfoot' tags are used to define the head, body, and foot of a table, respectively, and are good for organization but not mandatory.
• 🏷️ The 'caption' tag is used to define the title or topic of the table, which appears at the top.
• 🎨 'colgroup' and 'col' tags are used to apply styles to entire columns, simplifying the process of styling table columns uniformly.
• 🔄 'colspan' and 'rowspan' attributes are used when table data needs to span multiple columns or rows, useful for complex tables like timetables.

Q & A

What are the main topics covered in the web-development course mentioned in the script?

The web-development course covers HTML, CSS, and JavaScript, ranging from beginner to advanced levels.

How are tables represented in HTML?

In HTML, tables are represented using the 'table' tag, with 'tr' for table rows and 'td' for table data.

What is the purpose of the 'tr' and 'td' tags in HTML tables?

The 'tr' tag is used to create a table row, while 'td' is used to define individual cells within that row to store data.

How can you create a table with three rows and three columns using Emmet in a code editor?

You can create a table with three rows and three columns by typing 'table > tr*3 > td*3' and pressing 'enter'.

What does the 'thead' tag in HTML represent?

The 'thead' tag represents the header part of a table, containing the topmost row or rows of the table.

What is the difference between 'td' and 'th' tags in HTML tables?

The 'td' tag is used for standard table data cells, while 'th' is used for header cells, which are typically bold and centered by default.

How can you style a table using CSS?

You can style a table using CSS by defining properties such as border, background color, spacing, and padding for the table and its elements.

What does the 'colspan' attribute do in a table?

The 'colspan' attribute is used in 'td' or 'th' elements to make a cell span across multiple columns.

What does the 'rowspan' attribute do in a table?

The 'rowspan' attribute is used in 'td' or 'th' elements to make a cell span across multiple rows.

What is the purpose of the 'caption' tag in a table?

The 'caption' tag is used to define a title or caption for the table, which is displayed above the table.

How can you apply a specific style to an entire column in a table using 'colgroup'?

You can apply a specific style to an entire column by defining it within a 'col' element inside 'colgroup' and using the 'span' attribute to specify the number of columns affected.

Outlines

00:00

📚 Introduction to HTML Tables

The video begins with an introduction to the web-development course, focusing on HTML, CSS, and JavaScript. The instructor discusses the creation of tables in HTML, explaining the use of 'table', 'tr', and 'td' tags to structure data. The importance of bookmarking the playlist and subscribing to the channel for daily updates is emphasized. The video demonstrates coding a simple table with rows and data cells, utilizing Emmet for quick coding. The instructor also explains how to collapse code segments for better focus and mentions the use of 'Autosave' and 'Live Server' features in the development environment.

05:03

🖌️ Styling HTML Tables with CSS

This paragraph delves into the styling aspects of HTML tables. The instructor explains the use of 'th' to create table headers and demonstrates how to apply bold formatting. The concept of borders in tables is introduced, with a mention of the deprecated 'border' attribute and the recommended use of CSS for styling. The video shows how to apply a solid border to a table using the 'style' attribute. The instructor also covers the use of 'thead', 'tbody', and 'tfoot' tags to structure table sections and how to apply different styles to them. A resource link for further understanding of table styling is provided.

10:07

🔍 Advanced Table Elements and Attributes

The instructor introduces advanced table elements such as 'caption', 'colgroup', 'col', 'rowspan', and 'colspan'. The 'caption' element is used to define the table's title, while 'colgroup' and 'col' allow for styling entire columns at once. The 'span' attribute is explained as a way to extend styles across multiple columns. The paragraph also covers how to use 'rowspan' and 'colspan' to merge cells across rows and columns, with examples from a sample timetable. The importance of replicating tables for practice is highlighted, and the upcoming mini project on creating a resume website is teased.

15:07

🛠️ Practical Application of Table Elements

The final paragraph focuses on the practical application of table elements. The instructor guides viewers through the process of coding a complex table with merged cells, using 'rowspan' and 'colspan' attributes. The paragraph emphasizes the importance of understanding how to inspect and replicate such tables for better comprehension. The video concludes with an invitation for viewers to practice creating tables and a reminder of the upcoming mini project to build a resume website, which will consolidate the skills learned throughout the course.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages and web applications. It is the foundational building block of the internet, defining the structure and layout of web content. In the video, HTML is the main focus as the instructor discusses how to create tables, which are a key element for organizing data on web pages, using HTML tags such as 'table', 'tr', and 'td'.

💡CSS

CSS stands for Cascading Style Sheets, a language used for describing the presentation of a document written in HTML or XML. It provides a way to style and layout web pages, including colors, fonts, and spacing. In the script, CSS is mentioned in the context of styling tables, such as adding borders, backgrounds, and padding, which is crucial for enhancing the visual appeal and usability of web content.

💡JavaScript

JavaScript is a programming language that allows interactive web pages and is an essential part of web development. While not the main focus of the video, JavaScript is part of the trio of technologies, along with HTML and CSS, that are taught in the course. It's used to create dynamic content, handle events, and manipulate the Document Object Model (DOM) of a web page.

💡Tables

In web development, tables are used to display data in a grid-like format, making it easier for users to read and understand information. The video script focuses on teaching how to create and manage tables in HTML, using tags such as 'table', 'tr' for table rows, and 'td' for table data, which are vital for structuring content on web pages.

💡Table Row (tr)

The 'tr' tag in HTML is used to define a row in a table. Each 'tr' element contains one or more 'td' elements that represent individual cells within that row. The script explains how to use 'tr' to create multiple rows in a table, which is essential for organizing data vertically.

💡Table Data (td)

The 'td' tag stands for 'table data' and is used to create individual cells within a table row. In the script, 'td' is used in conjunction with 'tr' to fill in the rows with data, demonstrating how to structure information horizontally across a table.

💡Table Header (th)

The 'th' tag is used to define a header cell in a table, which typically contains bold text to denote column or row headings. The video script explains the use of 'th' to make certain cells stand out as headers, providing a clear distinction between the headers and the data in the table.

💡Autosave

Autosave is a feature commonly found in code editors and integrated development environments (IDEs) that automatically saves changes to a file at regular intervals or after specific actions. In the script, Autosave is mentioned as a convenience feature that ensures the code is saved without manual intervention, allowing the developer to focus on writing code.

💡Live Server

A Live Server is a development server that updates the web page in real-time as you make changes to the code, without the need to manually refresh the browser. The script mentions the Live Server, which is used for testing and previewing web pages during development, running on port 5500 in this context.

💡MDN

MDN stands for Mozilla Developer Network, a platform that provides comprehensive documentation, guides, and resources for web developers. In the script, MDN is recommended as a go-to source for further information on HTML table elements, attributes, and styling, indicating its value as a learning resource.

💡Deprecated Attributes

Deprecated attributes are HTML properties that were once used but are no longer recommended due to newer standards or better alternatives. The script warns against using deprecated attributes for styling tables in HTML5, advocating for CSS as the preferred method for applying styles to web elements.

💡Colspan and Rowspan

The 'colspan' and 'rowspan' attributes in HTML are used to make a table cell ('td' or 'th') span across multiple columns or rows, respectively. The script explains how to use these attributes to create complex table structures where certain data points need to occupy more than one cell, as seen in timetables or categorized lists.

💡Table Sections

In HTML, a table can be logically divided into three main sections: the header ('thead'), the body ('tbody'), and the footer ('tfoot'). The script discusses these sections, explaining that they allow developers to group rows and apply different styles or behaviors to different parts of the table, enhancing the semantic structure of the data.

💡Caption

The 'caption' element in HTML represents the title of the table and is used to provide a summary or description of the table's content. In the script, 'caption' is shown as a way to add a heading above the table, which is important for accessibility and understanding the context of the table.

💡Colgroup and Col

The 'colgroup' and 'col' elements in HTML are used for defining and styling columns within a table. 'colgroup' can contain one or more 'col' elements, and it allows for applying styles to an entire column or a set of columns at once. The script demonstrates how to use 'colgroup' and 'col' to apply a background color to specific columns in a table for stylistic purposes.

Highlights

Introduction to the complete web-development course covering HTML, CSS, and JavaScript from beginner to advanced levels.

Explanation of how to create tables in HTML, a fundamental aspect of structuring data on websites.

Use of 'table', 'tr', and 'td' tags for creating table rows and data cells.

Demonstration of creating a table with headers and items to represent data effectively.

Inclusion of a playlist for easy access and updates on new course content.

Coding a table with the 'table' tag and utilizing Emmet for quick row creation.

Inserting data into table rows with 'td' tags for individual data elements.

Use of 'th' tag to create table headers for emphasis and distinction.

Mention of deprecated attributes and the recommendation to style tables with CSS instead.

Introduction to 'thead', 'tbody', and 'tfoot' tags for organizing table sections.

Explanation of how to use 'colspan' and 'rowspan' attributes for merging cells in tables.

Importance of 'caption', 'colgroup', and 'col' tags for defining table titles and column styles.

Practical example of applying CSS styles to table columns using 'colgroup' and 'col'.

Demonstration of how to apply different styles to table headers and footers.

Discussion on the benefits of using 'thead', 'tbody', and 'tfoot' for assigning different behaviors to table sections.

Recommendation to visit MDN for more detailed information on table elements and styling.

Announcement of an upcoming mini project to create a resume website using the learned concepts.

Transcripts

Hey, what's up guys!

Welcome to the complete web-development course

where we're learning the concepts of HTML, CCS & JavaScript

from beginner to advanced level.

Today we're going to talk about Tables.

Earlier, we learnt how list items work. How can you create lists?

Ordered and Unordered.

Today we're going to talk about how you can create tables in HTML.

And this is our playlist, which should be bookmarked

so that its easily accessible & subscribe to the channel

and click on the notification Icon because videos are being uploaded daily.

And so that you don't miss the notification of any video.

Today we'll talk about tables.

Tables look something like this.

You might have seen in websites and

basically, it helps to show one type of data in a format very easily.

So, you can have headers.

then there could be some items in the table.

Right!

Just like this.

Here, you might write some numbers.

Suppose, you wrote Title over here.

And here you wrote a description.

So, if you want to show tables in this way in your website

then for that we use 'table' tag.

We can use two tags in it - 'tr' and 'td'.

'tr' basically means table row.

'td' means table data.

So, we're going to learn how all of this works.

Here, you might see that I've created a table.

This is our 'table' tag.

I've nested a table row in it due to which a row will be created in the table.

So, suppose if I want to say that this is our row, the upper row.

If I want to create this row,

I'll make a table row in the table for that.

And then if I need to create the lower row, then I'll make another 'tr' for it.

And if I need to create another row below it, then I'll make another 'tr' for it.

So, in this way you'll make different 'tr'(s) for the table that you need to make

and if you want to store data in them, for example,

if I want to store a data - Serial No.

then I'll make a 'td' for it, then I'll create another 'td' for Title.

and then another 'td' for description.

Let's try coding it.

In the previous video, we learnt how to make Unordered & Ordered list.

If you want you can minimize this.

To minimize, you've to come to the side bar where numbers are written

with which you get to know which line are you coding in.

You might be able to see an Icon beside it, with which you can collapse any segment.

So, I'll collapse this entire 'ol'

so that it doesn't distracts us again and again.

So, we'll collapse it.

As you can see, the entire 'ol' has been collapsed.

This is the benefit of an Editor.

You can expand it as well and then collapse it again.

Below this, we're going to write our table, so

we'll create a table - 'table' and we can use Emmet in it.

After table, we'll write 'greater than (>)' and we'll include 'tr' in it.

Suppose, I need 3 rows in it & 'tr*3'

and then press 'enter'

So, here 3 'tr'(s) have been created in a table.

Now, I need to insert data into these 'tr'(s).

Suppose, I insert data in the 1st row.

Suppose, I keep three 'td'(s) in it, so

'td*3'

Hit 'enter'

So, here I've three data elements in a row.

So, we'll read it in this way.

Here, we've a table

in which I've kept 3 data elements in its first row which means

in this row, there'll be three columns

in which these values would be added.

Suppose, I want to keep the values in it.

So, in this way I've these values.

And below them I'll mention subjects,

which subject I had.

So, I'll copy this.

And we'll paste it here.

Suppose the subject was Mathematics.

In marks, let's say 98.

And in passed we'll write 'Yes'.

And then, I'll copy the same thing in the lower row.

So, I'll copy and paste the same thing in the 3rd row.

And supposedly, let's write here English.

In Marks, let's say 12.

And in passed let's write 'Fail'.

So, 'No'.

You don't need to save it because we've already switched on the 'Autosave'.

Here, you can see 'Autosave' is switched On.

And along with that we've also switched on the Live Server.

So, its working on port 5500.

By the way, to run this Live Server, you need to install the extension of this Live Server.

After that, you need to run this live server below.

After that, when you'll open your browser, you'll find your website running on this port.

As you can see here, our table has been created here.

In this table, these three things are there in the top row.

And the middle row consists of another three things

and the bottom row consists of another three things.

So, its this easy to create a row.

If we want to know more details about this table then we'll further search it

on MDN.

So, we'll search 'table mdn'.

Here, we can read entirely about the table elements.

What are the things included in the table elements?

What attributes are included?

How should we do the styling of the table?

So, there used to be some attributes for the styling of the table

in HTML 4

In HTML 5, all of those attributes have been removed.

You're recommended to style the table with the help of CSS.

So, if you want to to add border, background even

if you want to give spacing between the cells

and padding as well. You should do that with the help of CSS

and not with the deprecated attributes.

I had told you about Deprecated attributes.

These are such attributes whose support has been removed

and you shouldn't use them in your modern websites

because you may lose their support anytime soon.

If we move further in this documentation, then we can read more things

that how you create a table and define table data with the help of 'td'.

You can use 'th' instead of 'td'

and so that cell would basically become your header

Means it'll get a little bold and it'll look differently.

It'll standout

in comparison to the rest of the elements, so

you can convert those cells into headers which you need to focus more on.

For example, here, they've written - 'Animals'

So, the 'Animals' part will seem highlighted and bold.

You can see here that 'Animals' has become bold.

And then there's Hippopotamus, Horse

So all these are created under 'th'

The stallion and mare would have been crested under 'td'

whichever word is in bold, is basically crested under 'th'

Let's see how it works.

So, in my website I want all my elements in the upper row to be Headers.

All of them should be in bold.

So, for this, I need to come to the code and click on File Explorer.

And then all these elements should be written under 'th' instead of 'td'

So, I'll copy 'th'

and then each 'td' will be replaced by 'th'

Let's try running it.

So, you can see Subject, Marks and Passed are now written in bold.

Which means these are our table Headers.

Apart from this, you might have noticed another thing that

there are borders in their table as well.

You can see that this line is visible.

But there isn't any line in our table.

So, by default borders don't appear in your table, if you want to show the borders

for that you can use a deprecated attribute which is

'border'

So, you'll write ' border ="" '

and if you don't write anything here, it'll still work

and you can see that an ugly border has appeared.

So, the outer border belongs to the table.

And then the inner borders actually belongs to the table data.

All the 'td' elements contain borders in them.

That is why its looking like this.

If you want to achieve this type of styling,

where you can see this single line border

so, for that we'll be using CSS

You can use a style attribute here.

style attribute is a global attribute

In which you can write 'border' and we can define it as 'solid'

and if we run it here, then our table is in a solid border

But, if you notice borders appeared only above table

Actually, we want borders above table headers and table data as well

So, for that I need to define that border separately.

And then I need to convert collapsed into 'true'

So, we'll be talking about CSS.

I don't want to go deeply into CSS because we haven't learnt about CCS until now

So, for now let's assume that

here, its not 'style' so, we'll remove it.

and like earlier there was 'border', let's keep it that way for now

to understand it properly.

I don't want to confuse you by showing the syntax of CSS.

We'll deal with that properly while we're studying CSS.

But, if you want to learn on your own how the table is styled

then you can visit this link - Styling Tables

where they've clearly mentioned how a table is styled

By default, your table looks something like this.

In which you need to work through styling the table.

So, you can refer it with the style sheet here and

then you can put properties like this in CSS

so that your table looks in a stylish format.

So, I'll give the link in the description below

where you can visit and read that how does the styling works

Now, let's move forward without focusing much on styling.

So, you can see that you can make funky tables like this.

Now, our table is looking like this, there isn't much of styling in it.

But, there are more concepts in a table, let's understand them.

There are more tags in a table.

You can see the header over here, this section is totally different.

there is a body part in the middle which contains rows of the table

and then below they have made a footer.

So, in this way we also need to make a table.

We've 3 tags, one is 'thead' which contains the head of the table.

Another is the 'tbody' which contains this entire body.

And lastly 'tfoot' which contains the footing of the table.

We've written all of it here.

Let's understand it one by one.

So, there are 3 tags, one is the 'thead'

another is 'tbody' and lastly 'tfoot'.

Here, we've written 'thead' element defines a set of rows

defining the head of the columns of the table.

'tbody' - The 'tbody' element encapsulates a set of table rows

indicating that they comprise the body of the table.

and then lastly there is 'tfoot'.

'tfoot' element defines a set of rows summarizing the columns

of the table.

So, let's deal with them one by one in the code.

So, If I put the upper row in the 'thead'

it'll become out 'thead', so 'thead'

press enter and then what I need to do is

select this entire part and press 'Command X + command B'

with this it'll be transferred into our head section.

the part after this, supposedly this one

I want it to be in 'tbody', so for that

I'll write 'tbody' and then press 'enter'

and then I transfer the middle part including the two rows into 'tbody'.

And then lastly, we can make a footer.

Supposedly, like this.

'tfoot'

and suppose we'll make a row in it.

'tr'

and I'll make two 'td'(s) in it.

In the first 'td' we'll write Passed.

And in the second one we'll write 'Yes'.

Let's make put them in 'th' instead of 'td'

So, I pressed it by mistake.

All of the 'td'(s) will be converted into 'th'.

Alright!

Let's see how it looks.

So, you can see our table looks something like this.

Here, the upper part comes under 'thead'

Both of this part comes under body

And the last part comes under footer.

Here, I would like to point one more thing that

You don't need to write 'thead', 'tbody', 'tfoot' in your code.

Means if you omit and write it simply

if you don't add 'thead', 'thead' and 'tfoot'

If you kept it simple like this

it'll still work.

Alright!

If I comment out them for now

to comment them out, we've to click on 'Command /'

du to which our browser won't read the comment part.

So, you can see I've a simple table which contains multiple rows

in which some have header and some have data

this is exactly looking similar.

Its looking exactly similar.

Then what is the difference?

Difference is just that you can use them separately in a proper way.

You can assign different behaviors to the sections in your table

So, this is just a good practice, but not a required practice.

Right!

So, lets set it again by command.

Let's make everything like before.

So, basically this is just a recommended practice but not a required one.

Your browser will still work.

Your code will still work even though you don't write these 3 things

So, this was very simple.

After that, let's talk about some more attributes.

So, next attribute is going to be 'caption', 'colgroup' and 'col'

So, 'caption' basically helps you to define the topic of the table

The 'caption' element specifies the caption or the title of the table.

So, its helpful for that.

And then, next we've 'colgroup'.

With the help of 'colgroup' you can assign different styles to different columns

So, if you want you can give a particular styling to an entire column

otherwise if you didn't have 'colgroup', then you might have to

visit each row and assign a different styling to a particular column.

So, with the help of 'colgroup', you don't need to do it.

You just define it in one place that this column should be styled in this way.

And then, the entire column will follow one particular styling.

Alright!

So, we use 'co' with 'colgroup'.

Because you can put groups of different columns in 'colgroup'

So, we've 'colgroup' and 'col'.

The 'col' element defines the column within a table

and is used for defining common semantics on all common cells.

It is generally found within a 'colgroup' element.

So, we use 'col' in 'colgroup' element.

Let's deal with the code.

First of all, let's see how 'caption' works.

Let's make 'caption' in the table before the header.

'caption'

And we can define 'My Marksheet' in it.

So, this caption will be visible at the top.

Here, as you can see - Mt Marksheet.

It is visible at the top.

So, basically this is the title of this table.

Then, we can define a column group. Right!

So, 'colgroup'

and we can define different columns in this 'colgroup'

Suppose, this will be my first column.

So, column is basically an empty tag in which you don't need to mention closing tag.

Its an empty element.

And we can define our span in it.

So, in span attribute we can define the no. of columns we need to cover

with the styling, Right!

So, in this 'col' element how many columns are we going to style?

Will we style one column, two or three columns?

So, by default it styles one single column.

If I don't write this here and suppose

let me add a styling here, so

'style'

Let's give each one a background color.

Let's set the background color to blue.

So, this is a part of CSS with which we can give the styling.

So, what I did was, I assigned a blue color background to one column

Let's try running it.

So, as you can see here.

One column has been colored blue

so with this entire column is colored now.

If I want to toss this styling to the other 2 columns

in both Subject & Marks

this styling should be there.

So, for that I'll use 'span' attribute'.

'span ="2" '

due to which this styling will span in both of the columns.

Alright!

So, as you can see these two columns contain this style.

If I write here 'span =3'

then this style would toss over 3 columns.

You can make different 'col'(s) because this is a 'colgroup'

So, if you want you can make it for 2 columns

and you can define one singly below

which will move on to the next one, right!

So, we don't need to define 'span' over here.

And let's keep its color red.

Alright!

So, we'll run it and as you can see here

2 columns have blue background and last column has red.

Alright!

So, the 'colgroup' works in this way.

You can define different columns in it.

With its help you're able to define how you want to style your columns

And with the help of 'span' you define the number of columns to be styled.

You can put number of columns in a 'colgroup', as you desire.

Apart from this, you can assign different style to your heading.

Suppose, we want the background color of the heading to be yellow

With this, entire head would be colored yellow.

Right!

So, you might have understood how useful 'head' is.

With this, our entire 'head' was colored in one step.

And if you want you can assign different color to your footer.

So, let's use the color - 'style "background color = thistle''

and you can see the footer has been colored differently

If you aren't able to understand how I'm writing background color in style, then

basically it is CSS, again

when we'll learn CSS, then it's going to be very easy for you.

We use it a lot in it.

This is basically in-line CSS, but don't be tensed about it now

with its help I'm basically telling you about how you can

style everything together. In your header, different columns

and in footers as well.

So, what is the benefit of making them?

Apart from these attributes, we've 2 more attributes.

Which I haven't mentioned in my notes because we don't use them much.

they are basically - 'colspan' & 'rowspan'.

'colspan' tells us when a table data takes the space of 2 columns

So, there you can write 'colspan2 or 3' as you wish.

And then 'rowspan' is used when you want to give table data the space of 2 or 3 rows

So, you can use it in 'td'.

Alright!

Or you can also use it in 'th'

So, this is our 'td' & when we'll use it then how will it look?

Suppose, I want this 'Passed' to take the space of 2 columns below.

and 'Yes' should shift to the right.

So, for this I need to come back to the code

and in the 'th' of 'Passed', I'll write

colspan ="2"

and you'll see here that 'Passed' shifted itself by taking up the space of 2 columns

and 'Yes' had shifted to the right.

So, here it's making more sense, but it might not always make sense.

You might have seen this type of tables in timetables, colleges or schools

Where this type of table is made

where some of the data takes the space of 2 or even 4 columns

they even takes the space of 2 or 4 rows as well

As you can see here, this data 'Terrestrial Planets'

Actually it has taken the space of 4 rows & 2 columns.

Similarly, 'Gas giants' has taken up the space of 1 column and 2 rows.

'Ice giants' took up the space of 1 column & 2 rows as well.

So, they are created in this way.

If we inspect this then you can easily read it.

But, before inspecting I would highly recommend you to try replicating this table

and let's see how you're able to do it?

It'll be easy for you, basically what you've to do is

you need to move ahead row by row, right!

In the table, first we'll write the first 'tr'

after that we'll write the 'tr' below it as well.

In the lower 'tr', you'll right 'Terrestrial Planets' for the first time and

in it you'll write that its 'rowspan' is four and 'colspan' is two.

After that you'll move forward after writing - 'Mercury' and so on......

But, in the row below it, you won't write 'Terrestrial Planet' again.

You'll start writing from 'Venus' & then move forward in it.

Are you able to understand?

If we inspect it once

then you'll understand it more clearly over here

Here, you can see we've 'tbody' then 'tr'

Here, the column span is two & rowspan is four

and it's working in this way.

then if we check the row below it,

it starts to fill with 'Venus'.

the next row starts to fill from 'Earth'.

So, try replicating this table in your website.

In the upcoming video, we'll be making a mini project.

With the help of all the things that we've learnt,

we'll try to make a mini project.

Basically, we'll try to make a resume website.

So, we'll deal with it in the next video.