Web Design For Idiots

So you decided that you want to start COMPLETELY from scratch and build your website/blog without the help of ANYONE.

GOOD FOR YOU!

But i bet you have no idea where to start.

The easiest, most newbie way, is to start by using one large TABLE to hold your main content.

A table is an element of a website that allows you to organize your data into rows and columns. Much like you do when you are creating a microsoft word document that has a table.

This will be one of the easiest things you learn, but probably one of those things that you use EVERYWHERE. If i can teach this concept to my husband in a few hours, surely you guys can get it.

So let’s start explaining how a table works.

You are always going to start your table with this:
<table>
and end it with this
</table>
So just using those two pieces, you have a table with NO rows and NO columns, so you can not start putting info in there yet. You need to have ATLEAST one row and one column in a table.
A row for a table is defined by this:
<tr> – simple right? tr means
Table Row.

You close off, or end that row with this:
</tr>
Are you getting the gist now?? You always start with the tag, and end it with the tag PLUS ‘/’

Now, your <tr></tr> needs to have one more thing inside of it which is <td></td>

I don’t know if this is the CORRECT definition of <td>, but it helped me to remember it as
Table Data.
This is the tag that will hold ALL of the content for the row that it is contained in.

So for a recap

If you take all of those steps and combine them together you get the following:
<table>
<tr><td></td></tr>
</table>

This give you a table that looks like this: (see that TINY little box beneath this?

The reason it is so small is because we did not give it is SIZE.

To make a table that is a good size for a website, you can use a percentage that will move and stretch with different size monitor, or a fixed width that will stay consistent no matter what the size of the monitor is. This is always a dilemma with designers. You have to choose which is better for your design. If your design will only look good with a certain size website, use fixed. This blog is a FIXED width.

So you add your width in the <table> element like this:
<table width="25%">
You can also use “880px” for a fixed width.

Here are some other common attributes you can add to the

element to change it’s look:

attribute	example
align	“left” “center” “right” – Specifies the alignment of a table according to surrounding text
bgcolor	“#000000″ – Specifies the background color for a table. Get web color codes here
border	“2pixels” - Specifies the width of the borders around a table
cellpadding	“5pixels” – Specifies the space between the cell wall and the cell content
cellspacing	“10pixels” – Specifies the space between cells

guess what, this is a table using the follwing attributes, <table bgcolor="c1c1c1" cellspacing="2"> < bgcolor>
THIS DOES NOT USE A TABLE BORDER ATTRIBUTE

There was no width set to that above table because there was content in it to stretch it out. If you do not set a width, it will make it as big as it can to fit the content that you put in the <td>

SO here’s a little tip:
Table borders never really look good. They are two lines that go around the table and usually most people want one solid color line.

THIS IS A TABLE WITH THE TABLE BORDER ATTRIBUTE

<table border="2px"><tr><td>THIS IS A TABLE WITH THE TABLE BORDER ATTRIBUTE</td></tr></table>

THIS IS USING CELLSPACING AND BGCOLOR

<table bgcolor="#000000" cellpadding="2px"><tr><td bgcolor="#ffffff">THIS IS USING CELLSPACING AND BGCOLOR</td></tr></table>

As you can see, i kept the basic table layout, but i added cell spacing which puts a space around ALL of the cells (or <td> tags). Then you add a background color to the entire table, and a different background color to the table cells, or <td> tags

if your tables seem broken, or are not showing/working. Always check the following.
You closed out ALL of yor tags. You can simply just count the number of open tags and closed tags and they should be equal.
Make sure that always but the closing </td> before the </tr>
Make sure that you are not missing any ‘>’ or ‘<'

The next tutorial will be more advanced tables using column spans and row spans and such.

---

Want to know who is offering this awesome content? Here it is! Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago. Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade. I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!! Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author

---

Tags: L

This entry was posted on Sunday, February 22nd, 2009 at 10:45 pm and is filed under How-To, Web Design, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.