TABLES

Tables. "What are they", you ask?
Tables are perhaps the easiest way of laying out content on a page. Tables are cross-platform and cross-browser and used virtually everywhere. They can be a little tricky at first but once you get the hang of them you'll wonder how you ever did anything with out them. So let's dive in shall we?

First, here is a basic table.

Cell 1	Cell 2
Cell 3	Cell 4

And the code for that:

<TABLE>
	<TR>
		<TD> Cell 1</TD>
		<TD> Cell 2</TD>

	</TR>
	<TR>
		<TD> Cell 3</TD>
		<TD> Cell 4</TD>

	</TR>
</TABLE>

Lets break that down shall we?
As you can see, the first line is the <TABLE> tag. This starts the table like most HTML this tag has a matching closing tag </TABLE>. In this case I added a line that says BORDER=1. What that does is actually add TWO borders. There is one that wraps around the whole table, and one around each individual cell. I used a size of "1" but you can make this as big as you want

The next tag there is the <TR> tag. This is the Table Row tag. it tells you that we are starting a new row. Rows are just that, Vertical areas that span the table (with exceptions, we will get there later). However you don't put content inside Rows. You put content inside <TD>s.

<TD>s are table cells. They are basically columns. So in this example, I have 2 rows, and each row contains 2 cells. If I want to make my two rows, three table cells wide it would look like this:

<TABLE BORDER=1>
	<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>

		<TD>xxxxxx</TD>
	</TR>
	<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>

		<TD>xxxxxx</TD>
	</TR>
	<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>

		<TD>xxxxxx</TD>
	</TR>
</TABLE>

and it would look like this:

xxxxxx	xxxxxx	xxxxxx
xxxxxx	xxxxxx	xxxxxx
xxxxxx	xxxxxx	xxxxxx

Simple right?
NOTE: Opening <TABLE>, <TR>, <TD> tags need their corresponding closing </TABLE>, </TR>, </TD> tags. Failing to close a tag will be your biggest problem with tables (especially in NN) I recommend as soon as you open a tag, close it, and then place your content inside the tags.

You won't, I know but don't say I didn't warn you.

Say you don't want the border around your table? no prob, set the border to zero (BORDER=0) and it's gone. It is always a good idea to set your border attribute either to a width or zero, for cross-browser compatibility.
Besides BORDER there are a couple of other basic attributes that you can use for the TABLE tag. The main ones are CELLPADDING and CELLSPACING these are two similar yet very different attributes.

CELLPADDING places space within the TD's keeping content off of the cell walls.

x x x x x x x x x x x x x x x x x x x x x x x x	x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x	x x x x x x x x x x x x x x x x x x x x x x x x

CELLSPACING actually places space between the table cells.

x x x x x x x x x x x x x x x x x x x x x x x x	x x x x x x x x x x x x x x x x x x x x x x x x
x x x x x x x x x x x x x x x x x x x x x x x x	x x x x x x x x x x x x x x x x x x x x x x x x

So far so good? Okay now you know how to create your basic table. But we are still a bit limited. I mean right now we can layout a simple grid, but what if we want to have a title that spans the whole table?

Before we get into that lets try something. Say you only want one Cell in the first row and 2 cells in all the rest. You may have tried something like this:

<TABLE BORDER=1>
	<TR>
		<TD>xx</TD>

	</TR>
	<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>
	</TR>

		<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>
	</TR>
</TABLE>

Unfortunately what we get from that is this:

xx
xxxxxx	xxxxxx
xxxxxx	xxxxxx

Where as you can see by the border the first cell of the first row is the same size as the first cell of the second row.

What if the first cell is bigger than the second?

xxxxxxxxxxxxxxxxxxxx
xxxxxx	xxxxxx
xxxxxx	xxxxxx

Either way the first cell of each row corresponds to the whole column. The first cell is the same width all the way across the board.

However there is a solution, the COLSPAN and ROWSPAN tags.

These tags allow a cell to span the width/height of a column/row. The COLSPAN tag allows you to have a column that spans the width of the columns above or below it. You place this tag in the column that you want to span. It works by setting it to the number of columns you want it to span. In this example I set the COLSPAN attribute to 2 (<TD COLSPAN=2>).

xxxxxxxxxxxxxxxxxxxx
xxxxxx	xxxxxx
xxxxxx	xxxxxx

Code:

<TABLE BORDER=1>
	<TR>
		<TD COLSPAN=2>xxxxxxxxxxxxxxxxxxxx</TD>

	</TR>
	<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD> 

	</TR>

		<TR>
		<TD>xxxxxx</TD>
		<TD>xxxxxx</TD>

	</TR>

</TABLE>

Similarly the ROWSPAN tag is also set in the <TD> tag. It tells the COLUMN how many ROWS to span. in this example ROWSPAN=3.

xxxxxx
	xxxxxx
	xxxxxx

The code for that looks like this:

<TABLE BORDER=1>
	<TR>
		<TD ROWSPAN=3>xxxxxx</TD>
	</TR>

	<TR>
		<TD>xxxxxx</TD>
	</TR>
	<TR>
		<TD>xxxxxx</TD>

	</TR>
</TABLE>

Notice that this case I have 3 but it only spans 2 Rows. The reason is that the ROWSPAN includes the row it is in. so to get it to span the 2 beneath it you need a ROWSPAN of 3.

You can easily combine these tags to get more complicated layouts like this

xxxxxx
	xxxxxx
	xxxxxx
xxxxxxxxxxxx

That code looked like this:

<TABLE BORDER=1>
	<TR>
		<TD ROWSPAN=3>xxxxxx</TD>
	</TR>
	<TR>
		<TD>xxxxxx</TD>

	</TR>
	<TR>
		<TD>xxxxxx</TD>
	</TR>
	<TR>

		<TD COLSPAN=2>xxxxxx</TD>

	</TR>
</TABLE>

So we've covered the basics of tables. Really from here you should have a good idea of how to layout content on your page utilizing tables. A bit about how I do things. 90% of the time My table tags set the border, cellpadding and cellspacing to 0 in the opening table tags. this gives me the maximum control cross browser. I'll use blank cells for margins and what not. In the next lesson I'll go into some of the more advanced formatting tags you can use to give you greater control.

LESSON 2

Now, we've got our basic table covered in Lesson 1 So now it's time to get a little more control of our table. HEIGHT and WIDTH seems pretty simple right off the bat however there are few tricks to getting everything working properly.

Assigning these attributes is easy. It looks almost identical to adding the HEIGHT and WIDTH to an image tag.<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 HEIGHT=100 WIDTH=100>

Like most attributes in HTML the default unit of measurement is in pixels. The other commonly used way to define table/table cell size is in percentages. When percentages are used the percentage is in relation to the tables "parent" element. One other thing to note is the phony "Content" if you are trying this on your own, make sure to put something in your table cells to make this all work. (a letter "X" is fine) all go into why more later. Here is an example in pixels:

Content

code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=100 WIDTH=100>
	<TR>
		<TD> Content </TD>

	</TR>
</TABLE>

and here is a percentage based example since the size is relative to it's parent, the percentages are according to the table in which this tutorial is placed if it wasn't in a table it would be based on the width of the browser:

Content

and the code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=10% WIDTH=50%>
	<TR>
		<TD> Content </TD>

	</TR>
</TABLE>

Adding the height and width properties to the <TD> tag uses the same format (what about the TR tag? this tag is almost never modified).<TD HEIGHT=100 WIDTH=100> Here is an example of a table using the height and width properties of the <TD> tags.

Content	Content
Content	Content

Okay now take a look at the code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1>

	<TR>
		<TD WIDTH=100> Content </TD>
		<TD HEIGHT=100> Content </TD>
	</TR>

	<TR>
		<TD HEIGHT=100> Content </TD>
		<TD WIDTH=100> Content </TD>
	</TR>

</TABLE>

Now you may be looking at this and scratching your head a bit. It appears that there are only HEIGHT and WIDTH attributes for half of the cells. This is one of the limitations of Tables. think of tables as a grid:

	Col 1	Col 2	Col 3
Row 1
Row 2
Row 3

Now for any given column there is only 1 width. So if any of the cells is set to a width, all the cells are that width. Also, the width will be either the widest width, or if there is content in the column the width will be the width of the column with the widest content. If the width is set, say to 100 pixels, and you out something in there that is wider than 100 pixels, say a GIF 120px wide, than the width of that cell will expand to 120.

Rows work the same way, only instead of width it is the height attribute. Again all cells in a row will be the same height. All of them. What Height? That's right, the height of the tallest cell in the row.

Confused yet?
Here is an example of our grid from above with some heights and widths set:

Col 1 Col 2 Col 3

Row 1

Row 2

Row 3

and the code:

<TABLE CELLPADDING=2 CELLSPACING=0 BORDER=1>
	<TR>                                   
		<TD> </TD>
		<TD WIDTH=100>Col 1</TD>

		<TD WIDTH=50>Col 2</TD>
		<TD WIDTH=75>Col 3</TD>
	
	</TR>
	<TR> 
		<TD HEIGHT=35>Row 1</TD>

		<TD> </TD>
		<TD> </TD>
		<TD> </TD>
	</TR>
	<TR> 
		<TD>Row 2</TD>

		<TD> </TD>
		<TD> </TD>
		<TD> </TD>
	</TR>
	<TR> 
		<TD HEIGHT=70>Row 3</TD>

		<TD HEIGHT=35> </TD>
		<TD> </TD>
		<TD> </TD>
	</TR>
</TABLE>

Okay now lets break it down. In the first row the height of the first cell is set to 35. It is the only cell in the row with a height set. So here we see that all of the cells have a height of 35 even though none of the others in this row have a height set.

Now you can see that for the numbered columns in the first row I set a width. The first is 100, the second is 50 and the last is 75. Again, even though I set the width only for the first cell in the column all of the cells.

In the third row, things get a little tricky. In this row I set 2 Heights. The first cell is 70 and the second cell is 35. However the whole row is only one height, 70px. I did this to reiterate a point. For both heights and widths, A row can only have 1 height. If more than one is set than it will be the highest one. For columns, there can only be one width, the widest.

At this point It is time to get out the old text editor (Notepad is fine though I like Ultra Edit or BBEdit for the Mac) and start writing some code. Play with the Height and Width attributes. Put things in the cells. I use text here but a lot of the time it is images so try it, see what happens and when you are all done go on to Lesson 3!

LESSON 3

Okay, this lesson is the one I never got when I first started learning HTML and playing with tables, but it may be the most helpful. If you spent some time playing with tables and their Height and Width properties, you may have found out a few things. For example, look at this table and it's following code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1>
	<TR>
		<TD WIDTH=10 HEIGHT=50></TD>
		<TD WIDTH=10></TD>
		<TD WIDTH=10></TD>

	</TR>
</TABLE>

Wait! Where are my borders? I put them in but they are not showing up!. Yup. Since we did not add anything into these cells, as far as the border attribute goes, they do not exist. In some situations not putting anything in the cell can cause them to collapse (not show at all). So you should always put something in your tables. A space is a good idea if you want a blank table cell. Simply putting a space between the opening and closing tags is not enough however.(<TD> <TD>) instead you need to use the ASCII shortcut code for the space ( ) so it would look like this: <TD>nbsp;<TD>.

Now we get tricky. What if you want to create something that looks like this:

Well, this allows us to introduce one new table modifier, the BGCOLOR tag. Just like the background of the page, you can put a background color in either the </TABLE> or the <TD> tags. What about both? Well that's fine too. The color defined in the TD tag will be the dominant color and the color of the TABLE will show in cells where there is no color set. Here is a sample where the BGCOLOR of the Table is set to white (#FFFFFF) and the cells are set to red (#CC0000).

That code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>

	<TR>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>

	</TR>
	<TR>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>

		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
	</TR>
	<TR>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>

		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>
	</TR>
	<TR>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>

		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#CC0000"> </TD>
		<TD WIDTH=25 HEIGHT=25 BGCOLOR="#FFFFFF"> </TD>
	</TR>
</TABLE>

Now at this point you may be asking, "if I can use a background color, what about a background image?", well yup you betcha. You can use a background image as well in both table cells and tables. However there are some limitations to this as well as some tricks. I'm going to cover that in a later lesson.

The last thing on widths is the NOWRAP modifier. Take a look at these two tables.

"Work is the curse of the drinking class."
- Oscar Wilde

And the code for the two:

<TABLE CELLSPACING=0 BORDER=1 WIDTH=150>
	<TR>
		<TD>"Work is the curse of the drinking class."<br> - Oscar Wilde
		</TD>
	<TR>
</TABLE>

<TABLE CELLSPACING=0 BORDER=1 WIDTH=150>
	<TR>
		<TD NOWRAP>"Work is the curse of the drinking class."<br> - Oscar Wilde
		</TD>
	<TR>

</TABLE>

The first shows what happens normally, the text will wrap to the size of the table cell.

The second shows the NOWRAP's effects. The text doesn't wrap, so since the text is longer than the cell, the cell expands to the width of the text.

So we have learned a few more ways of manipulating our tables. So hang in with me here, there is one more "basic" lesson before we get into the real power uses for tables.

Yee Haa we want more. Lets go on to Lesson 4!

LESSON 4

Check it out:

Jehanzeb.tk is Good

Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good

Pretty cool huh? This is one of the real-world uses of tables. In the publishing industry it is what is called a "pull-quote" Here is the code:

<TABLE CELLSPACING=0 CELLPADDING=5 BORDER=0 align=right WIDTH=100 HEIGHT=100>
	<TR>
		<TD><FONT SIZE="5"><b>Jehanzeb.tk is Good</b></font></TD>
	</TR>

</TABLE>
Jehanzeb.tk is good Jehanzeb.tk is good Jehanzeb.tk is good is go....

You get the idea
The only thing new here is the "align" tag used in the <TABLE> tag. The TABLE align tag has three main settings. left center and right. Right as you can see from this example pushes the table to the right. Left (which is the default setting and therefore rarely used) pushes the table to the left. Center would place the table in the center of the page.

Pretty easy eh? Now for something completely different!

The TD tags treat the align tag differently than the TABLE tag. Instead of refrencing the cell itself, the align tags refers to the content inside the cell. So where if we put align=center in the TABLE tag, the whole table moves to the middle, if we use this in a TD tag, all the stuff in the cell gets aligned in the middle. Here is an example:

Jehanzeb is good. Yes sir I like Jehanzeb uh huh. Jehanzeb is Awesome.

code:

<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=1 WIDTH="45%" ALIGN=CENTER>
	<TR>
		<TD ALIGN=CENTER>Jehanzeb is good. Ye...</TD>

	</TR>
</TABLE>

As you can see the align tag in the TD centers all the text etc. it would be the same as surrounding the text inside the cell with <CENTER> tags. Again left is the default, and right would right-align the text (and images if that's what is in there).

The other tag for cells is the VALIGN tag. Here take a look:

hmm this must be the code:

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=1 HEIGHT=100 WIDTH=100 ALIGN=CENTER>
	<TR>
		<TD ALIGN=RIGHT VALIGN=BOTTOM>x</TD>

	</TR>
</TABLE>

For this example I added the VALIGN (vertical Align) tag. This allows me to align content vertically. The three main tags for this are TOP, MIDDLE and BOTTOM. In this case I used ALIGN=RIGHT and VALIGN=BOTTOM to place the content in the bottom right.

Pretty easy eh?

Well that is pretty much it for the basics of tables. There are other tags and ways of modifying them however these are the ones used 90% of the time. So by now you should have all the tools you need now we just need to see some real uses of tables.

Hosted by www.Geocities.ws