HTML Course Beginner to Advance | Tables in HTML | Web Development Course Lecture 8
Summary
TLDRThis 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
📚 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.
🖌️ 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.
🔍 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.
🛠️ 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.
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡Tables
💡Table Row (tr)
💡Table Data (td)
💡Table Header (th)
💡Autosave
💡Live Server
💡MDN
💡Deprecated Attributes
💡Colspan and Rowspan
💡Table Sections
💡Caption
💡Colgroup and Col
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.
Посмотреть больше похожих видео
Image, Lists, and Tables in HTML | Sigma Web Development Course - Tutorial #5
CSS Course | Make a Glassmorphic SignUp Page using Basic CSS | Mini Project | Web Development 23
Formatting style and Global attributes | Hindi
DESENVOLVENDO MEU PRIMEIRO SITE COM HTML | 4#
Heading, paragraph and reading docs | Hindi
Introduction to HTML | An HTML5 Tutorial for Beginners
5.0 / 5 (0 votes)