Working With Tables » Skylish

Working With Tables

YOUR JOURNEY SO FAR: Home » Tutorials » Working With Tables

Tutorial hardness:

Rate this tutorial:

I love working with tables, mainly because they allow me to position my text next to eachother without any hassles. I'm sure there are other ways to posistion text next to eachother, but I've been doing this way for so long, I'm so used to it, and it is my favourite method.

So what's so great about positioning text next to eachother? Instead of allowing your text to just wander down the page, you can poisition them next to eother and make your website neater:

Is this...

Not better than this?

The basic code for a table is shown below:


<table>

<tr>

<td>

Content goes here

</td>

</tr>

</table>

<table> is the table, of course. This is needed at the beginning and the end.
<td> this stands for 'table data' and is needed before and after all the content you want to appear on the table.
<tr> this stands for 'table row'.

When I usually use tables I use them to make content appear next to eachother; to do that the basic code is shown below:


<table>

<tr>

<td>

Content goes here

</td>

<td>

Content goes here

</td>

</tr>

</table>

As you can see, there are two 'table data' tags now shown, and this is what get's the content to appear next to eachother. You are also free to add another 'table row' tag to frame the 'table data' tags, to of course create a new row:


<table>

<tr>

<td>

Content goes here

</td>

<td>

Content goes here

</td>

</tr>



<tr>

<td>

Content goes here

</td>

<td>

Content goes here

</td>

</tr>

</table>

However, I do not usually do this option, I just stick with my <br />'s.

How to work with the code

Right now, it all seems pretty boring! But there are things you can do to spice up this code.

First off, if you want to make you table appear accross the whole page, you simply use <table width="100%" border="2" cellpadding="6"> in place of your first <table> code. This is what I use often.

If you want to make your table appear accross the whole page, but you want to columns to be different sizes, you add <td width="?%"> to all of your different <td> code's.

You can also add borders and padding! To add borders or padding, add these codes

<table border="NUMBER" cellpadding="NUMBER">

to your beginning <table> code.

Let me show you

I will show you how to create a basic table using all of these combined methods:


<table width="50%" border="2" cellpadding="6">

<tr>



<td width="20%" height="0">

<strong>I'm in a table!</strong>
 
</td>




<td width="30%" height="0">

<em>I'm in a table</em>

</td>




</tr>

</table>

I'm in a table!

I'm in a table

Good luck. ^_^