What's the tax bill welcome in this video you learned about HTML tables in particular you learn how to create the two tables shown before you table one and table to
Take a little clue, take a little closer look and learn how to add some color center information horizontally and vertically
Take a look at the bottom table you learn how to have a column span multiple columns, for example, header header table header span of two columns.
Also learn how to have information span two roads, for example, we can see how North span of these two rows.
But now that we know what we want to do all this is that good enough to get started.
So first thing I'm gonna do is open up a very basic editor. This is a notepad txt pad or word Pat, but also work.
You can find Notepad under Windows accessories what you've been known to do is open up Microsoft Word.
And it's just gonna want to insert special characters into the document, along with that uses smart quotation marks. Okay, so take a look at the very top, it says send it to her to tag it said that table.
One and what I'm gonna be doing this. I'll be making some changes, save it and I'll take a look at it in the browser. So the first thing I'm gonna do is come up here to file, save as seven on on the road for called a temp normally call this a tables.
And I've already got one here called tables, when we're just looking at what's called tables and I'm going to put a to here.
For my new one. So again, three things here. We want to do over specify the folder of a seven on my desktop. The protocol a tip.
I want to give it a name, and I'll put my cursor over here. I want to make sure it ends with a period HTML HyperText Markup Language. And then finally, choose a text document and then go ahead and press Save.
So at this point, I can now open up a browser, I can come up here to file open. I can choose my new file here, I just created tables to
You and I can open that another way to open it would be to simply right click on it and open with you could use Firefox.
Google Chrome Internet Explorer or Microsoft Chomsky use Firefox. I do have it open over here, this is the first one, tables, just I can keep referring back to it.
Okay, so taking a look up here. The first thing we do is create a table with a two rows in two columns. So I'm gonna go ahead and create a table.
Tell you what, let's start off with just the board and then we'll be adding some more attributes here. What are equals restart with one
They will change that here love them. And if you want to, before we forget to close the table. Now I'm gonna go ahead and start the table row and again it goes ahead and close that. So take a look. The first one had two columns and that information, simply going to be North and South.
So I'm gonna go ahead and tedious going to start in effect table data, which is a column, and I can put that over here. If I want north. We'll go ahead and close that
And then let me go ahead and copy and paste this
The input sounds
Okay.
So this point on restart the table closer table, but even have one room so far. Keep on try to start the cable room table data.
The fact I've got one column start the column, close the column start another column accepted there.
Let me go ahead and save this and you can use the keyboard shortcuts. From now on, you can see a control us will save them. Let me come back to my browser. And I'm going to simply hit the refresh button to reload that
Okay, but let's go ahead and let's also get office one in office to in our table somebody go ahead and take this information right here on the copy it and paste it will change this to office one
Office to
Take a look at him my browser or hit the refresh button. And there we go. Okay. So a couple things here. It looks like we need to definitely add some
Padding and at some point we'll go ahead and also work on adding some color to that top row and we can start off by adding some color there, get some color. I can just put big color. The stands for background color equals there's thousands of values, you can specify use in order to be
A lot on now. I could go 334455 it's hexadecimal good to you and I'm just going to go ahead and type in color pink. There's hundreds of cars that you can specify using just a name. So I'll go ahead and save that come back to my browser and refresh. And I can now say I've got some callers
Well, maybe we'll go ahead and on the whole table will increase the width, they go with, say, a 300
pixels on the width.
And I tell you what, while I'm right here. Let's go ahead and increase the height, this first row, and I can place it either way here. So let me start my row so I could put the high end over here where I can place it after my big place it over here and I'll put a height of say 15
And maybe at this point since I've got a hike here. I probably will come down and also the people on a second. Let me go ahead and Cygnus
And I'll hit refresh.
And there we go. So maybe what I'll do is I go ahead and take that heights copy of
Places down here on the second row. So go ahead and save this.
And refresh. Okay, so let's look in really close to the assignment description there. The one thing we now need to do if I take a look at the original is to get this information centered horizontal him and I can do this on the road here. I could go a wine.
Equals center.
And I would do it just for North. So watch this. If I come up here to file and hit save by come back. It's only going to have centered nor
Well I what I could do is I take that same information copied and pasted here and this would work. I'll tell you. I'll go ahead and do this the File, Save.
Come back to my browser and hit refresh. I can see both of those or centered horizontally, but rather than repeat. If I know about the whole row. I'm going to go ahead and delete it here.
And I'm going to go ahead and remove it here as well. And then I'm going to do is inserted on the table row.
So what's going to happen is now everything in this role is going to be pick have a high difficulty and it's going to be centered horizontally.
So this point I'll come up here to file, saying, take a look at my browser refresh that has changed because it's still good. So let's go ahead and do that same thing with all this one and office to
So again, I could do not individual columns TV table data, but I can also do it right, you know, the row which point I don't know how to do once by one and all the information that room centered system snideness take a look at our browser not here to refresh people's
That's that's it right there. And it's a really good one thing which we could use a play around on the go with a 10 order 10 just to show you their bow say
And I will refresh. If I just want to get a thicker border around the outside. Okay, well I'm moving on here makeup line breaks
VR and then I'm gonna go ahead and start a second table. Each to not call this one table to
Go ahead and close my header tag. Let's just start off with a very basic table there.
On the side of the table.
Order because one
We go ahead and start a row. If I take a look. The very first one of their table data. The only trick here is I want this information to span two columns.
So I'm gonna go ahead and start table to
Start a column table data, again, I'm going to have a look at this little higher on the screen here.
There we go. Now I'm gonna go a column span equals two.
Move Ahead and say table cutter. I'll go ahead and close my teeth new tag and close the row. We've still got more work to do, but I'm gonna go ahead and
Just take a look at this. I tell you why it's not really going to be impressive. I've got calm span equals two. But unless I get when we go ahead and put in at least something below.
You can calculate basis of us a little time there. And now I'm going to turn this off.
Not a calm scan really had the board North
And then I'm gonna go ahead and put office one
Of this one. No, go ahead and close the tag. OK. Now we're slowly building. We can log in again start the table. Close the table started wrong in a row started column A, and column. But the trick here is this one I want table header to span two columns, just go ahead and save this.
And I'll come up here and hit refresh it. Here is my table. Table. Let's see what kind of cars that were here. So getting about one with the pink on the header, so will come up here, make a place for right here in the whole row big car.
Equals click
And then I'm gonna stop right there. Save it. And what I could even do is go ahead and put a with on this from the same. Well, I'll go with
Equals 300
We'll go ahead and save this will take a look, see how things are coming here.
Okay. So right away, I can see a table header. I want to increase the height. This role that I want to get information center as well. So, look at that. So when I get the height right here, they'll put the same height that table of 15
And I also want to get this information center. And in this case, it would not matter. I can do the insert of here since early is an effect on one
Table calm, however, is feeling aligned over spanned over two columns so I can put a line equals center.
I can look at that here. So this will not prepare I can insert that here or up here. Either way, would work. Let's take a look. I'm gonna come up here to File, Save.
Come back to my browser. I'll hit to refresh the mistake. Look here, looks like we've got that top row looking great.
At some point they will come over here to the north, we need to specify color on that. I tell you what, let me just show you, here's kind of a couple of choices here.
If I've got a bunch of cells that are what the same color might be better off, you could actually come up and specify color for the whole table will tell you only do that momentarily. So rather than adding the color on that project where
table row I could come up here and adds to the whole table. Now what's going to happen as
A whole table is going to be pick. Well, that's fine. Then, at this point, you'd have to come along and specify individual colors for the various roles and tables or somebody go ahead and move this down here.
This one was
He color.
Pic was one was light cyan.
And then office one. I went with just a little bit different. There
Whoo.
Okay, let's not take a look at that. I know I've got to increase the height work through some alignment except are there, but let's
Come back to a browser and tips for lunch today about maybe we can work with the height of office one, what we're going to find is like Chris Hi to office one also increase the height.
Nor so
We're
All of them rose, you're going to have the same height. So if I increase the height of one column and effect office one north is also going to automatically get resize this wrong.
Okay, so at this one I'm gonna come back to my browser and hit refresh again maybe maybe let's go ahead and get this information center site just come right up here a line equal center copy that and I could just simply paste now.
And thank someone looking pretty good order to achieve. OK, so now probably the big thing. We now need to work on is getting north and it needs to span to run
Some people up here to north and rather earlier, we're selling comms plan just right up here. Now I'm going to go a row and people's to
Well, until I create that next round is going to happen. So now we're going to go ahead and just going to copy all this information. And that's just a little time here. I'll paste that
In effect, this is the only model that I wanted to make it a little bit higher on the screen.
And this was going to be office to okay so on table header. I wanted that to span two columns on North and what that to span two rows, it's going to span office one hand office soon. I think we're getting really close to being finished to
Come along, take a look at my browser refresh. And I think that's it. So,
Just take a look. If you've got any mistakes. Make sure you've got your double quotes that information calls for this angle brackets. So if I was to
Places information outside the angle brackets like this, it's not going to work. I'll tell you what, let's go ahead and see what we can come up here to File, Save.
Come here to the browser refresh. And we can kind of see the little mustard creative here. So if you're getting anything like that. If you see in wristband equals to that means wasn't included within that the angle brackets one at that moment is always say TV star at my table data.
But I don't want to close it out here.
I think. Try to make any mistakes they have made BG background color, make sure to get the spelling. Make sure you have closed all of yours. So you can see I started around TR
Close it with a slash. Let me just check show you one more time. Your boss.
Come back and refresh them. We're hoping that this video a little bit more about HTML tables, how to add colors alignments working with a column span. And then down here on North. We did a rose fan. Okay, next video. Thanks.