Create a Basic Table5:40 with Nick Pettit
Similar to an HTML form, you start out creating an HTML table by using the <table> element. It has an opening and closing tag, and it wraps all the table rows and table cells inside of it.
- <table> - The table element represents data in a series of rows and columns. Tables should only be used for displaying tabular data, and never for page layout.
- <tr> - The table row element defines a row of cells in a table. Table rows can be filled with table cells and table header cells.
- <td> - The table cell element contains data and represents a single table cell. Each table cell should be inside a table row.
Similar to an HTML form, you start out 0:00 creating an HTML table by using the table element. 0:03 It has an opening and closing tag, and it wraps 0:08 all the table rows and table cells, inside of it. 0:11 We'll get to those in just a minute, but first, let's create a table element. 0:15 So, here I'm in my workspace and I have some starter HTML code, 0:20 and I'm going to type table, and when I 0:26 close that tag, you'll see that the closing table tag is typed out for me. 0:32 You'll also notice, that I have not typed any attributes. 0:41 That's because tables have no attributes, other than the global attributes. 0:45 If you've ever worked with tables before, you 0:51 may have used some attributes in the past. 0:53 However, they are all now deprecated. 0:57 If we open up another tab. 1:01 We can type in MDN, or Mozilla Developer Network. 1:03 And then we can type in table, and that 1:07 will bring us to the page for an HTML table. 1:10 And if we scroll through the documentation, for the HTML table 1:16 element, you'll notice that each one of these attributes has a 1:19 thumbs down next to it, and it says this deprecated API, 1:23 should no longer be used, but it will probably still work. 1:27 So border, cellpadding, cellspacing, frame, rules, summary, and all 1:32 of the rest of the attributes have been deprecated. 1:38 So when you type a table element, it should look just like that. 1:42 Now, let's type a table row, tables are made 1:47 up of rows of information, that go across the page. 1:52 However, there is no table column element that goes up and down. 1:56 In other words, columns are implicit and are simply 2:01 emergent from how many table cells, are inside each row. 2:05 So, let's hit enter, and make some space and we'll type a tr element for table 2:10 row, and when we close it, the closing tag will be typed out for us. 2:18 Now inside of that, we can type table cells. 2:28 And the table cells, contain our data. 2:31 There shouldn't be any content outside of a 2:34 table cell, such as inside a row, for example. 2:36 So, we wouldn't type content here, rather, we want to type a table 2:40 cell, which is a TD tag, and then we can type our content inside. 2:47 So now, let's type some content for our table cells. 2:55 So, I'm going to type the word name, and I'm going to select this line, 2:59 and copy it to my clipboard, and then I'll paste it two more times, 3:07 and I'll type email, and finally, I'll type job role. 3:15 So, here we've created one table row, with 3:20 three table cells inside of it, going across. 3:26 So let's save that out, and click the Preview 3:30 button in Work spaces, to see what this looks like. 3:34 Here we have our table row, with three cells going across. 3:38 Let's type out the rest of the table, I'm going to make some room to work here, 3:43 and I'm just going to copy this entire table row with 3:50 its cells, and paste it and then I'll replace this information. 3:54 So, here we're actually going down the table, so I'll type, Nick 4:00 Pettit cuz that's my name, and then I'll just type an example E-mail address, 4:07 Nick@example.com, and then I'll type a job role, Web Designer. 4:13 So, if we save that, go back to our preview, and refresh, you can see that 4:21 we now have another row and it lines up with each one of the columns. 4:27 So, here's Name, E-mail, and Job role. 4:33 Let's create a few more table rows, 4:38 by copying and pasting. 4:42 So I'll create three more rows here, and 4:45 then I'll replace the information with some dummy data. 4:48 So, I'll type in Andrew Chakley, and we'll say email@example.com, 4:53 and, we'll say he's a Front-End Developer. 5:01 [SOUND] We'll type in Dave McFarland, we'll say Dave@example.com. 5:07 And we'll say he's also a front end developer. 5:15 And then finally, we'll type in Guil. 5:19 [BLANK_AUDIO] 5:24 And we'll keep that as Web Designer. 5:28 So let's save that, go back and refresh. 5:30 And now, you can see, we have this nice table, and it's populated with data. 5:33
You need to sign up for Treehouse in order to download course files.Sign up