|
|
|
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:
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:
Next we'll add another cell: What it looks like:
now for making another row: Now, let's start with a whole new table: how it looks:
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:
now for width and height: How it looks:
The width and height are in pixels. now for the actual background picture: how it looks:
now let's start with another new table. let's do border color and size. how it looks:
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:
colspan and rowspan next. Row span and colspan are for cells that spread across more than one cell. Here's and example of colspan:
now for rowspan:
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:
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:
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:
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-
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.
Now for Background Color: How it looks:
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):
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:
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):
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:
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.
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! |
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® 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