Home
Home |
|
Learn: Site Creation Tutorial - Part 3 |
     |
In the previous section, having the picture right below the text didn't look great. Wouldn't it be nice if we could line them up, horizontally? We can, with a table. Tables are composed of cells, space on the page that can hold text, images, or any other content you could put in an HTML file. Our table will contain two cells. The cell on the left will hold our text, and the cell on the right will hold our image. Let's make our first table! Tables start with the tag <TABLE>. Let's put in an attribute we'll explain later: BORDER. This gives us <TABLE BORDER>. Now, we have to start the first TableRow: <TR>, then open our first cell: <TD>. Now, we've got a table with an open row and an open cell. Now, we add our text, "Hi, I'm Kevin, and I just started HTML programming, my hobbies are: HTML programming, chasing burglars, etc..." Then, we just close the cell </TD> and open a new one, the one on the right ( <TD> ) and add the Image: <IMG SRC="mypicture.jpg">. Now we close our right cell: </TD> and close the row </TR> because we need no more cells in this row. We also don't need any more rows, so we can close the table. </TABLE> Your HTML file should look like this, now:
And the browser view looks like this:
But as you see, there is a Border around the table (sometimes you'll need this border, but most of the time you'll never use a table as an actual table of information). Remember when we added the BORDER attribute? To get rid of the border, just erase that attribute! <TABLE BORDER> becomes <TABLE> Just make this change and reload your page. Tada - no more borders! If you want to add more rows or cells, it's easy--just open new tags. But cell tags must always be inside row tags, and don't forget to close your <TABLE> tag! If you don't, some browsers won't display your table at all! Did you understand all of that? If you're ready to move on, let's make some lists!
|
Previous