Understanding Tables

[i:3487c28faf]Introduction to tables in [b:3487c28faf]H[/b:3487c28faf]yper [b:3487c28faf]T[/b:3487c28faf]ext [b:3487c28faf]M[/b:3487c28faf]arkup [b:3487c28faf]L[/b:3487c28faf]anguage[/i:3487c28faf]

[b:3487c28faf]Skill Level:[/b:3487c28faf] [b:3487c28faf][color=red:3487c28faf]||||||[/color:3487c28faf]||||||||||||||[/b:3487c28faf]

Tables are very complicated to learn, but if you come to an understanding with them, it is very useful. Lets start off with the basics. Remember, this does nothing but show you tables and the extreme basics of HTML. I did not even add a title to the page, you have to do all of that on your own time.

[code:1:3487c28faf]
<html>
<head>
</head>
<body>

<table border=0>
<tr>
<td>
Blah
</td>
</tr>
</table>


</body>
</html>
[/code:1:3487c28faf]

The above table is a very simple one. You should never use it on a legitimate website, I only used to for an example.

If you do happen to use that code, it will show up like this.

Blah



Now, that is very simple, all you can even see is the text. To be able to actually [b:3487c28faf]SEE[/b:3487c28faf] the table, use this.

[code:1:3487c28faf] <html>
<head>
</head>
<body>

<table border=1>
<tr>
<td>
Blah
</td>
</tr>
</table>


</body>
</html>[/code:1:3487c28faf]

I know what your thinking, same thing… But your wrong. If you notice, I changed the border code a bit. I changed the 0 to a 1. The result should be the following.

[img:3487c28faf]http://techefx.com/tutorials/table1.JPG[/img:3487c28faf]

Now it is turning into something!

The thicker you make the border, the…well…thicker the border gets.

Here is an example of the same coding, just with a 3 for the border.

[img:3487c28faf]http://techefx.com/tutorials/table2.JPG[/img:3487c28faf]

Personally, I like the one with the border as only 1 pixel, or maybe even 2. I think it just makes it look simple and good.

Now that we have the beginning of table production covered, lets begin to turn the table into something we can actually add content to and make it look like something you would see on a professionally coded website!

[i:3487c28faf][b:3487c28faf]Construction[/i:3487c28faf][/b:3487c28faf]

Okay, lets start off with the original code I used to the above.
[code:1:3487c28faf] <html>
<head>
</head>
<body>

<table border=3>
<tr>
<td>
Blah
</td>
</tr>
</table>


</body>
</html>[/code:1:3487c28faf]

Lets make this an affiliate table! So you can add affiliates to an HTML documents in a nice, simple way.

Okay, for starters lets change the ‘blah’ to ‘Affiliates’.

[code:1:3487c28faf]
<html>
<head>
</head>
<body>

<table border=3>
<tr>
<td align=center>
Affiliates
</td>
</tr>
</table>


</body>
</html>
[/code:1:3487c28faf]

You’ll notice how I have also added an align tag. This makes it so that the title of the table stays centered.

I am also going to center this table on the page. So what you need to do for that is, right after the ‘<body>’ tag, add ‘<div align=center>’. Then right before the ‘</body>’ tag, add ‘</div>’.

Now your code should look like the following.

[code:1:3487c28faf]
<html>
<head>
</head>
<body>
<div align=center>
<table border=1>
<tr>
<td align=center>
Affiliates
</td>
</tr>
</table>
</div>

</body>
</html>
[/code:1:3487c28faf]

[i:3487c28faf]Adding LinkMe Button and a Description[/i:3487c28faf]

Okay, the above code is the start of your masterpiece table. But, if its an affiliate table, then we need to add the site button don’t we?

The one I am going to show you has removed the [b:3487c28faf]Affiliates[/b:3487c28faf] heading, but I did add the linkme button and a description.

[code:1:3487c28faf]
<html>
<head>
</head>
<body>
<div align=center>

<table border=1 align=center height=31>
<tr>
<td width=88>
<a href="http://TechEFX.com" target="_blank"><img border=0 width=88
height=32 id="_x0000_i1025" src="http://techefx.com/Linkus3.gif"
alt=TechEFX.com - Tutorials, Layouts, Scripts, and much more!></span></a>
</td>
<td>
<b>Description:</b> Layouts, mIRC, Scripts, Forums, Tutorials, and much more!
</td>
</tr>
</table>

</div>

</div>
</body>
</html>
[/code:1:3487c28faf]

To get things to be next to each other it is simple. Simply create a new column.

[code:1:3487c28faf]<td>[/code:1:3487c28faf]

To add another affiliate, all you have to do is add another row.

To do that, use the exact same coding, but only after the ‘<td>’

[u:3487c28faf]Example[/u:3487c28faf]:

[code:1:3487c28faf]
<tr>
<td width=88>
<a href="http://TechEFX.com" target="_blank"><img border=0 width=88
height=32 id="_x0000_i1025" src="http://techefx.com/Linkus3.gif"
alt=TechEFX.com - Tutorials, Layouts, Scripts, and much more!></span></a>
</td>
<td>
<b>Description:</b> Layouts, mIRC, Scripts, Forums, Tutorials, and much more!
</td>
</tr>
[/code:1:3487c28faf]

Copy and past that code right after the ‘</tr>’ tag.

Your table should appear like the following.

[img:3487c28faf]http://techefx.com/tutorials/table3.JPG[/img:3487c28faf]



[code:1:3487c28faf]
<html>
<head>
</head>
<body>
<div align=center>

<table border=1 align=center height=31>
<tr>
<td width=88>
<a href="http://TechEFX.com" target="_blank"><img border=0 width=88
height=32 id="_x0000_i1025" src="http://techefx.com/Linkus3.gif"
alt=TechEFX.com - Tutorials, Layouts, Scripts, and much more!></span></a>
</td>
<td>
<b>Description:</b> Layouts, mIRC, Scripts, Forums, Tutorials, and much more!
</td>
</tr>
<tr>
<td width=88>
<a href="http://TechEFX.com" target="_blank"><img border=0 width=88
height=32 id="_x0000_i1025" src="http://techefx.com/Linkus4.gif"
alt=TechEFX.com - Tutorials, Layouts, Scripts, and much more!></span></a>
</td>
<td>
<b>Description:</b> Layouts, mIRC, Scripts, Forums, Tutorials, and much more!
</td>
</tr>
<tr>
<td width=88>
<a href="http://TechEFX.com" target="_blank"><img border=0 width=88
height=32 id="_x0000_i1025" src="http://techefx.com/Linkus2.gif"
alt=TechEFX.com - Tutorials, Layouts, Scripts, and much more!></span></a>
</td>
<td>
<b>Description:</b> Layouts, mIRC, Scripts, Forums, Tutorials, and much more!
</td>
</tr>
</table>

</div>

</div>
</body>
</html>
[/code:1:3487c28faf]


[b:3487c28faf][u:3487c28faf]A brief explaination of columns and rows[/b:3487c28faf][/u:3487c28faf]

A row ( <tr> ) makes another row in the table, such as in the affiliation table, it has two. The image for the linkme button, and the description.

A column ( <td> ) makes another column, such as in the affiliation table, it has three. Each of them are TechEFX, and the same, but that is just to get you started.

The above code is the code for the whole thing.


[b:3487c28faf][u:3487c28faf]Tutorial Copyright TechEFX.com 2005-2006[/u:3487c28faf][/b:3487c28faf]


[b:3487c28faf]Table Tutorial[/b:3487c28faf]


[url=http://techefx.com/tutorials/tabletut.html]Click here[/url] to view the .HTML file


[b:3487c28faf]First Tutorial, don't hate[/b:3487c28faf]

© 2004-2017 MyGen.co.uk. All rights reserved.
MyGen v2.6 - 139525130 Unique Visitors
This page was created in 1.028 seconds
Privacy Policy

eXTReMe Tracker