aresvallis: (Default)
[personal profile] aresvallis
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>

haygolden
flowersky
rainbowdances
eyeglassesarrows
mailtorment


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:
haygolden
flowersky
rainbowdances
eyeglassesarrows
mailtorment


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
haygolden
flowersky
rainbowdances
eyeglassesarrows
mailtorment

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
haygolden
flowersky
rainbowdances
eyeglassesarrows
mailtorment

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 HERENUMBER HERENUMBER HERENUMBER HERENUMBER HERE
IMAGE HEREIMAGE HEREIMAGE HEREIMAGE HEREIMAGE HERE
NUMBER HERENUMBER HERENUMBER HERENUMBER HERENUMBER HERE
IMAGE HEREIMAGE HEREIMAGE HEREIMAGE HEREIMAGE 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 HERENUMBER HERENUMBER HERENUMBER HERENUMBER HERE
IMAGE HEREIMAGE HEREIMAGE HEREIMAGE HEREIMAGE HERE
NUMBER HERENUMBER HERENUMBER HERENUMBER HERENUMBER HERE
IMAGE HEREIMAGE HEREIMAGE HEREIMAGE HEREIMAGE 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.
From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.

Profile

aresvallis: (Default)
aresvallis

July 2012

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 24th, 2017 09:01 pm
Powered by Dreamwidth Studios