So, now we're on the third part of our tutorial, and this one is gonna be very tricky, because we're gonna be using tables for this tutorial. I want you to take a note that html tags for Internet Explorer and Firefox works differently. Many overlay profiles you see here in our site have some discrepancies with these two famous web browsers. Some layouts work fine in firefox while it's quite a mess in IE or the other way around. But sometimes, we see overlay profiles/layouts that work perfectly with both browsers. As I have been looking through and testing these browsers, I discovered that the x and y attributes of the <div> layers being used by many layout artists in overlay are not the same with how the two browsers read it. That is the reason why some layouts work perfectly on one browser. And the only solution i have found is to use tables. But tables are very fixed. Fixed in the sense that you can't just move them around. Anyway, if you don't understand what I'm trying to say, then don't bother. For those who haven't read the first two tutorials i made before this one, please take time to read it, it's very important. Please click on the following links to direct you there:
Click here -->
Beginners on How to Overlay | version 1 | Click here -->
Beginners on How to Overlay | version 2 |Anyway, let's continue.
As I said, we're gonna be using tables, and you've learned the basics in HTML already, so here's the code we're gonna be dealing with:
<html>
<body>
<p>
Each table starts with a table tag. <br>
Each table row starts with a tr tag. <br>
Each table data starts with a td tag. <br>
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>testing_a</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>testing_a</td>
<td>testing_b</td>
<td>testing_c</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>testing_a</td>
<td>testing_b</td>
<td>testing_c</td>
</tr>
<tr>
<td>testing_d</td>
<td>testing_e</td>
<td>testing_f</td>
</tr>
</table>
</body>
</html>
it should look like this:
Explanation:
As usual, we start with the <html> then <body>tags and now i also used the <title> tag which i named as
My First Overlay Test Page, you can see that in the image above. After that, i used <p> tags, which means paragraph and with each line, i placed
tags to break each line after one another.
You may somehow noticed I inserted <h4>...</h4> tags which you may or may not use. I only used this one to make the text quite bigger. This tags range from <h1><h2>...<h6>, the "h" means "header". <h1> is the smallest value you could have and <h6> is the biggest one.
After that, the table border commands. Table border is used to define how thick the side borders the tables you created will have. I used "1" as the size of the table border, you can also use "0" to make it invisible.
The <tr>...</tr> tags by the way is used to designate how many rows the table will have and the <td>...</td> tags is where you will put the text or data or whatsoever you want to put inside the table.
Of course, if you have finished creating these, you have to put an "end" to your command tags, that is why we put the </table> tag after every table to specify the close or end of the table.
In the second example where we have a table with one row and three columns is actually the same codes we used above, the only difference is, we just added another data after the first <td>...</td> commands to make more columns below it.
And in the final example above, we created a multiple celled table. Cell, meaning there are a lot of data found inside the main table. It's still the same codes, the difference is, in the second example, we kind of repeated it below the code and placed a different data. As you noticed, it's the same code with different data inside.
Basically, we are all dealing with the same codes over and over again, the only difference why there are complex layouts you see in the web is that they used too much imagination and creativity. It is not a crime to experiment with your codes, so i encourage you, experiment as much as you want.
If you have further questions or clarifications, feel free to post it here, and i'll try to answer them as much as i can.
And that ends our third part of the tutorial. And you can now go to the fourth part of our tutorial by
CLICKING HERE.
