Bill Rosener: Hello. So, Dr. Bell, welcome back in this video and learn how to create HTML tables. Let's start by taking a look at what you learn how to create, and then we'll walk through that. So I have a little text here that says Table One. They want to create a a table with 2 rows and 2 columns, maybe even add a little color here. They're gonna create a second table and a little trick here on this one is
Bill Rosener: We're now some color. So it's gonna have kind of 3 rows and 2 columns. But notice the server, one table header. It's actually gonna span 2 columns, whereas north, it's gonna span 2 rows. Now that we know what we wanna do, let's get started here.
Bill Rosener: So the very 1st everyone do is open up your source code editor. I'm using visual studio code. I've already got my folder set. Someone come right up here and come up here to file new file.
Bill Rosener: I'm gonna call this one assignment
Bill Rosener: 3 dot. HTML, make sure it ends with that dot. HTML extension there
Bill Rosener: and current.
Bill Rosener: Okay? So at the very top. It needed to have a little header, one tag.
Bill Rosener: and we're going to go ahead and just type in
Bill Rosener: Table
Bill Rosener: one. And I'll tell you what I'm gonna go ahead and save this right away to do that. I'm gonna come right up here to file.
Bill Rosener: I'm gonna hit that save
Bill Rosener: I'm just gonna right click anywhere over here and open in default, Browser.
Bill Rosener: And there we go. We got our table. One.
Bill Rosener: Okay. Now we'll start actually working on the table
Bill Rosener: to do that. I'm gonna go ahead and type in table, and as soon as I do it closes it.
Bill Rosener: and then we're going to start insert some rows.
Bill Rosener: Then I'm insert some columns.
Bill Rosener: Okay? And then maybe I'm gonna go ahead and copy and paste this. So
Bill Rosener: this is, gonna start a row when it has 2 columns. Okay, so there's my basic framework table. Close the table. This is going to be one row tr, table row. That's gonna have the 2 columns there, and I'll tell you all. Let's just go ahead and put some values in here.
Bill Rosener: This needs to say I'm north.
Bill Rosener: South.
Bill Rosener: and then let's say, office one
Bill Rosener: and office
Bill Rosener: 2. Okay, let me save that.
Bill Rosener: Come back to my browser
Bill Rosener: and refresh. Okay, so, table. It doesn't really look like a table yet. So probably one of the very 1st steps I might want to do is put a border around that.
Bill Rosener: Okay, I'm gonna come right up here
Bill Rosener: order equals. I'll put one.
Bill Rosener: And then I'm gonna go ahead and put a width on here equals 300.
Bill Rosener: Okay?
Bill Rosener: And let's say that
Bill Rosener: and refresh. And it's looking a little closer. Now let's go ahead and increase some height.
Bill Rosener: and we'll center some text, etc, there.
Bill Rosener: So right here I can put
Bill Rosener: height equals.
Bill Rosener: and I was put to 50,
Bill Rosener: and I'll do. I'll do the same thing on this one.
Bill Rosener: the 0 row.
Bill Rosener: Okay? And I'll tell you what. Let's just go ahead and save that
Bill Rosener: and rerout reload. Okay, it's looking a little closer.
Bill Rosener: Need to get some text centered, and we'll add a little color there.
Bill Rosener: If I know I want to center everything I can put it right up here.
Bill Rosener: one equals
Bill Rosener: center.
Bill Rosener: But if I wanted to, I'm going to. This one is going to be on the TR. The table row.
Bill Rosener: Let me go ahead and copy that.
Bill Rosener: I can also put it
Bill Rosener: within
Bill Rosener: the column. So notice this one, since it's on the row, north and south are going to be aligned center. Then on the second row only office 2 is going to be centered. So if I was to save that.
Bill Rosener: come back and hit refresh again. North and South are centered, and then office 2.
Bill Rosener: But office one was not. So what I can do is I I've got my choice here.
Bill Rosener: I can go ahead and put
Bill Rosener: a line
Bill Rosener: equals center here.
Bill Rosener: Okay, so now, office one and Office 2 is centered, or if I wanted to, I could put it up here, which by default, then everything, all the columns in that row will be centered.
Bill Rosener: Okay, one last step here. We needed to add a little color.
Bill Rosener: Bg, color equals.
Bill Rosener: I'm just gonna go with a pink
Bill Rosener: and save this control. S,
Bill Rosener: go to my browser and refresh. And I think that's looking perfect. There.
Bill Rosener: Okay, now, let's go ahead. And we're gonna create table 2 and again. A table header is gonna span 2 columns and rows gonna span 2 rows there. North is gonna span 2 rows there.
Bill Rosener: Okay, moving on. I'm gonna come right down here.
Bill Rosener: each one again.
Bill Rosener: Table 2.
Bill Rosener: Start our table.
Bill Rosener: close it.
Bill Rosener: start a row.
Bill Rosener: close it.
Bill Rosener: Then we're going to start a column
Bill Rosener: and let me go ahead and
Bill Rosener: repeat that
Bill Rosener: there we go.
Bill Rosener: so I've got a table. I'll tell you. Let's just go ahead and put a border in here right away before we forget.
Bill Rosener: And I'm going with 300 again on the web.
Bill Rosener: Okay? Now, I'm going to grab all this
Bill Rosener: pasted
Bill Rosener: and paste it.
Bill Rosener: Yeah, take a look at that we've got. Tr is gonna start a row, close a row, and those are the columns. Start a row, close a row, etc. there and just let me just get started here. I'm gonna put some numbers in here
Bill Rosener: because we've got to delete
Bill Rosener: some this these columns here.
Bill Rosener: Okay, so let me go ahead and I'll tell you. Well, I mean, put a height in here.
Bill Rosener: copy that, and I'll paste that
Bill Rosener: and paste that.
Bill Rosener: Okay, let's say that
Bill Rosener: and refresh. And there we go. Actually looks like, let me put that align center in there.
Bill Rosener: and I'll grab that code.
Bill Rosener: copy it.
Bill Rosener: paste it and paste it.
Bill Rosener: Okay, let's take a look at that
Bill Rosener: and the browser, and there we go. Okay, now and come, comes a little tricky part here. We're going to take
Bill Rosener: the one and the 2 and merge those into a single
Bill Rosener: again. Do I have column span on that. So it spans 2 columns there.
Bill Rosener: So I'm going to go ahead and delete one of these I can doesn't matter which one I delete.
Bill Rosener: And now what I'm gonna do is, I'm gonna say, column
Bill Rosener: span equals 2.
Bill Rosener: And I'll tell you what, I'm gonna go ahead and type in that needed to say, table
Bill Rosener: header.
Bill Rosener: Okay, so this information is gonna span. This particular column is gonna span, too. So I'm gonna go ahead and save that
Bill Rosener: come back and hit refresh oops and hit refresh. Okay. So now, rather than having to. You know one and the 2, I'll combine those, and I've got it saying, table header, and it looks like I need to add a little color to that.
Bill Rosener: So let me just go ahead and come right over here.
Bill Rosener: Bg, color
Bill Rosener: equals
Bill Rosener: and think
Bill Rosener: save that
Bill Rosener: and refresh. Okay, that's looking great here. Now, what I need to do
Bill Rosener: is if I take here
Bill Rosener: I want to get where it said
Bill Rosener: the 3 and the 5. And what I'm going to do is actually delete the 5. And I'm going to have the 3 in effect, span 2 rows there.
Bill Rosener: Okay? So where it said the 3 that needs to say, north
Bill Rosener: and
Bill Rosener: okay, the form, actually,
Bill Rosener: where the 4 is that needs to say, office one.
Bill Rosener: Okay. But the trick here is on this one. I'm gonna put a row span
Bill Rosener: equals 2.
Bill Rosener: At which point I can come on down here and I can delete one of these.
Bill Rosener: Okay, let me save that.
Bill Rosener: I'll tell you what. Let me just even go ahead and put that this is a office
Bill Rosener: 2
Bill Rosener: and gab
Bill Rosener: and save
Bill Rosener: and make sure I'm the right one and refresh there. Okay, so now, what we've got is the 1st row. Information is spanning 2 columns. And now I've got north spanning 2 rows. Looks like I need to add a little color there.
Bill Rosener: and I'm just going to come right here.
Bill Rosener: What blue?
Bill Rosener: And we'll take a look at that.
Bill Rosener: Okay? And if I wanted to, I could do the same thing with
Bill Rosener: Let's put that right.
Bill Rosener: And again, I can if I wanted to. I can paste paste it here.
Bill Rosener: since there's only one column, or I could have pasted it right there.
Bill Rosener: Let's save that
Bill Rosener: and refresh. And I'm gonna call that good.
Bill Rosener: Okay? Kind of a little tedious. There, let's go ahead and see what AI can do. I'm gonna come right down here.
Bill Rosener: Table
Bill Rosener: 3.
Bill Rosener: Okay? And again, I'm gonna enter the keyboard shortcut control.
Bill Rosener: Plus I
Bill Rosener: okay, I'm actually gonna delete that. Just so.
Bill Rosener: you wonder what's that keyboard? If you can't my audio is not clear enough. I'm gonna press control, I.
Bill Rosener: And now what I'm gonna do is
Bill Rosener: have AI
Bill Rosener: great
Bill Rosener: a HTML table with.
Bill Rosener: Let's go
Bill Rosener: 4 rows and
Bill Rosener: 3 columns. Let's see what it is able to create here for us
Bill Rosener: and hit. Submit.
Bill Rosener: Okay. And this is looking pretty good. Here.
Bill Rosener: You can see how it's kind of even modeling it after
Bill Rosener: the ones that were created here high to 50 center, etc. Let's hit, accept.
Bill Rosener: and I'm gonna come right up here to file and save.
Bill Rosener: Take a look at in the browser.
Bill Rosener: And there it is.
Bill Rosener: day before. Actually, really, if I wanted to, I could come back here. Now let me just delete this
Bill Rosener: and save it.
Bill Rosener: Okay, so table one, table 2. We kind of worked the hard way learn some some of the code associated with HTML and tables, and then the 3rd one. We used AI to generate it for us, at which point I could just come along and plug in some values here instead of office 1, 2, 3 all the way to 9. Anyway, in this video, hopefully, you learned about tables and a little bit about AI, I'll catch next video. Thanks. A lot.