iCanCode/Tutorials/Basic Tables

Lets get started !You make a table with the tag <table>. Then put in between those tags <tr> for a new row of cells which are made by using <td>. Look at this:

That is a table. However, there is nothing in it so your browser just scrunches it together. There is nothing to see, just empty space. I made it using the following code:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

That looks pretty boring, doesn't it? It is though, very simple. You can try copying and pasting it to try it out yourself. Add in some words between the <td></td> tags and see what you get. In this tutorial we are going to make a table that lays out a page for an online gallery. We want a cell for the picture, a cell for the description, a cell for the title and a cell for links. Here is what you will be able to make soon:

Name of artwork here
Home Interesting exibitions Fun for kids Modern art Famous painters Contact
Write description here. It can be as long or as short as needed, because the cell will adjust to it whereas the picture cell's size is set in pixels so will not stretch when the browser is resized.

Pretty cool. Lets start from stratch in making it. First of all we must create a basic table. This table though, will be quite different because a lot of attributes are used to make it work. I will try to eplain them. Here is the code for the basic shape of the table:

<table cellpadding="1" cellspacing="1" border="0" width="100%">
<tr><td colspan="2" bgcolor="#FF0000"></td></tr><tr>
<td bgcolor="#FFFFFF" valign="top" align="right"></td>
<td valign="middle" align="center" bordercolor="#FFFF00" bgcolor="#996600" style="padding: 20 0 20 0;" width="400px"></td></tr>
<tr><td colspan="2" bgcolor="#3399FF" align="center">
</td></tr></table>

Thats what we have so far. This is what it means:

The cellpadding sets the the amount of pixels that the text in the cells is pushed inwards. The cellspacing sets, in pixels, how far apart the cells are spaced. The border sets, also in pixels, how wide the border is. Because different browsers interpret borders slightly differently we haven't used a border. The width can be set in pixels or precent. We have set ours in percent so that it adjusts to the browser's size automatically and therefore does not exclude people who have smaller screen resolutions. Then we created a new table row, this is for the title of the artwork. In the <td> tag we add in colspan and bgcolor. Colspan means column span and sets how many columns across the table cell should be. We have set in to "2", because we if you look at our table it has two columns in it and we want our title to stretch across both of them. You can also use rowpsan. Bgcolor means background colour (be very careful HTML, uses American spellings, ahhh!). The code thingy we have set it to is called hexadecimal, it is used in HTML to create colours using RGB, but that is for another tutorial. You can also use simple colour names in there, such as black, blue, red and lime. We then close off our cell and row tags and create a new row containing a new cell. This cell also sets the bgcolor, but it has two new attributes as well. These, align and valign, are used to position the things inside a cell. Align sets the horizontal alignment and valign set the vertical. We have set ours so that it goes to the top right, this way it will always being right next to our picture. Now we create our picture cell. The two new attributes in here are bordercolor and style. Bordercolor (remember that it's "or" not "our") is pretty self explanatary and you must be getting bored of this long paragraph by now. Style however, is a fantasticly useful thing that crops up all the time in HTML. What it does is insert a little piece of CSS into the tag. Don't worry if you don't know what CSS is. For now all you need to know is that it has made the top and bottom padding for the cell up to 20px so that there will always be space around the picture. Width is also in here as it is in the <table>, this time it uses pixels to make sure we get the correct size for the cell. We then close off the row and cell tags so we can create our last cell. You should by now understand all of the attributes assigned to it. Phew!

Wow, we have now covered how to make the table. Well done. Now all that is left is to fill it in. Experiment with different things and have fun. Good luck!