Add content and data to table cells - HTML Tutorial

- [Instructor] Now that you have a sense of the basic HTML that goes into marking up a table, let's talk about how to get content from a spreadsheet into an HTML table. So, this is the Wisdom Pet Medicine pricing spreadsheet and this is what we were given as content when we were asked to go ahead and put this on the website. So, this is a very common thing that will happen, people will give you spreadsheets like this, and you'll be asked to just put 'em up on a website somewhere. So the very first step that you're going to want to do is to get the data out of the spreadsheet and get it into your webpage. Remember that we only have rows to work with in our HTML, we don't necessarily have columns. So what we really need out of this spreadsheet is all of each of these cells to show up as little groups of data indicating where each row of our table will be. So I went ahead and did that for you, this is also in your exercise files folder, so this is just a plain text file that has all of that information from that spreadsheet, everything organized row by row. And that is what we are going to need to copy and paste into Code Pen. So if you go on ahead and open up your Code Pen for this particular video. You'll see here I've actually gone ahead and copied and pasted in that information for you, so there's all of that information from that text file, just pasted straight in here. Of course, it looks terrible over here in the viewing window for obvious reasons, we have no markups, so it's all just displayed one thing after another, even though there are returns in it as you see over on the HTML side. As for CSS, all I've done is changed the font family to Arial, because I think that's just so much prettier to look at than Times New Roman, otherwise, we can ignore that window completely. So, now that we've got all of this lovely data here, let's go ahead and start marking that up. So, the very first thing to do of course is just start by marking our table. We're going to start the table here up at line one and we're going to end it down here on the bottom. And, everything inside of here, we can consequently tab in. I've just highlighted all that text and hit my tab button on my keyboard and that will indent things nicely. I find that it's really important to keep up with your indents, in HTML in general, but really with labels because it's very easy to get lost in what row you're in or what table data you happen to be working with so I would encourage you to do the same. So the next thing we'll do is to take each one of these and we're going to go ahead and set these up with table row and the table row is going to end here. I'm just going to do two of these real quick for ya so you see how this goes. We have a table row here and that one ends down here. Okay, and we can take all of our information here and we'll indent this again, information inside of it we can indent, and then for each individual item, we're simply going to wrap around it a TD tag, a td/td just like this for each one of these particular items. So I'm going to go ahead and I'm going to continue to mark up everything that I have here in this table all the way down here to the bottom, mark up my rows, mark up my cells, and if you'd like to go on ahead and pause the video and go on ahead and do that on your own, that would be great. There we go, and here we are. So hopefully you have gone through and you've marked up your entire table now. We've just used three tags here. We use the table tag, we use the tr, the table row tag, we used td, the table data tag, and we've sprinkled those all in the appropriate places and now you can start to see the outline of a table appearing on your webpage. So, your table should look kind of like mine, no one is accusing it of being beautiful, no one is accusing it of having it be completely done, we have plenty of additional things to add to it, but you can definitely see the direction that we're headed here with our HTML just with these three simple tags.