banner made by __jxhn_. thanks!

Basic Table | Break it Down | Add A Border | Add A Cell | Add Another Row |
Background Color | Width And Height | Background Picture | border color and size |
Border Size | Colspan and Rowspan | Border Styles | Td Tags

When I first learned about tables, I had no clue why I would ever need one. Now I have no clue how I got on without them. You will be very happy once you learn how to do them too.

This is the most basic table of them all:
This is what it looks like:
This is a table

as you can see, you can't even tell it's a table. Now, to help you understand it, let's break it down:
table- this tag starts the table. there is much you can do with this tag.
tr- this tag starts a row.
td- this tag starts a text part of the table, or a cell. you can also do a lot with this tag.

Ok, now let's start on making our table more prettiful, etc.
First, let's add a border to our table:
what it looks like:
This is a table

Next we'll add another cell:
What it looks like:
This is a table another cell


now for making another row:

Now, let's start with a whole new table:

how it looks:
Blah

We are going to add a background color, then make the width and height of it.
HOw you make the background color:

note- you can change the background color. you can find codes for colors and mindlessinvalid.com, or some you can just type the name.
how it looks:
Blah

now for width and height:

How it looks:
Blah

The width and height are in pixels.
now for the actual background picture:

how it looks:
Blah

now let's start with another new table. let's do border color and size.

how it looks:
blah

Now let's change the size of the border:

The border=5 part says that the border will be 5 pixels wide.
How it looks:
blah


colspan and rowspan next. Row span and colspan are for cells that spread across more than one cell. Here's and example of colspan:
cell with colspan
Blah blah

now for rowspan:
cell with rowspan Blah
blah

now the codes:
Colspan

and Rowspan:

as you can see, you have to have other cells for it to rowspan and colspan over.
Now, let's combine them:
colspan=3 blah
rowspan=2 blah blah Blah Blah colspan=2

as a helpful reminder, colspan stands for column spanning, so it spans over columns, and rowspan. for row spanning.
Now, for a very cool part of the table:
the border styles.
the border style code I have is a little more complicated; I searched awhile, and this is the easiest one I could find:

how it looks:
THis is a ridge border

as you can see,the code is a little different. the width is still in pixels and the color is still, well, the color. Now to describe the border style:
There are many types of border styles. To make your table have one, just take away the ridge there and replace it with one of these:
Solid Border

double border

Groove Border

dotted border

dashed border

inset border

outset border


about those td tags. I said you can do something with those. YOu can make those have a certain width, along with a background color or image. Here are some things you can do: align-
THis makes all text in the table aligned right. you can also do center and left.

Now for valign. It works the same way, only it makes the text start at the top or bottom. It is automatically in the center if you don't use valign.

THis makes all text in the cell aligned top. you can also do bottom

Now for Background Color:

How it looks:
Blah Neat, huh?
Neato Blah

As you can see, you can also put a background image in.
make sure you have the width and height of the cell set to the width and height of the background image or more. if it is less, or not set at all, it wont work. to do this right click on the image, click properties, then it will tell you the width and height

Now we are going to do two different things that take serious table making skills: make a blog and make one of those things that shows your avatars and info.

First the blog. Let's break down the blog I have made right here. This blog uses a scrollbar, but I don't teach that. I can give you the code I used and then tell you a little, but for a good tutorial go to this petpage.
Now, my blog is a table with no border and a background image, with a scrollbar in one of the cellls. Here's the blog without the text or image, but with just the border(note it is scaled down to fit in this scrollbox):
b
b Scrollbar goes here
b















I made sure I had the width and height set on everything so there could be no mistakes. The top and bottom cells colspan, but they don't have to as you aren't putting anything in them and you don't have a border on the blog.
Now, let's add a background image:

What it looks like:
b
b Scrollbar goes here
b










if you didn't notice, i used a different code for the background to make sure it didn't repeat itself. This is the code i used:

yay! it's a happy blog! You can put more scrollboxes in the blog, making it more like a guild layout. You would need to add a lot more cells. But remember: You don't always have to use rowspan and colspan because the border isn't gonna show. Like in this table, I have the top and bottom cell not even colspanning, as they don't show up. Also, If you want the border to show up in a cell, you have to have text in it. that's why in all those codes up there you see some white font. this is to make sure you see the border.

Now for the Avatar/ Info Box:
The avatar info box usually has no background, a border, some scrollbars, and your info. Here's the basic look, with only the border (note it is smaller than it would be on your lookup):
Wan ted Avat ars Info neom ails, Gui lds, etc.
Links


As you can see, it's a very easy table. The actual dimesions you would want to use for your lookup be width=450, height=200, then each cell on the side would be 75, and the middle would be width=300
Now let's make it look better. we'll add a border, and a scrollbar in each cell:
Wan ted Avat ars Info neom ails, Gui lds, etc.
Links

the code:

as you can see, I added the border to everything except the table tag. this is because if I just do the table tag, it only does it on the outside. Also, the inside doubles over because each cell has a border. If you want you can change all this by making certain cells have borders and certain not, or some having different types or none at all.
Wan ted ava tars Wan ted ava tars Wan ted ava tars Wan ted ava tars
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
neom ails, gui lds, etc. neom ails, gui lds, etc. neom ails, gui lds, etc.
Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links Links

The code:

Now, if you actually want the thing for your lookup. note, this might not work well....try to make your own dimensions. But if your really lazy like I am, then you can just use this one:

Ok...well I guess that's it. If you have any more questions, Neomail Me
When someone asks me a question, I'll put it up here. Also, if something here is unclear, you can neomail me about that, too.


































Link To me:


other links:
Great links for you neopets!


My Awards!





Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions