Language…
14 users online:  AmperSam, dotCoockie, Golden Yoshi, Guido_Keller, itsmefigs, JezJitzu, Maw, playagmes169, PMH, Serena, signature_steve,  Telinc1, timothy726, toady - Guests: 262 - Bots: 321
Users: 64,795 (2,377 active)
Latest user: mathew

Need help with a layout?

I am creating this tutorial to help others with their layouts because people usually have trouble. This is mainly about tables, and that's the good part about a layout.

With the colours, the first two zeros (000000) are the values of red, the zeros in the middle are the green value, and the last two zeros are the blue value. The whole thing is called an "RGB Value", which stands for "Red Green Blue Value". Remember that it uses hex, too (so it goes from 0-FF). Also, when I put the # symbol somwhere, that means you replace it with a number (any amount of digits, but try not to go over 50 (an exception with colours that can use up to FF)).

First, you don't need a picture, but you can use one if you want to. If you don't want to, then it will be just one colour.

Let's get started now!


The Major Parts



There are three major parts: the <table> tag as your whole layout, the <tr> (table row) tag as a row of "cells", and the <td> (table cell) tag as one cell.

A cell is a spot where you can put text.


I will show an example with one colour.

<table border="2" cellspacing="5" bgcolor="#FF0000">
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
</table>

would be
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2



The border="2" part is for the gray around the cells and table. The cellspacing="5" is for the amount of pixels between the cells and border. Bgcolor is only usefull if you aren't using a picture. It is used for cell colour. Here are what you need to know, other than the three major parts of the table.

There are also headings, which the tag is <th> (table heading). This will allow to do diffrent things, such as descriptions. Here is an example:

<table border="2" cellspacing="5" bgcolor="#007700">
<tr><th>Word</th><th>Description</th></tr>
<tr><td>th</td><td>The tag used for a heading.</td></tr>
<tr><td>td</td><td>The tag used for a cell.</td></tr>
<tr><td>tr</td><td>The tag used for a row of cells.</td></tr>
<tr><td>table</td><td>1. Something mainly used for eating.
2. The tag used for starting a table (HTML).</td></tr>
</table>

would be
WordDescription
thThe tag used for a heading.
tdThe tag used for a cell.
trThe tag used for a row of cells.
table1. Something mainly used for eating.
2. The tag used for starting a table (HTML).


The Minor Parts



NEW!: URL Links- this is complicated, so I'll give an example: Click <a href="http://www.smwcentral.net">here</a> to go to SMW Central.

would be

Click here to go to SMW Central.

Remember, you HAVE to put the "useless" http:// section of the URL to make the link work properly.



Remember that these need to be put in the <table> tag (that means like this: <table (insert text here)>).



Border- the outlining of the table and cells. You need to put ="#" after border for it to work. If you put a 0 there, you won't really have a table because it will cause all lines to disappear.



NEW!: Width and Height- you do not put both of them together. Instead, you keep them seperate. Remember to put them both in the <table> tag. Width is how long it is left to right. You need to put ="#" after width for it to work.

Height is how long it is from top to bottom. You need to put ="#" after height for it to work.

Your best choice is to set them both in the table to 100%.



Cellspacing- the amount of pixels between the cell and border, or another cell. You need to put ="#" after cellspacing for it to work.



Bgcolor- the colour your cells and empty part of the table use. You need to put ="#" after bgcolor for it to work.



NEW!: Background- this works a little diffrent. You need to put background="$", except you put the URL for your image instead of a dollar sign. That means you need to be registered to a website that has a spot to put images. I would say to use Photobucket, which can be found here. Remember that this is optional, so you don't have to do it. You also need to choose direct link. Then, in front of the URL, put:<img src=". Then, after the URL, put:"> (you only need the extra parts for placing an image, use only background="(insert URL here)" for the background).
It needs to be in the <table> tag.

Here's a picture of the bramble BG from DKC 2:
</a>

This is an image placed, not a background.



NEW!: Rowspan and Colspan- this feature is cool! It fuses cells together.

Rowspan fuses them from up and down.

Colspan fuses them from left and right.

Example:

<table border="2" cellspacing="5" background="http://i159.photobucket.com/albums/t136/RedChameleon/Layout3.jpg">
<tr><td>Row 1, Column 1</td><td colspan="2">Row 1, Column 2+3</td></tr>
<tr><td>Row 2, Column 1</td><td rowspan="2">Row 2+3, Column 2</td><td>Row 2, Column 3</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 3</td></tr>
</table>

would be
Row 1, Column 1Row 1, Column 2+3
Row 2, Column 1Row 2+3, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 3

(you may have to use the cursor and highlight the words)

You would usually expect it to be the other way around, but it's logical. Rowspan is how many rows high it would be. Colspan is how many columns long it would be.



Last, but not least:
NEW!: Text Areas- this is very, very, complex at first, so listen well!

A text area is something inserted that doesn't scroll the page, but keeps information that won't cause the page to oversize. It contains rows and cols (short for columns). They use the tag <textarea>, and the amount of rows and cols must be made in the tag. It also uses the ="#" after it. Here is an example:

<textarea rows=5 cols=25>This is an example. Do you like the textarea? It can use pictures! It's cool! But you may not like it! Who would not, though? It's one of HTML's best things to make!</textarea>

would be



The rows give a certain amount of lines to read, depending on the number. That doesn't mean you can't have more than that. That means it will start with that many lines, and you can scroll down! The cols are the amount of numbers allowed on a line. Pretty simple.




Now that you know about that, it's time to make your layout!



MAKING A LAYOUT!



Just follow the above steps and do whatever! But when you want to make a spot for your main text in the layout, do this.


1. You need your header and footer empty. It doesn't matter about the footer because you can put that text in a cell. Neat, huh?

2. Create your layout completely (using the header and footer).

3. Put <tr><td> at the very end of your header.


That should give you a cell to put your text in. (thanks to darklink898 for the forum post text cell)



Extra things



NEW!: Blank Cell- this will create a cell to appear, but it will have nothing in it. You need to type &nbsp; after the cell tag, and you will get a cell with nothing. I don't really find it useful, but you may use it if you want.



NEW!: Table in a Table- if you use the table tag after another table tag, there will be a table inside your table. This will also work putting after the tr tag to create that row have a table. Note that if you don't end it after you end the table row, then it will continue until you end it. This can also be done with the td tag. There can also be a table in that table, and a table in that table, and so on.



NEW: Align- this works with left, right, and center. You have to put align="^" in the td tag. The ^ means that you have to put left, right, or center there, and the text will be put on that section of the cell.



NEW!: Coloured Words- this will allow people to see what you type a lot better. For example, if you have a cell with the RGB value A8FFFF, and you have white coloured text, it will be very hard to see. In this case, you should turn the text black. The way to do this is put [, then color=#(######)] (the number signs in the brackets you change, the other one is needed, and don't include the brackets). You put that before your text, and there's something else you have to put after. It's first a [, then /color]. I did that and turned this sentence blue.



NEW!: Invisible Text- this makes text invisible until you highlight it. For example, your table is green, and the colour of the text is the same exact green. Here's an example:

<table bgcolor="#007700" cellspacing="3" border="3" height="100% width="100%">
<tr><td>Highlight this with the cursor: <color=#007700>do you like this trick? I thought of it myself!</color></td></tr></table>
(the < and > signs around the color and /color tags should be [ and ])

would be
do you like this trick? I thought of it myself!</span></td></tr>




NEW!: Covered Text- this is easier to find than invisible text. This is how it goes:

<span style="color: 000000; background-color: 000000;">This is neat!</span>

would be

This is neat!

ALWAYS put the color and background-color parts numbers the same.
That is all. (partial credit to Dotsarecool for helping me a little bit with my layout with his tutorial)


P.S. I am not adding anything more to this by myself, unless there's something I really want (or need) to add. If anyone has any questions or anything they'd like answered in this (except for marquees, since they are prohibited from layouts), post in this thread, and I'll answer and possibly put it in this tutorial. Also, this is allowed to be bumped as much as you like. If I catch anyone complaining about it being bumped, then watch out. I'll tell one of the admins or mods about what you did. Same goes with flaming, insulting, etc.
Unexpected end tag (</span>) at 10583, expected </table>
Unexpected end tag (</td>) at 10588, expected </table>
Unexpected end tag (</tr>) at 10593, expected </table>

I can help by answering any questions you post here. :P
But there's already an HTML/CSS help thread on the programming forum, I think...
That's Dotsarecool's, but it is only a tutorial on HTML and CSS. Mine contains more information about layouts because it is based on layouts. I didn't think that thread had enough, like the tip you gave me about starting the table in the header and ending it in the footer.
Could you read my post properly before assuming I was referring to that thread...?
All a layout is a table. My thread covers all about tables.
It doesn't covers everything about tables.
And layouts can also be made of divs and other stuff.
Yeah, and that is the purpose of making this thread. Even with your help, making my layout was so hard to make.
@ darklink: I meant most. :P
Red Chameleon, you screwed up the tables with your first post. >_<
I'll be answering a lot of posts...

Originally posted by darklink898
Could you read my post properly before assuming I was referring to that thread...?


No, I went through the whole thing, and there was only Dotsarecool's HTML and CSS guide.

Originally posted by Dotsarecool
All a layout is a table. My thread covers all about tables.


Not everything. I made this to give help about layouts, not ALL HTML.

Originally posted by darklink898
It doesn't covers everything about tables.
And layouts can also be made of divs and other stuff.


Yeah, darklink898 is right.

Originally posted by Dotsarecool
@ darklink: I meant most. :P


Oh... Sorry about the other answer. But what I'm trying to do is give the most detailed and easy to understand thread about layouts. I don't want to wipe yours out, I want to help others. Sorry if you took it like that...

Originally posted by darklink898
Red Chameleon, you screwed up the tables with your first post. >_<


Any tables screwed up are now fixed, so no more worries.
Originally posted by darklink898

I can help by answering any questions you post here. :P
But there's already an HTML/CSS help thread on the programming forum, I think...


*cough*
Note I said Programming Forum, not General Computing Forum. >_>
Originally posted by darklink898
Originally posted by darklink898
I can help by answering any questions you post here. :P
But there's already an HTML/CSS help thread on the programming forum, I think...
*cough*
Note I said Programming Forum, not General Computing Forum. >_>


...you must be talking about the "HTML/CSS Thread" thread, right? I never noticed that, but it's a diffrent website. I want to make an easy to find tutorial. I was just trying to be nice to the members...

;_;

How come when I try to add a background to my layout it doesn't work, but when I try to add an image it does? What am I doing wrong?
Originally posted by DarkHacker
How come when I try to add a background to my layout it doesn't work, but when I try to add an image it does? What am I doing wrong?


I fixed that, and at this time, it looks like you figured it out!
Originally posted by Red Chameleon
There are also headings, which the tag is <th> (table heading). This will allow to do diffrent things, such as descriptions. Here is an example:

<table border="2" cellspacing="5" bgcolor="#00FF00">
<tr><th>Word</th><th>Description</th></tr>
<tr><td>th</td><td>The tag used for a heading.</td></tr>
<tr><td>td</td><td>The tag used for a cell.</td></tr>
<tr><td>tr</td><td>The tag used for a row of cells.</td></tr>
<tr><td>table</td><td>1. Something mainly used for eating.
2. The tag used for starting a table (HTML).</td></tr>
</table>

would be
WordDescription
thThe tag used for a heading.
tdThe tag used for a cell.
trThe tag used for a row of cells.
table1. Something mainly used for eating.
2. The tag used for starting a table (HTML).

(you may have to use the cursor and highlight the words)


Just so you know, there ARE darker shades of green......

edit: also make your own layout a darker shade of blue >_<

bye
Originally posted by Green+Red Luigi
there ARE darker shades of green......


Originally posted by Green+Red Luigi
make your own layout a darker shade of blue >_<


Done.
i just can't do the background
Your layout has been removed.
Originally posted by Red Chameleon
NEW!: Background- this works a little diffrent. You need to put background="$", except you put the URL for your image instead of a dollar sign. That means you need to be registered to a website that has a spot to put images. I would say to use Photobucket, which can be found here. Remember that this is optional, so you don't have to do it. You also need to choose direct link. Then, in front of the URL, put:<img src=". Then, after the URL, put:"> (you only need the extra parts for placing an image, use only background="(insert URL here)" for the background).
It needs to be in the <table> tag.


I changed it. Hope this helps!