HTML Tables

so we just started live streaming and I'm going to share it on our Channel or that other people can join so welcome to this class welcome um Roy and Nnamdi like did any of you watch the last video the last recording I said I sent to the channel because we were supposed to have a class but we didn't so I sent a recording did any of you watch it okay okay awesome so that's that's awesome so last project I think we covered lists we did Uncle tagged and we talked about HTML attribute and how to link with multiple Pages you know all those like little little additions right that's what we did last last week and then we didn't have a an FAQ session but we are going to have our session this Thursday so today we are going to look at HTML tables um I believe that everyone here has done something with tables in their entire life at some point I I mean you have a calendar on your phone the calling the loan is radiative right it's all it's only like in a tabular structure you have maybe you have schedules that you follow on your phone um maybe you you work um in a company Maybe as your learning Tech you have like an organization where you work where you deal with finances and you have to like organize your finances right so and if anything at all that you you can do with an Excel spreadsheets if you know what an Excel is Microsoft Excel Excel like is a place where you can do financial analysis in anything that you need to like put in a table so that is that well that is what Excel is used for right so HTML tables is used for creating just think of anything that you can place in an exhaust spreadsheet as you can place into rows and columns that is what a HTML tab is used for I think that when you start building websites you might not really come across like having to do things that has to do with HTML tables like the there are various questions example of those locations are let's say that you are trying to like compare list of features or you are trying to um just anytime anytime you are trying to present something in tabular format you make use of tables or hey another um I think another if you have like if you've worked with some some some places where you log in as an admin or as a user you have your user dashboard then when you come you see like a list of things you see like for example if I don't know if I I have like um a crypto currency dashboard that's like a list of currencies in a table format that is in real format well these are I'm just trying to like explain where you might come across things that has to do with things but most of the time to be honest um I think as a developer I don't I have really used tables right before before CSS got developed tables we are used for layouts in what do I mean by layouts by layout I mean um when you want to organize something like you have you have written your HTML you want to know style it and make it look nice with CSS right you now you need to like place this one maybe by the right place this one by the place one the center place this one or place this one down you know things like that during like before we use HTML tables for doing it before like CSS introduced um flex and flex flexbox grid floats positioning before CSS introduced others that's what I think that was the major use of HTML tables to lay out a page right something like let me reshare my screen and just share the entire screen so something like this right I think um I have a feeling that this was done with HTML tables um but let's verify remember if you want to see like the HTML structure of your website just click on F12 and click on elements and you can you can see let me see if I can see anything that has to do with okay this is the body this is an iframe iPhone so okay I think this this pitched up I I don't know I don't want to start going deep into this so I don't get lost but I feel like this was done with HTML tables I'm not really sure but I know that I'm doing like far back eating tables tables we are used to have this type of layout maybe you have like one column like this then this is one row then this is like um another table that has um column that is nursing a table inside another table but now you can't use this you can't use like HTML tables to do this why because there are better ways to now do it with flex with grid you know with all these cool CSS um properties that you will learn in the color in the coming weeks next week hopefully so with what we use just when we want to present um something in tabular format so for this um class you're going to be building this you can see this is like a very sorry this is like a very simple schedule right you have your days you have your time um I think that I'll give you the Liberty to fill this up with whatever it is that you want to so um I think this will probably be your um this week's assignment but I might ask you to tweak things up a little bit you know what we are going to be we are going to be building this and we are going to fill it up with some things that we want to do so just take a look and this is what we are going to sorry this is what we are going to be drinking doing today so you can see this is like something really very simple so you're going to learn how to build a table like this with HTML tables so why you stable I want to use table I think I've said that you use table we use table whenever I want to represent something in tabular format like a financial report um we have let's say you're writing a Blog I want to add features like comparison three things example let me see if I can get an example from this MTN web docs so um think it should be somewhere here you know I want to show you the features that I'm talking about let me look for where it usually is um CSS okay let's check CSS layout trying to find what I want to show you I usually see it um I'll just search I'll just search for it if I was uh but let me see if I can see this here yeah so look at this now look at you guys can see this right so something like this sorry something like this now was done with HTML tables right this is like was multiples this is trying to compare different browsers this you can see Chrome Edge Firefox Opera a lot of browsers that we have this is comparing um different browsers with the H the CSS floats property like if they support it this is for um desktop and this is for mobile you can see right when you hover identity sales mobile um then you know I I showed you how to do this in the last um how to add a two tip to when you hover on something it shows it to tips so you can see flow relative value this is like comparing like the features of floats its compatibility with different browsers on desktop and on mobile right so this is an example of a place where a table is used I think if you go ahead to inspect this if you have the time you can go ahead to inspect this and let me just try select it and click on expect as you can see right so look at it can you see it was actually done with um table you can see this table right here you can see the table Row the table data and everything so I'm going to teach you how to do something like this in case there will be a project that you are building and you come across it and you want to build it so this is going to help you to do something like that so um I'm going I'm going to go back to my slide and go to the next slide table element so I'm going to get right into coding now if you are with your laptop or if you're in your laptop you can code along with me and you can join me so I've already created my days as HTML and um I already have for the purpose of this class I'm not going to be pushing GitHub but make sure you push to GitHub always push your code to GitHub like always push your particular top example I think I have last week I had an issue with my laptop so I'm currently on another laptop at the moment and if I didn't pack up most of the projects I am working on to GitHub I would have lost everything and be devastated but because I already I always have my codes on GitHub I can work from any computer or as long as I install git install all the packages and all the software I need to install I'm good to go right so always make sure you push your code to get up so in the body remember your semantics we are going to create a main and inside that mean we are going to create a table remember let me minimize this right just memorize this I shoot this to this side sorry and let's close this up a bit and I'm going to come here I want to be looking at this table anytime you have a question just drop it in the comment box for me and I will respond to it right I'm going to respond to it so yeah yeah so this is um the table that I want to build first of all if you look at this step this table has something like um a head oh let me call it a caption right it has something that looks like a caption so um whenever you're working with table just know that the first element after creating your table this is like a table General container for all your table elements so after creating your general container for your table elements know that the first um the next element that you're going to have should be a caption so let me switch over to table element should be a caption so what is a caption a caption is like a heading for that stable right that is what it does basically what a caption is so in our case our caption is um our schedule I don't even know if this thing is scheduled or schedule I don't know a lot of people call it differently I think I can basically make this boat which and yeah so this grid tag is used for if you want to um make your element approach you can use this I'm just going to go live to make sure that this is rendering properly so [Music] okay yeah allow access so you can see if I remove this B tag now if I remove it you should should have reduced the value there's no progression so it relatively does not do anything I think I need to open My lightsaber again aha so I'm just going to I don't this is supposed to be rendering automatically so I don't know why it is not rendering automatically I basically so I'm going to heat back on my slide then this is for our caption right this is for our caption element so I still don't I still can't figure out why it is breaking the job I just have this on the same line yeah then next um we have looking at this table we have like an empty um empty cell or empty data here we call this we call like where we input information like we call it yourself if you if you have worked with Excel before you'll be familiar with the terms to be using here so remember that a table consists of rows and columns rows are horizontal this is horizontal that's like on your eye level like on the ground level on your eye level that is horizontal when we say something is vertical that means it is upwards that's up and down is vertical left and right is horizontal right so your rows are your horizontal component your columns are your vertical components and I want you to know that your data does not exist in your on your horizontal component it exists on your vertical component that is why that I mean the text that you need to enter into your table where you put them on your virtual components which are your columns you put them inside columns and not inside rows so how many rows do we have here we have one two three four five we have five rows right and then we have um one two three four five six and we have six columns so after the caption we are going to have a table head CH that is the second element that I wrote there and then we are going to have a tea party right so this table head consists of all your headers so my headers all these um Monday Tuesday Wednesday Thursday and Friday they are my table headers and this 8 AM 10 a.m 12 a.m and 3 am I also my table with us so I should be able to know how I want to structure this now you might ask yourself like why am I using all these things Thirty but when I can just start creating it the reason is because of accessibility accessibility um the word has evolved to the point that even blind people can access websites using what we call screen readers screen readers read out the text for those people who are blind and we read it out like out loud to them so if you are not using promise proper semantics screen readers will not be able to like identify what they are trying to read properly they know what to say the way they know what to say to those blind people is by interpreting the tags and there are some tags that if you not put like you know they won't know what to say so over over time you are going to learn you are going to learn a lot of accessibility features that are very very important for screen readers right because you want to build a site that is accessible to everybody irrespective of any disabilities right so that's what we are going to be learning as we go ahead so that's the essence of using all these um body Caption This is essence of it it's basically to add semantics you get to add semantics so that's that's about it so in the table header I think I have one group and one um I think no I have the facial and the I have one two three four I have five years actually I have five foot so which are here I have um my first table data is empty so now what is um what is a table data basically what is a table data so a 3D or table data is the columns we are actually talking about that is this column this vertical component iotd which means your table data then TR means table row and they are your horizontal components so we have table data one now yes this is empty so I'll just leave this empty now you can see that this Monday Tuesday Wednesday that there are headers and they are like both elements right so whenever I want to create a header there is a special column that you use a special column tag that you use that is not CD it is the th tag the th stack and it just means t-head table head right that is just basically what it means there's nothing else that you need to just being stupid so I'm just going to duplicate this into I have one two three four five to attach it I think so the first one we have one day someone we have Tuesday we have um [Music] we have um Wednesday we have Thursday and we have Friday I think I should at this point check out my schedule so this is actually why I don't understand why it's not automatically rendering this yep this is how we should have been rendering this okay so I'm just going to try and close this and open it again oh my God I'm going to open it up again just to be sure that this is not coming from my own because I know that it's supposed to be automatically saving these things all right going to go live again good so I'm hoping that it starts to automatically render everything first so if you got if you look at this table you see that they are very improved right so just make no mistake they are both this is not their default styling when I start adding ordinary table data at CD you will see how they look like so I think I'm done with the first row now for my second row this is my header right and this this is not necessarily a header a header is like the first after your caption like your first table here that identifies each of your columns they are your headers these ones I can this one should pass off as normal um normal um table rows then they should be in the tea body right they should be in the table body you can't have like because if I try to say okay now this is like this is um a head a head in that that is on the second row if I now add like all the rows inside this table head you you'll find out that the nuts will be able nothing there will be nothing that we go into our table body which is very ridiculous right so this just know that your table head or things that should go into your tea head are like they they The Columns the name of the columns that identifies each column what do I mean by that like Monday identifies the schedule that we will have for Monday Tuesday for Tuesday you get what I mean right now yeah so um just going to go ahead and then inside here we have TR so I'm going to give you a shortcut so let's say that I don't want to type to your manually up to one two three four up to four times you can use um a vs code shortcut TR times four now this will produce all you can see is saying image abbreviation this will produce all table rows for you and when you hit or enter you can see it is so inside the table rows the first CD and I can even do something like this let me show you so I can't go ahead and do something like this t h so what the what does this mean this means that you should create a table row and inside each table um if you create a table header so I'm going to group this thing into a bracket why because if I do it directly times four well it's what I'm trying to now instruct you to do is to make the table headers for that you should get one table row and four table headers but that's not what I want I want it to like create each of these each of them like this four times so this will create like a table row then inside table road if you have a table head and it will be up to four times so I'm just going to do this and yeah we have it so the first one we have eight um 8 am 8 am second one we have saying A.M but then we have um so 12 A.M and then we have it should be 12 p.m 2 p.m but I just limit s right so um I'll just check if it's ranging automatically it's not you know I'm just going to leave this like this for now I'll get right into why it's not it's not scary rendering [Music] so the next thing that we are going to do now is that we are going to now create um disabled data for each of these columns right so we have in the first in the second row we have created everything for the first show this is the first round it is our header element now in the second room we have like pipe extra table datas right so I'm just going to guide and create five extra activities 3D sorry never use um cardstock please and thanks to come here and do the same thing TD times five I'm going to come here to the center 3D diamonds life and here I'll do something CD times five okay so I'm just going to enter ridiculous things just foreign yeah this is how it's supposed to look like right but something is missing our borders are missing right what do I mean by borders borders are these lines that you are seeing right now these white lines they are called what they are called borders and the they are used for like separating like rows for columns because the way it is now you cannot really identify which one is wrong which one is column right so we you need that um borders to actually identify which is row and which is a corner so that brings us to our next slide um after this which is our border so the border is used for setting like the border is a table attributes that you will use to set like important on YouTube so if we come here we can specify for the right is equals to one pixels so um this borders this attribute right just when you're working when you're adding um HTML attributes you just know that most of them work in key value pairs what do I mean by key value the name is like the key and the value is what that key should have or what that thing should be like for example now brother is a key and one picture is a value so this value means that it should give it a line that the the weight of the line is we just want pictures and one pixels actually mean if you can research about pixels one piece is actually mean like [Music] um your screen that you can see right now is made up of tiny very very tiny like LEDs let's right that's what makes up your screens so one of them is one pixels I think that the maximum pixels for a desktop screen is 1440 pixels that's what's like lights up your system that you can see like this so for you to be able to see this all these different colors all these things now it's just instructions that tell those pixels which are actually let's what color they should be right so when we learn more about Colonial we are going to work with all these things so if I go back if I create another um live server elements since my mind does not refresh you can see right it has already added a border for me and you see that I added a border and everything and with this your table information is a bit more organized but what if I don't want it to be like I just want a single border right I don't want it to have like um um this why this just did is that it added borders on the table then each data that is each column also it also added the border to each column which is like the first Behavior so if I wanted to get rid of that I'll use a property called for that collapse for that colors this is it so I'm going to try if I can add it directly here okay so now this border collapse is I think it is a CSS property so um I'm going to add it anyway I'm just going to give it to collapse collapses I don't I don't even think that it's a work because it's a CSS property yeah it's not supposed to work right this is like one of the properties that I should do but it's it has to add it to your CSS so I'm going to create [Music] um installed here inside my head and I'm going to select table and I'm going to give it a border collapse you can see what that color is right and I'm going to collapse it and this doesn't Auto refresh so this is really frustrating cha very frustrating so you can see that it actually does collapse the Border I mean it has to be closing this most of the time it actually collapses my brother and yeah we are getting to our final look we are getting to this Loop so let's continue another attributes we have full span and raw span but before I talk about this attribute or before we do something we use people attribute right um I would like to add spaces to this um to my table so it looks um the reason why I want to add spaces is because I want it to look a bit like this so this is you can this is something you do with CSS actually right so first of all I'm going to select all the table datas on my table datas and I am going to give them a padding of five pixels right so this is going to give them a pattern of five pictures and if I open with live server so I'm going to increase this to think 10.

I'm going to yeah you can see that it's increased so I can go ahead and give my table a width property and I'm going to give it a width of um 100 percent and so by 100 it means that you should pick up the whole width of the entire page yeah this is what I mean so even if I maximize it's going to take up all my entire bits that's what this does so maybe I can give it a Max risk property um a Max with small Suite of um I'm going to give it a massive stuff [Music] um so on you know 300 nope 500 pixels I think I have to I have to so what is Max weight max weight is used for um where you want to like give it a weight but you don't want it to like grow too big so this this beads that it actually is now it has I think it is at 500 pixels right right so one once it reaches 500 pixels it won't go again I think I should increase this to 900 pixels and of course I have certificate and just because sometimes yeah just mentioned let's open a lifesaver again so this is like 900 pixels and this is 100 pixels stocks so it it will not grow more than this if you keep going to not grow more than this right so this is what's that means I'm just going to keep this here and expand this so that is how to like set image and I think I think you can even set a rich property here don't necessarily need to use CSS to set with property I think I'm just going to try this please so yeah like I told you you don't have to use CSS in order to be set to set your read you can always set your reads um to your table property so I'm just going to get rid of this these two ones so you see what I just did here is add a comment right so adding a comment you want to add a comment there's a vs code shortcut Ctrl slash when you highlight what you want first if I want to remove this comment if I highlight it like this and I press ctrlash it will remove the um sorry control set I think I didn't select it I didn't select this video I'll be watch if you lost on the line on that line where you added the comment and you press Ctrl flash it will automatically remove the comments for you and you can highlight it like this and press Ctrl slash so like group all of them is everyone comment so I'm just going to delete it sure so what is the comment a comment is a line of code that you want the browser to ignore you don't want it to do anything with that code you don't want you to execute that instruction so you comment it out majorly comments I use for if you want are like a little note while you are writing code to help you remember things so um going on with us like like I said we have postpan and we have Rose span so um back to my table so what if um I wanted um I wanted this text right here to span these two columns right I want you to like expand these two columns I don't want you to just be I want it to cover both this column and this column I'm just going to use code span to do that um I think that is 8 A.M this one right here so I'm just going to put something like gold span I'm going to span two columns and if I span two columns I'm going to now remove this one because if I leave it out that means it's now more than these two columns actually mean that you should add like these two if you match these two columns together and if I added an extra column here now it will not be too much and it will distort the flow so you can see you see what I just did right so if I put back my column now and I even with lifesaver again you can see what I just did but it just added um an extra column so because of is trying to make sure that our table looks nice it's other than extra um an extra entire column for us even if these ones do not have an extra column that's why you always whenever you are using co-span you always have to like make sure that everything is fully properly the way it should so I'm going to um then we have um Rose Band Rose Band like you know you just imagine to close together so um let's say that I wanted to match 12 um am to 2 A.M so this should be 12 P.M to 2 p.m so I'm just going to match these two together so this is 12 right I'm just going to say it 12 A.M

two two pm I'm going to change this to pm right so I'm going to do something like will span row span goes through two very so and I am going to get rid of the shoe oh no no no no I'm just going to do it and let's see how it looks like so you see it actually did it actually did um span tutorials for us place this one now coming from okay this yeah so um you can see that there's something funny going on here because of our [Music] okay so because of um it's trying to like um make sense of what we have done it's adding an extra an extra like column for us so I'm just going to take away this 2 am because it's 2 am you don't need it again right so I'm now going to open with Like Us open relaxed away again so yeah we look at it it now looks okay it now looks fine now this is called Rose pan and this is column span I expand two rows together you can see down here I spun two columns together what I just mean by those panel span is merging two rows or two columns together which is very simple and [Music] um yeah we have done all the table attributes other attributes that we might be using or we might need um we'll have to do a little bit with CSS so I don't want to delve into CSS now but this is like um a very brief um simple introduction to table right HTML tables so if you have any questions please drop them in the comments for me okay so if you have any questions please drop them for me like an outside and we can continue um please anytime that I'm sharing my screen now if you are not seeing it don't drop a comment just omit your mic and tell me that you're not seeing my screen because at this point now I didn't see um I didn't see the comments on time and at this point there's nothing I can do about it right just I just wanted to be available for rewatch so anytime that I'm not like looking at my um my Google meet I want to drop a message just omit yourself and speak because that's the only way to like you can get my attention so do we have any questions maybe there's something I'm a bit confusing just ask me questions okay um that is a vs code shortcut and it's it's very it's basically very simple okay so let me add um let's say that I want to now add another table row TR and that's your if you want to you know that Tableau is still right so you write here without putting your opening and closing tags and I want to have like um five columns inside that is five TDS so I'm going to put a sign greater than right TR is greater than TD times five but I'm not going to do times five here right like this why if I do times five like that and I press enter what you're just going to do is going to create one table rule for me and then five table data inside them but what I want is I want the okay okay I think that's why I want actually because doing this now will actually create um five table rows with one table data each but that's not what I wanted I just want to create one so yeah I'm going in the right direction so I'm going to multiply this by five [Music] and five so this will create um one additional table with five table data inside it and press enter you can see it right you can see how it just created everything this is just like a shortcut a very small a very easy shortcut I'm going to add one more table header here I can add them just wish this sorry sorry sorry oh my God you're not seeing my screen ah please so if you need to ask me something if you have not seen my screen or meet yourself please submit and tell me because at this point I didn't even know that I was not sharing my screen I was not sharing my test you know just show everything and start from the beginning again so like I said this is basically very simple I'm going to redo it again just type TR I want to add an extra table with five columns inside so CR is greater than CD times five so this we create um one cable row with five table datas inside as you can see just did that when you are done just hit on enter and it will create it for you to create all of them for you so um the next question is what happens if you add a border to th and TD instead of the table tag well if you do that it will only create a border right inside the ones that you've added so let me let me remove this it will not like crazy button is a border for all of them so let me remove these border property and I'm going to open this with live server let's see okay you see how it looks like right so let's add the Border no let's add about that for this one that we have matched to so I'll come to that row where I did my row span and I'm going to add a I'm going to add a border property to it for the you see that I cannot even add a border to itself whether equals to one big shows so um I'm going to open with lifesaver again yeah okay let me see if I can add this you can do that but I don't think I don't I'm not sure if you can do it like directly on the element without using CSS but let's try that to write um I think this is it and go life lose the quotes Uncle life again okay you stop Grace let me try this with CSS let me see if it will if it will work I think I've done something like that before [Music] so [Music] um I'm going to select the TD okay I can give it I can just select instead I'm going to select the table headers and I'm going to give it a border a border property of one pixels all the table headers and then I'm going to close my pot and restart it again it's supposed to create the borders okay okay okay okay okay okay okay okay okay okay um what I want pixels solid yeah so this is it you see how it looks like these are all the tape headers that I have so I only added borders to them and this is how it looks like so why does it look like this um where and why did I have to add solid and black by default by default when you want to add a border to any element at all using um CSS you don't just add only the border right you have to also specify the color specify the Border style and the color at once for you to be able to properly add it you cannot just like add um for example you can see line with line style and color right so you cannot just add only one picture so if you add only the um the butter pieces that is the line with it will not draw the border for you all until you specify like you have to specify like a border style and a border color or I think or at least a butter color let me just check if it will still apply with this butter color I don't think it's true but I just want to try try it going to go life again yeah it won't so you have to like specify the two of them at once any any element at all that you are working with anytime you want to work with whether you specify the um the butter style which is solid I think you you will also have like update yeah I'm going to have like a better self but that is if you want to specify the third um the headlines I'm going to I don't understand why I have to be doing this I don't understand good so you can see like the board has adopted in this scenario right so that is like what will happen if you just add like we bother to um just the table header and the table um table data that's just what will happen so I'm just going to really activate first before [Music] yeah this was how it was before this is the like extra row that I added at the end so another question do you does anyone else have another question seconds so um in the absence of another question I'm going to your assignment I'm going to be sending you your assignments tomorrow I think you're before your submission form will come after um Thursday because Thursday we are going to do HTML forms so that these are like the major HTML things that things HTML elements and attribute that you need to know then hopefully from next week we start styling we enter CSS and the more we work on real life project the more you get to learn in love other htmls that you need and CSL Styles and other things right so um after this this week from next stage if you get like if you pass all your um submissions you'll be moving to stage two so um at this point you're currently in stage one so next week everybody will be moving to stage two to start your work on CSS right so the stage the stages progression is really very slow why because we have 10 stages and we still we are still going to do CSS and JavaScript and JavaScript will be like very large so before I think by the time we get to stage five that is when you'll be entering JavaScript right so CSS will span um stage two three four then stage five will be like you entering JavaScript so um thank you for tuning in today if you have more questions please share but if there's any more questions if there's no more questions we'll be ending the class here thank you for sorry thanks for joining and see you on Thursday good night

2023-08-22 15:58

Other news