By Vashti
Let's recap what we've done so far:
- Created the basic framework of our page.
- Added some text.
- Turned the text into a title.
- Learned how to add an image.
- Learned how to centre an item on your page.
Today we are going to add a table to our page and insert another image and some text into that table.
Tables are one of the most straightforward ways to add a little structure to your page. Tables allow you to separate out items in your page and do things like have an image on one side of your page and text running down the other side of your page. This is highly useful when you're trying to present and link to Sims items.
The basic codes we are going to use for our tables are:
<table>
This is the main piece of coding that tells your browser that it's dealing with a table.
<tr> or table row
This tells the browser that it's dealing with a new row in the table.
<td> or table data
This tells the browser it's dealing with a new cell in the table.
We will also be dealing with another code: rowspan.
This allows us to create a merged cell ( a cell which spans more than one row).
Open up simscontentpage.html in notepad and hit enter after the </center> tag. Type <table> to tell the browser the table is starting. Then hit enter again and type </table> to tell your browser the table is ending, like so:
We are going to create two table rows.
Place your cursor after the <table> tag and hit enter. Type <tr> </tr> and hit enter. Then type <tr> </tr> again.
Note: As was said in the last tutorial, it's safe to hit enter as many times as you need to because the browser ignores spaces you create in HTML documents unless you create them with specific HTML coding. So hitting enter can sometimes be a useful way to keep your code uncluttered.
Right after your first <tr> tag, type <td> </td>. Follow this with <td rowspan="2"></td>.
This code tells the browser that this row contains 2 cells or sets of table data, and that the second cell will be merged with the next row.
As our first row has a row which will extend down/merge two rows and that whole cell is contained on the top row, we only need one cell for the second row. So right after your <tr> tag on the second row type <td></td> once only.
Below you can see the prepared image we're going to insert into our HTML document. As with last time, we're going to use the img src code, except this time we're going to type the code inside our table. Right click and save this image into your images folder you used for the last tutorial.
The code we will be using is:
<img src="images/fullbody(vas)swirlycoat.jpg">
Note: You can use your own image at this point. I only provided one to make it easier on those who only want to concentrate on learning HTML.
swirlycoat.jpg)
We're going to insert this image into the merged cell.
Right after the code:
<td rowspan="2">
Type the code:
<img src="images/fullbody(vas)swirlycoat.jpg">
(or your own code, just remember to keep it in, and refer back to, your images folder)
This will insert your image into the merged cell.
Now we're going to fill out our table with some text. Right after your very first <td> type "Aqua Swirly Coat by Vashti".
Note: I had to hit enter at this point to push one of my <td> cells onto the next row so you could more clearly see what is occurring on the page.
By this point I'm hoping you've figured out that to add something to a table, you simply type the information you want straight into a cell. Direct image links only vary in the html code you're inserting them with. The main thing to keep in mind is to make sure that your code is nested between the <td> and </td>, or your text or image will not show up in the table correctly.
Now we're going to add data to our bottom row. Right after <td> on the second row, type "Requires Sims 2 Only". Now save your file so you can preview it in your browser.
Woohoo!! Here is the image with the two sentences showing up at different points of the page. The text goes down the left hand side of the page and the image goes down the right hand side of the page.
The last thing we're going to do in this tutorial is center the image and text on the page to improve the page's appearance.
Right before your <table> code type <center>. Right after your </table> code type </center> to tell the browser it needs to center the table. Save your file again and preview it in your browser again.
Here is your page previewed in your browser again. Congratulations! You just learned a basic HTML layout technique and how we can use it in the context of our Sims sites!
In the next tutorial we're going to learn how to link a zip file to the page, and about one of the more formal things we need to include to make our HTML pages compliant with standards.