aresvallis | A simple table tutorial (Reply)

Because I am incredibly annoyed by those table generators and profile layout codes that require crediting, I have decided to give a basic lesson on how to do tables, which is a very simple code, and one should never have to credit anyone for use of a basic code. It is so simple it has been around since the beginning of time, that's how simple it is.

Now. Open up a notepad program, just plain text, no fancy formatting or anything. Word is not a good thing to use. It will screw up your table and any html you write in it.

Got a clean notepad? Good.

1. Every good code needs an opening tag. For a basic table, that tag is <table>. Very easy, right? Right!

2. And every good code needs a closing tag. That would be </table>.

Example:

<table>
</table>

Not very interesting though, right? We haven't added anything yet, that's why.

3. There are two inner tags to go inside the table, which is <tr> and <td>.
<tr> is to start a new row. It contains the <td> tags, which are the cells you put your content in. So, let's add a table row, using a closing tag in the same manner as the table tag.

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

Hmm, we could do a little better than that, so why not add another row? In fact, let's add five rows and make this a fanfiction prompt table!

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

All right! Now we have a set of five rows to put in ten prompts.

4. Now we need to add the cell tags, making two cells in each row for a total of ten prompts! You can copy and paste the tags too, to save on having to type them over and over. This is not recommended when you have information in them, as it can get confusing easily, so it's best to make sure you have the right information to put in each cell.

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

Note: You COULD set your table up like this:

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

with each cell on a separate line, but it would give you spaces in the cells and between the cells where you might not want them, so it's best to keep one row on one line of code. This is where you turn off the word wrap feature!

5. Adding content. Now that we have our table, we need to put in the prompts! Let's choose some random ten words... like "hay, golden, flower, sky, rainbow, dances, eyeglasses, arrows, mail, torment". That should do it.

<table>
<tr><td>hay</td><td>golden</td></tr>
<tr><td>flower</td><td>sky</td></tr>
<tr><td>rainbow</td><td>dances</td></tr>
<tr><td>eyeglasses</td><td>arrows</td></tr>
<tr><td>mail</td><td>torment</td></tr>
</table>

hay	golden
flower	sky
rainbow	dances
eyeglasses	arrows
mail	torment

Awesome! We now have a functional prompt table! But wait? Did you just say you wanted a border? Well, never fear! A major thing to remember is, like the img tag, you can add a border to the table tag, like so:

<table border=2>

Also to note, is cellspacing and cellpadding.

<table border=2 cellspacing=1> will give you a table with a border of 2 pixels and space between the cells of 1 pixel. Cellpadding is the same as cellspacing, only on the inside, between the cell and the content.

<table border=2 cellSpacing=6 cellPadding=6>
<tr><td>hay</td><td>golden</td></tr>
<tr><td>flower</td><td>sky</td></tr>
<tr><td>rainbow</td><td>dances</td></tr>
<tr><td>eyeglasses</td><td>arrows</td></tr>
<tr><td>mail</td><td>torment</td></tr>
</table>

Gives you this:

hay	golden
flower	sky
rainbow	dances
eyeglasses	arrows
mail	torment

The last trick I will teach you is how to make one cell span across four columns.

<table border=2 cellSpacing=6 cellPadding=6>
<tr><td>My Fanfic Prompts</td></tr>
<tr><td>hay</td><td>golden</td></tr>
<tr><td>flower</td><td>sky</td></tr>
<tr><td>rainbow</td><td>dances</td></tr>
<tr><td>eyeglasses</td><td>arrows</td></tr>
<tr><td>mail</td><td>torment</td></tr>
</table>

Note what that code does here:

My Fanfic Prompts
hay	golden
flower	sky
rainbow	dances
eyeglasses	arrows
mail	torment

It messed it up! :O

To fix that, we add a colspan to the CELL TAG of the cell we want to have span the others, not the table tag.

<table border=2 cellSpacing=6 cellPadding=6>
<tr><td colspan=2>My Fanfic Prompts</td></tr>
<tr><td>hay</td><td>golden</td></tr>
<tr><td>flower</td><td>sky</td></tr>
<tr><td>rainbow</td><td>dances</td></tr>
<tr><td>eyeglasses</td><td>arrows</td></tr>
<tr><td>mail</td><td>torment</td></tr>
</table>

My Fanfic Prompts
hay	golden
flower	sky
rainbow	dances
eyeglasses	arrows
mail	torment

Much better now, don't you think? I believe the row equivalent is rowspan, although you are very likely to not need this as it is more useful when building a website with tables, and that's just nasty these days because there are better ways of doing that, such as div and float.

And that is how you make a table. To make a profile table code, you can do the single cell per row trick:

<table>
<tr><td>HEARDER HERE</td></tr>
<tr><td>LIKES DISLIKES HERE</td></tr>
</table>

and add as many as you need.

A table for icons would be a bit more complex, as you have many cells all at once to deal with, but again it's easy to deal with it one row and cell at a time.

<table>
<tr><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td></tr>
<tr><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td></tr>
<tr><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td><td>NUMBER HERE</td></tr>
<tr><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td><td>IMAGE HERE</td></tr>
</table>

NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE
IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE
NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE
IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE

Also, adding bgcolor=blue to any tag within the table, excluding closing tags, will turn it blue, as so with the top TR tag in this table:

NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE
IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE
NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE	NUMBER HERE
IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE	IMAGE HERE

Also, just like IMG, table can accept a fixed height and width tag of height="500" and width="600", for example. Content also can overrun the width and height, so try to select dimensions that you know you can fit all your planned content in. You can set height and width for cells and rows too, but it's generally better to let them be flexible, or adjust your cellpadding and spacing as necessary.

You can also style="" the table using css, though that doesn't work so well on LJ, but you can make the border solid pixels or dashed, and so on. I'm not gonna teach you CSS though, so just head on over to w3schools. This is pretty much a table tag only thing, though it might work with rows and cells. I haven't tried.

REMEMBER TO SAVE YOUR WORK!

Now you never have to credit someone for a stupid table code ever again! Because making a table code is so much more satisfying, because YOU made it.

The end.