Learn HTML Tables | Clyde D'Souza | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 2m)
    • 1. Class introduction

      1:07
    • 2. Prerequisites

      1:23
    • 3. What is HTML?

      6:36
    • 4. Introduction to HTML tables

      6:21
    • 5. Methods of creating a table

      5:15
    • 6. Creating a table

      7:06
    • 7. Colspan

      3:20
    • 8. Rowspan

      4:08
    • 9. Adding a caption

      1:49
    • 10. Grouping columns

      3:39
    • 11. Adding a footer

      3:11
    • 12. Class project

      1:42
    • 13. Exporting a table from Excel

      3:40
    • 14. Using tables in real life

      10:20
    • 15. Conclusion

      2:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

2

Students

--

Projects

About This Class

Hi everyone,

My name is Clyde D'Souza and in this class, I'll teach you how to create tables using HTML5. Tables are used in so many places around the internet and are a great tool to display information in two dimensions. However, when many people start out to learn tables, it often gets quite confusing.

So, in this class, I’ll try and demystify these concepts for you. You’ll learn:

  • To write code that produces a table using HTML5.

  • Concepts like rowspan and colspan.

  • HTML elements like thead, tbody and why they’re useful.

  • And you’ll learn how to format a table using CSS.

This course is aimed at beginner developers who are trying to learn new HTML concepts and for seasoned developers who’d like a refresher.

You can also follow each video and code with me as you learn new concepts with every video. In the end, you will get an opportunity to practice creating an HTML Table using the concepts you learn in this class on your class project.

Should you have any questions along the way, feel free to ask me a question using the discussions tab and I'll answer your questions there.

Lots of exciting things to learn ahead. So, happy learning and I hope to see each one of you complete this class.

Meet Your Teacher

Teacher Profile Image

Clyde D'Souza

Software Developer and Author

Teacher

Hi,

I'm Clyde. I'm a full-stack software developer. I've also published a book titled Mama, Tell Me a Story which is available on these platforms. It's a collection of twelve short bedtime stories that parents will love reading to their kids over and over again.

In my spare time, I like to explore other interests like writing, teaching and I've also created many other projects in my spare time.

Check out my Skillshare classes below and let me know what you think. Happy learning!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class introduction: Hi everyone. My name is like the soda. And in this class, I'll teach you how to create database using HTML. Five tables are used in so many places around the Internet and other great way to display information in two dimensions. However, when people start to learn HTML tables, it can get quite confusing. So in this class, I'll try to demystify these concepts for you. You learn to write code that produces a table using HTML5. Concepts like rowspan and gold span, HTML elements like D head, the body, and why they're useful. And you learn how to format it APL using CSS. This course is for beginner developers who are trying to learn HTML concepts. Or for seasoned developers who would like a refresher, there's lots of exciting things to learn ahead. So happy learning, and I hope to see each one of you complete this class. 2. Prerequisites: In this video, we'll take a look at what are the prerequisites for this class. For the prerequisites we have access to JSFiddle. So this is an online tool. So if you go onto JSFiddle.com, you'll see that this is an online tool. They can write some, write some code on the left hand. You see the output on the right. And if you're falling along this glass and if you're writing code that I'm going to show in each, each and every one of these videos, then you'd probably require JSFiddle because that's what I'll be using. But of course, the other alternate option is to create an HTML page locally and write some HTML code and then just run the beige locally. Apart from that, there is no real other prerequisites you don't require any prior knowledge. We will be covering. So this is for beginners. So we will be covering everything in quite detail, although everything is quite scoped to HTML tables alone. So if you have read a bit about HTML and HTML tags, you'll note, you'll notice that there's actually quite a few HTML tags. And that can be its own course in its, in its way. But for this particular class will be only covering all the tanks that are required to construct an HTML table. So these are the prerequisites for, for you, for this class. 3. What is HTML?: Before we jump into HTML, David's, let's take a quick look at what exactly is HTML. Html stands for hypertext markup language. Html describes the structure of a web page using HTML elements. A browser can read HTML cord and know and understand what content needs to be displayed and how to display this content. So you can see the HTML is the building blocks of every website that you see on the internet today. There are hundreds of HTML elements, but all follow the syntax for all of these elements follow the same format. You enclose the element name within angle brackets. C have left angle bracket, followed by the element name, followed by a right angle bracket. Then you write in all your content within your element C, you write your content right up the angle bracket. And then finally you close that element with an angle bracket, a left angle bracket, followed by a forward slash, then the element name and the right angle bracket. So it would look something like this that you can see on the screen right now. There are a few essential HTML elements that I do want to talk about. The first one is a doc type HTML bag. Now, well, it is not really an HTML element itself, but it is an important tag. There needs to be declared in your HTML page. Now what is this doc type? And this tells the browser what HTML version is going to be used. So it's a way to provide information to the browser. Now that snippet that you see on the screen is a way to declare HTML5. So they're using HTML5. But if you were to declare HTML, HTML4, if you were to write code that follows HTML4, then the doctype bag would look something different. The next one is the HTML tag itself. Now, this is just a container for all your other HTML elements. Right then the DOCTYPE tag sits outside of this HTML day, but every other day will sit inside of this HTML tag is just a container to hold all of the other HTML elements. Up. Next, we have the head tags. So you have head and four slash head. The contents that you write in the head tag I've not really displayed on the browser. In their browser, users won't be able to. See the contents on, on, on their browser window. Mostly what you end up in the head section is really just metadata about the page. You were include scripts, you can include styles, although standard things. And then finally you have the body tag. And the body tag is where all of your main website contents will go into. So if you were to display, let's say a text called Hello Students. I would, I would write something like this. I would, I would maybe write a paragraph tags. So this is a beta with sensor paragraphs, regular paragraph, right? My contents in it, hello Students. And then when I run this HTML code, I will give the output that again see on the right-hand side of the screen. Name for doing the score slightly, just slightly. And if I replace the paragraph tags with something called an H1 tag, which stands for heading one thing. And rest. I leave everything else and see if any places with h one day the output is still the same in terms of the content, but how it is displayed in a dad is different. So you can see that the text is larger. The text is larger in size and it is boiled. So just like H1, you have heading two, heading three, heading for, heading five AND heading six. Anyway, for this class though, we'll only be using the table tag and various other HTML elements that will help us construct a day when all of this code will be used. Inside the body tag, will be writing it inside the body tag so you don't have to worry about any other tags for now, right? So just to give you a big picture of bear, all this code will go and do. This is where it'll go into the surgery, be in the body tag. And for this class will be using something called has JSFiddle. Nothing with JSFiddle is that you don't even have to write all your head idle HTML body tags. You can just write all of the actual contents or the actual code in this block here. And the moment you will run this Fidel, you will see the output right here on the right-hand side of the screen. So whatever you, all the contents, all the HTML contents that you would write inside the body tag. That's the content that will go into the HTML and tab in JSFiddle. So you can omit all the rest. But of course, if you were writing an individualist standalone HTML file that you wanted to run locally, then you would have to write all the contents, all of the HTML tags, all the essential ones. With that, I think we have covered some really good basics. So with that, I think let's end this video right here and then jump into everything about HTML. Davids 4. Introduction to HTML tables: Let's take a look at what exactly is a table. A table allows you to represent data with more than one dimension. It has rows and columns. And the intersection of a row and a column is called a sell. Your information or the data will actually be in a particular cell. So what do I mean by the presents data in more than one dimension? So let's say if you wanted to compare two mobile phones based on different criteria as this would be a perfect use case for a table. Because on the x-axis, you will have your mobile phones that you want to compare, in this case, two different mobile phones. And on the y-axis you'll have the different criteria you want to compare it with. And each cell in this table give you very specific information for a particular mobile phone on a particular category. And this allows you to compare both of them in a very easy and very comprehensible way. Now, if you had to represent the same data in a paragraph format, it would be very difficult for readers, for users to read through the information and then compared it themselves. They're putting it in a day bill allows you to have that side-by-side comparison. Very dense, very easy. Now tables usually is recommended to use for only representing data and should not be used as a layout aids. And the reason for that is because screen readers and other tools find it very difficult to read information and complete information from a devil. And if you do use a table for layout, you should consider adding an attribute called roll is equal to presentation. This allows the screen readers and other accessibility tools to detect that this table is used for a layout purpose only, and then read the information accordingly. So what is the disadvantage of a table? Well, the first thing is that if you're just counting the lines of code, will be more lines of code to write a table. Then the number of lines of code to put that same information in a paragraph. Now obviously in terms of consuming the information, it they will depending on what is tuition is. But if you're comparing results, for example, putting the information in a table would be much easier to read than, than a paragraph. But in terms of writing good, obviously you are, you are spending a lot more time writing the goal to produce a table, then you would, you would take that much of time to actually write. Same information in the paragraph. So that's number one. The second one is that it's not so straightforward to code, right? Because I think he just if you, if you just take it off the bad, writing a paragraph is just adding one HTML element, which is just a p tag. But writing a table in malls, writing a lot more, lot more lines of code and using a lot more number of HTML elements. So there's a, there's more cognitive load to think all the scenarios and right, All right, down these various rows and columns. And not to mention the effort, if one of those cells are merged, you know, you have to, yeah, you have to spend a lot more time to think, to write code that vertices that regular HTML, David. And then number three is that it is less responsive on mobile devices. So if you've ever had a look at a table on a mobile device, it is a bit difficult to read it on a mobile device just because how the response to the table can get so busy, they can't shrink the table down. But what they do is most of the tables have sort of a scroll by a horizontal scroll bar, sometimes even a vertical scrollbar. And one of the either, either the header or, or what the first column might be fixed. So you need to scroll a bit to view all the information. But then it is not obviously as easy, as easy as it is to read. It contains in a paragraph on a mobile device. So that's that's, you know, that's a bit of a trade-off that you need to consider when, when deciding whether or not you wanted the information in a table or, or not. So those are the advantages and disadvantages. Now tables is used in a lot of places, and here are some examples, screenshots from actual place, actual pages on the internet where you might find a table. The first table, as you can see, is a screenshot from Wikipedia. And as you can see, again, the information that it would be very difficult to compare or all read if it wasn't a paragraph format is now very easy to read when it is in a table format. So you have, for each years, you have structured information that I can read. So for 2020 I can see the number of viewers and millions, the prizes and the adjusted praises. And I can see that for every year in a very, very easy to read format. And similarly, for other examples as well, you have your names, popular names, along with the ranks. And you have whether information's have central aid information in various cities. And of course, we have the example of you're comparing two different mobile phones based on different categories. So as you can see, David's a use in various different formats. And you would have definitely come across in the biased. 5. Methods of creating a table: In this video, we'll take a look at what are the different ways we can use to write core and create an HTML table. So different, different methodologies, right? The first method is something that we are, we have used in the, in this class is to use this online tool called JSFiddle. Now in JSFiddle, what happens is you can just write your specific HTML code. So you eliminate you omit the HTML tags header, head days, body days, and just write your specific HTML code and that generate the output on the right. Now this is great for learning, for creating snippets and solving a specific problem, one specific problem at a time. It does allow you to write HTML, JavaScript, and CSS. So this is method number one, something that we have used in this class. But what are the other options available? Now? The second option that is available is to create an index.html file in, in any particular for linear system. Once you've done that, you can open that file width. Not bad. Something simple as not bad, that should be available in most of your systems. And did you just write all your HTML code? Right, so I've just added some HTML Korea, an example. Now in this approach, what you would need to do is you would need to add all the other HTML tags, head tags, and all of the other things. That's good, right? So this is basically creating one web page. And in that web page, you have your HTML code that produces a table. Now the simple way to run this HTML file is to just double-click this HTML file and this will open it in the browser and the ego. So here is your table. So that's method number 2. Now for method number 3 is something similar, but instead of using a notepad, you can also use something like VS Code or Visual Studio code. Now this is assuming that this is just a single page HTML, you can users do Gordon. And depending on how complex your application is in real life, you may even use our day to day is like Visual Studio, the, the full IDE. Or in a most of the applications, most of the front-end applications these days, they can use Visual Studio Code as well. So in pseudoagouti, open up your index.html file. And then again, you would have to write not only the, not only the table tags and the contents within it, but also the other body tags, HTML x and of course CSS goes in this data data. Now this, you can also run it in the browser and it will look something like this. So the output is quite similar, but it's just the editor is different. Visits pseudo-code gives you slightly more power in terms of writing code gives you all the intelligence. And by intelligence, I mean, does the options available here has dropped down so you can select whatever you want. Of course, when you're writing code in Notepad, you have no intelligence, you have no solutions, you have no auto-completes. So those are debts that matter number three. And of course, method number four is using an online doodle, degenerate your HTML gold for just the debit. But then of course, you still have to wrap that HTML code into, into your head and body tags and then somehow view it on the one on the browse tab, right? But if you're just looking for how to generate the HTML code only for the table. And then you can use something like this. You select the size of the table, let's say two by two by three. And you can enter some content in here, and it will generate the double gold bottom. And then all you need to do is just copy the content from here and paste it in here. And then, of course, we knew refers the browser. You will see your entire table shown up here, of course now there's no content in this table. That's why it is not showing up the whole thing, but you will follow that approach if you were selecting this method. So here though, is that you can do now depending on your preference. You might have, you might prefer visual Studio Code or simple notepad, so on and so forth. So depending on your preference, you may select the right environment for you to code your, yours HTML in and create. That's completely fine. But irrespective of whatever material using and the end. The, the takeaway from this class is really the concepts and knowledge of how to create the tables itself, what tags to use, and why the O and why do you use them. 6. Creating a table: Okay, so the first step is to start creating a simple table, as you can see here in the first step of this Excel file, we have a table with rows and columns. What we'll do is we'll write up some HTML to create this very simple table. For that, I'm going to use JSFiddle because I can straight away write some HTML and instantly see the output here on the right. And I don't have to write all the other fluff code that produces the HTML. So we'll just focus on how to create a simple table that would look something like this. So to start off with, all the HTML tables need to go in a table tag, right? So you have table and you close it with a, with a forward slash table. Then has you can see in this Excel file we have a header and then all the rows in the body of the table. So we'll wrap the header with something called as a D head tag. And then we'll wrap the body with something called a T body tag. Now the Tea head and D boiled egg are completely optional, but it helps with a couple of things. One helps with formatting so you can, because it groups the headers into one Dag here, and then in groups the body into another tag and a set of tag here. What it does is it allows you to able to easily format the headers and the body without effecting the other one, right? So that it helps with the formatting, but it also helps with the browsers being able to print the headers. And in a future class we'll look at the footer has well, so will it, what it does is specifying a d hat and D body and footer allows the browser to be able to print the header and the footer that table onto every page. So when you, if you print a day bill that is many pages long, it allows the browser to print the header and the footer on every page. So it helps with all of those things. So let's stick to the standards and included the head. Now what are you gonna do is I'm gonna create a new table row, which you do with a p tag. And in that, we will create a, our first cell of the table. And we do that with something called as a D h tag, which stands for table header, right? And this will call this bus stop. And I'll just duplicate that because there's a few of those. So that's 1234. So we have, our first row is the header row coming in. I'll just renamed is to route. And then should look exactly how we wanted to look. Let's click on run. And yeah, we have the header. Now it's time for the body of the table to do that. We'll again created Neural because that's what we are doing. And in that this demo only use it the edge Day we are going to use a D, D DAG, which sends a table data. Right, and in this case, I'm just going to put in is going to put in a dummy text for now. So I'll just put in, let's say one. And I'll just keep copying this for another four times. And because there were three rows in a table, I'll just quickly copy this and show you the structure of the table. So I'll click on run. And as you can see, we have a table over here, right? Of course, the contents and not exactly the same, but what I'll do is you don't want to see me. You're going to spend a few minutes of your time. See me type in the contents, will do is I can pause the video and type in the contents, but that's content is not important. What is important is the structure of the table. So we have the structure of the table, but we're missing one thing. I mean two things. One is we don't have the borders and our table does not have borders. It's completely bought a list. And the second thing we're missing is the yellow or golden halo. You see this yellow background color for our table header, right? So those are the two things are missing. Let's see how to add that. I don't whatever the contents, let's see how to add that. So to give the borders, I wanted to go into the CDS system and add some CSS. What I wanna do is I want to say for this particular table and for all the table headers, and for all the table data. Since going to add a few comments over here. Now what I want to do is I'll give it a border, so you don't give border, let's say one pixel, solid black. Now as you can see, what this has done is it has added a border, one pixel border for the table. But there's a lot of doubling up over here and that's because it has added a border to the table and then it has edited a book to each and every cell. So each DHS has got its own border, and each td has got its own border. And of course the table in itself has got its own border, right? So there's a lot of doubling up over here. So what do you can do is we can remove this borders. No mode is this doubling up of the border by saying border collapse. Collapse. A couple of CSS rules to fix the borders of a table. Right? So as simple as they're just a few lines of CSS code. And now we have the borders that look exactly like Excel file. And right after that we're going to do is you want to add a background color of yellow. So table header, background color yellow. Let's go to R1 and the via. So probably not the same shade of yellow, but that's fine for now. As you can see, we have a table that is created exactly the same as an Excel file. And That's the code that we used to create the table. And then a couple of CSS properties here. Some CSS code to be list-style at able so that we are importer and we add a background color of yellow to the table header. And before we jump into the next class, what I'm gonna do is I'm going to go to each and every one of these cells and update the text so that it matches our example. And of course you don't want to see me updated text, so I'll just give a pause and do that right away. 7. Colspan: So what I've done is I've gone ahead and updated the contents of the table. As you can see, it's nothing but updating the text in each DD and BH. Now what we're gonna do is looking at the Excel file. Jumping on to the second tab of the Excel file, I can see that I have merged these two columns so it was Do not applicable. And that is now one cell containing in not applicable. Now what this is called, this is called a col span. When you are spanning across two columns. When one cell is spanning across two columns, It's called an HTML. David's. Now how do we do that? How do we achieve that? First, lets find the first not applicable columns. That is over here, down here. It's going to add a bunch of vendors. As it moves up, they go. So to do that, we're going to do is on the first one, we're gonna say spin is equal to. And then we're gonna give it the number. How many columns do we need this cell to span across its due? Right now, if this cell spans across do columns, and that means we would have an extra column. We don't need the second not applicable column because the first not applicable column will span a kudos These two columns, right, so let's take that out and then give it a run. They go, we have created our first calls span. This one spans across two columns. Now, one more thing is missing that needs to be done, but that is a formatting issue. And that is that the text is not aligned into the center of the cell. By default, it everything is left aligned. So now to do that, the easiest way is to add some CSS. So we'll go to the CSS stamp and hit enter here. Now what we want to do is add CSS to a table data cell that contains the attribute call spin, and that attribute contains the value two. And for that particular cell we want to see the text aligned is centered div r1 and the ego, our text is become center aligned. And now, so this is a CSS selector. So what it does is it selects the DAG, the HTML tag, in this case it is a DD. And in these brackets, we specify the attribute and the value for that attribute. Severe, very specifically selecting this particular table data by using this particular CSS selector. So there you go. We have a colspan that spans across two columns and we have aligned the contents of that cell, the descendant of the cell. 8. Rowspan: Now what we'll do is we'll go into the third tab, in which case you'll notice that the first thing is happening as the contents of these two says that changed. So the first one is very well as 930, so that's, that's cell C2. And cell number three. Sore loser, go on to our code and change in these two values. So the first one was c two, so that is the one with 930, keep temporarily closed. And the other one was with 945, so that's C3. And we find 945 and change that to temporally close. And we have the contents now updated has for the Excel file, but that's not just eight, right? So after we update that, after we update the contents, you click on the fourth tab. And we see that because they both would temporarily close, we have selected, we have merged the cells together. So now this particular motion is called row span, because this cell merges across two rows, right? It merges across rows. And that's why it's called a row span. So it does the opposite of colspan. This is a row span which is across the rows. Now what we want to do is enter replicating this same design HTML label. And to do that, we'll head over to the first cell. So always when you do a march out, when you do a call spinner row span, you look for the first cell that is in this particular group of cells. So the first one is over here, temporarily close. And what we wanna do is just like we did for colspan, very diverse space. And you type in rows and is equal to two. And now because the second temporarily closed cell won't be required, we need to find that one which is in the other group, and we remove that. So unlike calls man weigh in on both sales may be adjacent to one another in rowspan. That's not the case, that that can be a bit confusing, but you just have to make sure that with the HUD, the number of cells, your spanning this row across those number of cells, you need to remove it from the HTML code. And so that part is slightly bit confusing because now you have five DD tags here, but only 40 days here. So that's maybe a bit confusing. It it started to get o with, but I'm sure you'll get over it pretty quick. So you click on the Run button and now we have the cell condense, merge together. Now if you go into CSS, Coby the same thing, and instead of colspan, we say rowspan and align the contents, the center. So although this is left aligned, but we see that the adding CSS to this is pretty much the same as adding ceases to the colspan. And basically both work in the same way. So just to summarize, a rowspan spans across two rows or across two or more rows, and a col span spans across columns. So he has little visual guide here. And the green ones are the rows spans and the orange one is the col span. But of course we'll, what we'll do is we'll also replicate these scholars in our HTML table. Go to CSS and for the calls better give it a background color of orange. Orange. And Rosemary to the background color of green. So the green one is the row span which spans across rows and the orange one is the colspan, which spans across columns. 9. Adding a caption: Okay, then let's see what is the next step that we'll take. The next one is to add little caption on top, so little extra on top of the table that says bus timetables. So a caption allows us to add information about the payable. And so it gives you more information about what are the numbers that you're seeing. And this is information from a visual perspective, from reading perspective, then you need to know what is the data that you're seeing, what is the context in which contexts using this data. So to add a text on top of the table. Of course, if you're familiar with HTML, you could just say, we'll add another bag that probably says, but steam table. And we should have that x over here. But of course this separate element, and you want to be, hey, semantic in case of HTML as possible. And so what we wanna do is you want to use the table features and not a different element. And to do that, what we'll do is right above the head tag on, we'll do is we'll add a tag that's garlic caption. And over here with base. And click on the Run button. There you go. So the caption bag is specifically used in an inside the table DAG, as you can see. And it is the purpose of the caption tag is to be able to give you more context around the table data. What are you, what information you're seeing? So here's a pastime DeMille texts that's enter into a caption tag and matches with our design. 10. Grouping columns: Now right after caption, we have the next step that we need to do, which is basically to color the first column and the last column. Now, I'll get to in a mini-test or why I included this name. Might think, Well, Clyde coloring the column is really easy. You just use CSS. You, you, you, you call it the first column, first td tag, and the last TED die of each row, and that's pretty much it. And he has this, correct? I mean, of course you can't do it. She's in CSS, but it isn't wanted to show you how you do it. Absolutely using the elements that can be contained within the table tag. And this is just something that you might need to know. You might find it useful in certain scenarios. But there's one tag that's called column and group called group. And this again sits within the, within the table die, but outside of the behead deck. So that's column group and column group. What, what this really does is it allows group a number of columns together, and it does that using the column tag. Now you're include those many number of column tags that had the number of columns in your table. So the number of columns in your table is equal to the number of cortex. In this case, there's five of them. And what this allows you to do is it allows you to add formatting to all the cells in that particular column and just from here now, so let's say if in our example we have the first column that needs to be colored blue, what we would do is we would do at a steel tank style background, color is blue. And give this a run. And we see that the first column is now blue. And similarly where you can do is we can color the second orbital, sorry, color the last column has pink. There you go, just like our Excel file. Now, of course, you can use CSS to Color. And then I need to emphasize that probably it is best to use CSS to use some formatting options to color your table, for instance, because you're probably keep CSS in a separate file and not use inline styles. But when there's a case to do use, when there is a case to you is column groups. You might find this style handy. Now something with column and column groups is that you can use span in this columns as well, in this tag as well. And so let's say if I wanted to color the first and the second column, both owners of color blue, what I could do is I could say span is equal to two. And then remove this second column at all. And this would render the first and the second column has blue. So just like this in, of course, in CSS, you'll probably have to write a few selectors that target the first child and the second child and so on and so forth. But this makes it, makes it a lot more easier. But anyway, let's lead to set this and Diego called in-group and column. These are the two new tags that you've learned in this video. 11. Adding a footer: And finally, what do you want to now do is add a footer to the table. And in this particular tab shows us what x needs to be added into the Furda. And as you can see, this folder, just like the caption is related to the table, gives you more context, gives the readers more context as to what this table contains and how to read the data from the table. Now, when we go back to JSFiddle, has to be looked at in the caption. You can always add a paragraph tag. But if you don't want to add another element would want to do is you want to contain it within the table tag itself. Now to do that, dislike the head and the body will add a tag called the foot, which is the footer, right? They will footer. And in this, just like we did above, we will add a new row because that's a new cell that we want to add it. And in a new cell we'll add the text that we just saw in the edge. So in the Excel file. And if I click on Run, I see that there's two things happen. One is that the cell intifada turned out to be blue color. And the cell only included in the puzzle injury in the first column. Now what we actually want is the fodder to span across all the columns and it should not be blue. So let's solve the spanned problem face because what do we know we've learned before is row span colspan. Now, this particular scenario, this cell spans across five columns, which means we would have to use a coil. Spanish Civil sake gone span, and five columns. Let me get that value. Click-and-drag. And one issue has been resolved. Now, sell spans across five columns and Mike is still not of the same color that we want it to be. We want it to be background-color, white. Then this problem can be easily sold. There's two ways of solving this problem. One is you remove the style idiom is added on top. But if you remove that, then of course, these forests into first column will be blue-colored anymore and you would have to add CSS. Specifically, make that blue color. Or the other option is what it can do is we can add CSS to specifically target this cell in the footer and make the background color white. So let's do that. So VFT foot, and in that we have a T D cell. Like I'm color for that is white. Let's give this a run and there we go. So now our problem is sold. We have a white color table footer, just like the design that we have in our Excel file. 12. Class project: Now for the class project, what I want you guys to do is to replicate the table design that is in the last step of the attached Excel file. So if you open up the Excel file that should be included has resources as resource materials for this class. On the last step, you should see a Project tab. And in this tab you'll see that there's this particular table design. And what I want you guys to do is try and replicate the best of your abilities at the moment. Replicate this particular design. And so as you can see, it is similar to what we already did, but a little bit more advanced, a little bit more columns and a little bit more spans, more rose fans and call it spends. So try and see how you can do this and, and replicated it along with the formatting. So along with the bold text, along with the colors, everything right? And what you would do is you would use JSFiddle to gold your HTML table. So similar to what we did in this class, use JSFiddle to do that. And once you have finished, once you have completed your HTML table and JSFiddle, you can save the fiddle and send a link has your project submission due to this class. And what I'll do is I'll check the fiddle and I'll give you feedback on that. So very simple. Give it a try. There's, of course there's no time limits to this. So give it a try and use all the knowledge that you have gained during this last to create in this particular HTML table. 13. Exporting a table from Excel: Now one of the things that I like to show you is exporting HTML code from this Excel file. So if you just, so let's say if you want to export this particular tables, you just select the entire table. Click on File, Export, Change File Type. And we'll just click on save as button. And then from here, select desktop. You can save it anywhere of course. And in the Save as type, you would want to select the webpage option. And again, we'll need to take the, or select the selection radio books. So it's not the entire world book is just one table that we want. And then click on save. And we'll leave this check box checked as well so we can see the output. But this is where it will get stored. Click on publish. You have your table. So the fact that it's opening the browser is of course you have your day Bill Zorn takes it's not just an image, it is, it is a proper HTML label that Excel has exported, right? And if you click on page source server just to control you, you can see the code behind this. And if we scroll down on Monday, there's heaps of code here. But if you scroll down, you can see everything within the table, n forward slash table, all the code that is they here, that's what's producing the table in itself. Now, one thing I'd want to make a note of is that you really don't require so many of these glasses and so omnivorous in lanes will inline styles and all of this styles. I mean, there's obviously a better way to write it. So there's a lot of code here that you don't actually require. And so just be aware of that if you're solely relying on this process, gender into gold, doesn't North Korea there, it's not required. And so if you just inefficient beginning and niche is learning how to create tables. This is a good way to just have a look and see what type of table does it generate? Sort of last resort. But definitely don't rely on this score alone. Because there's all these inline styles and, and all of this, all of this way of coding, which is probably not going to get and get you to fire. So it's definitely and ways to write a more cleaner God then, then what is produced by Excel? But one thing that they know definitely what, what the advantage is that it produces the Euler rowspan spans called spends. So it is, again, you can always have a look and see how it is done. It does not. And the drawback is that it does not put the rows and cells into it, the head and the body and d foot. That's something that you probably have to do it manually as well. But those are just these little small minor details at that you can pick out and learn from it. But look definitely it is worth giving it a try and seeing what, how, how does it feel like and and learning from their processes as well. So, yeah, yeah, so here's a quick and easy way to export. Export a table from Excel to HTML. 14. Using tables in real life: Now that you have completed watching all of the videos in this class, and now that you know all the table concepts, let's take a look at how we might apply them in real life. Like presented with a situation, what do you do? How do you decide if anything goes in table or not? And then if it does go into a table, what type of label the US, what format they use via table. So let's take a look at that in this video. So let's say your content editor of your website or your copyright of your website as presented you with a nice little paragraph, which is something like this on a screen, and it has all the data. Now the easiest thing has you would have known by now is to just wrap it up in a paragraph tag, right? So it has that happened up in a P tag. And I can refresh the browser, and there you go. So your information is readily available in New York on your HTML page. But this is obviously the easiest thing to do. But you would have noticed that although this is the existing the road is very difficult to read. Information bias information from this paragraph. You have to read the entire bag of know what the paragraph is about, whether the conduct is about, and what are the numbers and worthy that's been presented to you. Now, instead of a paragraph, instead of using a paragraph, what do you could do is instead see if you can put this content into a table. Now this is average rainfall received over, over a few years in year 3 are blocked from 2005 to 2017. And all of this data is basically rainfall information in this paragraph. So one way of presenting this information is by using a simple table. Now this is of course much better than the paragraph. You can clearly see that this stable, the average rainfall that is received. And you have for each year, you have that particular amount of rainfall received. Now while this is easier to read and technically you have put information into a table, I would not recommend using a table if your table own ligand S21 coelom, right? So this is according to me, not the right way to use a David. And the reason is because although you have your column and multiple grows, but in terms of conveying the information, we are still not using the table to its full capacity. Now what do you could instead do is split the year and rainfall data into two individual columns. So let's take a look at this table. Now, this is a much better view, isn't it? I can clearly see that the first column is all the years and the second column is rainfall. And I can map each year with the rainfall. Now, this to me is the right way to use a table. So this having, having the information used and displayed in its full capacity in a day? Well, according to me, may make sense and would be the right way to use a table. Now let's take a look at another example. Now always here what we have is we have two tables or hesitancy, none of them single column. So definitely the right way to use a table in these two situations. One, on the left here you have the scores subject for each student, right? So this is like a mini report card, if you may say so. And then the right you have for the same students, we have the totals of combined for this objects. Now, although that the use of the table is correct, but we have, what we've done is we've split the information and your two tables. Now, what happens here is we are duplicating information, right? So the first column, the list, this information has been duplicated. And the context, if I put both the tables together, hey, if I look at both the tables together, the contexts for both of them is, is exactly the same thing. The daughter cells really depend on the subjects, on the, the discourse for individual subjects. So, according to me, contextually, this is probably not the best way of representing your information in tables. What do you instead should do is now that you know things like rowspan and calls than what it should do should combine both the bodies tables into a single one. So what you could do is something like this. Now what I've done is you have students and you have, so at the ends, the columns are exactly what this one was, right? But now what I've done is I have added the subject information, the scores for each subject in the center of the David and have used gold span here to combine all this information and draw a spans for these two table headings. And then now if I see this enable it, it makes complete sense. So nice. I just need to look at one table and I get the context of the table and I get all the information that this particular table represents. So this is to meet the right way to use a table. Now whenever you have the barge NAD to create, you, you have all these HTML tags, right? And at the end at them under the table tag that we have just in a wash on these videos for. It can be grouped into two categories. One is that acquired deck see heavier table tag which is acquired a deiodinase whiskey for each row. A table heading tag is for the heading and the table data td tag is for the individual cells that these are the choir. But when it comes to the optional bucket here, it is up to you to decide if it makes sense to add this information. Now allude is optional. I have definitely covered in the previous videos that the body and the foot where, of course, food if there is, if there is a footer, but definitely the head and the body, although it is optional, it is definitely, it is highly recommended to add that bang in the D chord. Now, these things you would do your base your decision on if the information in the table is going to go across multiple pages. And if you need to, for example, print out the information. And if you do need to print out the information and the table that the tablet, it is going to go across multiple pages, then you certainly want the header and the footer of the table. Do we ended on every page? And then of course, if you're adding a caption, you would want to add a caption Dang. And if you want a group and state columns, then you'll probably want to use a column group and a core deck as well. Now what you don't want to do with certainly don't want to do is use tables for LEA because it is disciplined for screen readers to read all the information from a table. And then there's the question of your separation of concerns, but you want to ideally separate layout or design from content, right? So if you are familiar with some CMS of those lingual, or you have templates in separate files and then you have the content itself which you add. Now imagine if you had to rely on the table tags for Fourier layout, that means you would have to add table tags to your content, to every page, which is obviously not the right way to do it. The other, the other reason for not using the business layouts, because browsers don't have to convert all your daily record into the, into the visual disabilities see on the screen, right? So if you're using this for a layout, that means your browser has to wait for the entire page to load. Then it has to convert all the information there detected in your HTML code into the relevant visual elements. Now all, although these days browsers and computers have any fast, but of course, even few milliseconds of delay can affect your usage of your website. Now the solution to this is using divisions and CSS to create containers, to clean those grids and containers and then put your content inside those divisions in HTML that is more, it is semantically correct to do so. Now the summary of all of this idea sin, of course, you've just seen two examples here. But in real life, you might be presented with of information and end. You should be ready for that. If there's more something to take away from this video is that I would recommend you to read the content and comprehend the content before coding. Once you've comprehended the content, you think how best you would display that information on a screen. Now some, for some content a paragraph is okay, is the right way to do it. But for some information, you do require tabular data. And has developers in real life, as developers, you are empowered to date those decisions and, and, and decide whether you want an information in one way or the other. If you do decide to go with tables and representing tabular data, in that way, I would definitely recommend you to draw out a rough design of that table on, on a piece of paper. And roughly put those elements on that piece of the bone, that design and see what the output looks like and see what is readable. And if it is readable in a viz worth the effort and the time, then go ahead and call it. But if it is not, and if it doesn't make sense, and if you can't display it in a tabular format after sketching it on a piece of paper, then you may not need to disclose that information as a table. 15. Conclusion: It's now time for the final segment of this class, the final video of this class, the conclusion. And first I want to talk about reviews. So I'd really encourage you to spend some time after this glass and provide me with some feedback about this class. And when the Glad form asks you to rate this class, then please give it a suitable rating based on your feedback as well. Your feedback will help me understand what are your thoughts on this glass. So what did you like about this class? What did you not like about this class and what could be improved? And each of these, in all of this feedback, I can, I can process it and I can make each and every glass and better as we go. So your feedback is really essential, really key to improving all of the glass contains. Next is the glass project. So attached with this class would be an Excel file, or at least a link to an Excel file. And the last step would be a project I have in the Excel file, which contains a table design that you guys need to try and go. So based on this glass, We have covered all the stable concepts. And using those concepts, concepts of what I want you to do is try and create that table in encode, in HTML code. And you can use JSFiddle to do that. So you'll be a focus would only remain on the actual table contents, the actual table tags, and of course, a bit of CSS along the way. And what I want you to do is after you have finished net, to send me a link to that JSFiddle and I can take a look so you can either submit, most probably you already submitted as a project's submission in the tabs below. And again, have a look. And of course lastly, I want to thank you for completing this last, for taking this class and, and seeing it through the end. And I hope you have learned something new. And I hope you've enjoyed this class and do let me know what you feed back was and all the very best for your future and for all the classes and for all the learning that you take ahead. So all the best. And thank you so much.