Creating Tables

Creating Tables




Well, as promised to Jame I'll be posting how to make those snazzy tables for your guides. For this you're going to need to know a little HTML coding. Thankfully CSS will still work within your HTML codes but you have to be extra careful because if you miss a tag you will botch the entire thing. Trust me, I made a serious error on my last guide and the whole page went funky. Took me an hour to find that missing tag! That said, lets begin.

For those unfamiliar with HTML a good site to check out is www.w3schools.com, there is a link that says Learn HTML on the top left.


First things first! Tags! Tags! TAGS! Pay close attention to your tags. You need an opening tag and a closing tag. Your tags will be surrounded by Angle Brackets < and >. Now you could just drop a table right into your guide but CSS has issues with doing that, or at least it does here. I'm still a novice when it comes to XML and CSS coding so bear with me. Its safer to start AND end your table with an html tag.

Example: < HTML > and < /HTML >

NOTE: When you create your tags there will be no spaces inside the tag, I have to do that here so you can actually see them. Please look at the whiteboard on w3schools.com for a proper representation.

Our opening tag is < HTML > and our closing tag is < /HTML >. The tags are identical except for the forward slash in the ending tag. So your tags will always have a mate, be sure you always have a closing tag! Next comes the BODY tag. The body is what it is, the meat and potatoes or your document.

Example:

<HTML>
<BODY>
</BODY>
</HTML>

Everything will go inside your HTML tags and your displayed material will be inside your BODY tags.

Example:

<HTML>
<BODY>
HI! This is my website. What do you think?
</BODY>
</HTML>

Now try not to get discouraged here, coding is a simple thing. These will be the only HTML tags you will need while building your table. The next set of tags will be a little more complicated but fairly simple. These will be your TABLE tags.

Example:

<HTML>
<BODY>

HI! This is my website. What do you think? Here is a table.<BR>
<TABLE>

</TABLE>

</BODY>
</HTML>

Now, here is where CSS and HTML start to disagree. You'll note that I've added in a tag that I haven't talked about, < BR > is a line break tag and is similar to you hitting Enter on the keyboard. So why not just hit enter? HTML does not recognize word processing line breaks so you have to use the line break tag < BR >. I already have several of these tags listed here but you won't see them at work.

Back to our table. As you create your table you will have to define several things. First are borders. If you do not define the border size you will have a nice neat table but no dividing lines.

Example:

Col1,Row1 Col2,Row1 Col3,Row1
Col1,Row2 Col2,Row2 Col3,Row2

If you wish to create dividing lines you will need to define the border size in your opening TABLE tag.

Example:

< TABLE BORDER="1" >

Col1,Row1 Col2,Row1 Col3,Row1
Col1,Row2 Col2,Row2 Col3,Row2

Now I know I said to never put spaces in your tags, but there will be a few exceptions. Make sure to leave a space between each definition in your tag, such as the one between TABLE and BORDER in the opening table tag.

The BORDER definition tells the browser to load a table border width of 1, a single pixel line usually. You can certainly go higher and you can do some pretty fancy things with your table borders that I will not go in depth here.

Now if you've seen my blacksmithing guide you'll note there is a light gray underline at the top of my table and the text is in bold. This is done by adding a HEADER tag.

Example:

Header1,Col1 Header2,Col2 Header3,Col3
Col1,Row1 Col2,Row1 Col3,Row1
Col1,Row2 Col2,Row2 Col3,Row2

By now you're probably like WHOA NOW! How did you even create the Columns and Rows, you're talking headers and such, I'm so lost! Fret not. Your ROW tags are like BODY tags, everything in that row will be contained within the ROW tag. A ROW tag looks like this: < TR > and a closing tag of < /TR >

Example:

< HTML ><br>
< BODY ><br>

HI! This is my website. What do you think? Here is a table.< BR ><br>
<TABLE BORDER="1">
<TR>
<TD> I'm ROW 1!</TD>
</TR>
</TABLE>

</BODY>
</HTML>

I'm ROW 1!

You're probably wondering what's up with that < TD > tag? That is essentially how we create columns. The < TD > is a Table Data tag. Each time you ad a new < TD > tag you create a new cell of data. You want to make sure that you keep a static number of DATA tags or you will end up with blank cells.

Example:

Col1,Row1 Col2,Row1 Col3,Row1
Col1,Row2 Col2,Row2 Col3,Row2 Col4,Row2
Col1,Row3 Col2,Row3 Col3,Row3

Blank cells aren't the end of the world, but at least your columns are still even. And that is nearly everything.

All we need now are some headers and you're golden. Header tags are simple: < TH > just means Table Header. You can use these to define a bold text and a different shaded underline.

Example:

Header1,Col1 Header2,Col2 Header3,Col3
Col1,Row1 Col2,Row1 Col3,Row1
Col1,Row2 Col2,Row2 Col3,Row2

And you're done! Hopefully I've made this easy enough. If you have any questions please feel free to ask and I'll do my best to answer them in a timely manner as always.



Size is a major factor in life and a factor that I seemed to have missed when creating this guide. Here is an example of how you can use the page width to determine the width of your table. This will assign a maximum width based on the current page width.

Example:

I'm huge!


<html>
<body>
<table border="1" width="100%">
<tr>
<td>I'm huge!</td>
</tr>
</table>
</body>
</html>

Example:

I'm tiny!


<html>
<body>
<table border="1" width="10%">
<tr>
<td>I'm tiny!</td>
</tr>
</table>
</body>
</html>