Web Tutor - Tables

	Sign In Sign-Up

HTML Studio's

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Table Tutor - Lesson 2

Ok, what we've got is this...

<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

...which gives us this:

First lets make it look more like a table and give it a border. Every time you make a change and want to see how it looks, you can hit the Reload (or Refresh) button on your browser. Every so often, a change you've made doesn't seem to "stick". In that case, hold the SHIFT button and hit Reload.

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

How about a bigger border?

<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

How about a HUGE border?

<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

How about NO border?

<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

As you can see, the default is (usually) no border.

Let's stick with a modest border for now.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

When no sizes are specified the table is only as big as it needs to be.

<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Specifying a table size is pretty simple though.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

How about this?

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Let's get rid of Ed's friends for now.

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Let's reduce the table size to 50% of the browser window.

<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Now we will specify a width of 50 instead of 50%.

<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Now 100.

<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

As you can see there are two ways to specify table width. Each style has its uses. Which style to use for what is unimportant now.

We can also mess around with the height.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

I'm reminded of something Steven Wright said...

"The other day, I was walking my dog around my building...on the ledge. Some people are afraid of heights. Not me, I'm afraid of widths."

Note - Controlling a table's height is fairly simple. Controlling the height of individual cells in the table is a little unreliable, especially across different browsers.

We can control where in the cell the data will appear.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="center">Ed</TD>
</TR>
</TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="right">Ed</TD>
</TR>
</TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left">Ed</TD>
</TR>
</TABLE>

As you can see, the default value is (usually) ALIGN="left". You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.

We can also control where data will appear vertically in a cell.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="top">Ed</TD>
</TR>
</TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="bottom">Ed</TD>
</TR>
</TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle">Ed</TD>
</TR>
</TABLE>

Default is usually middle.

I will take a second now to show you something else. Images can also be used and manipulated in a table data cell. Take Ed here*, and save him to the folder you are working out of (the one where you put tables1.html). Then substitute an <IMG> tag for Ed.

* To save an image off of a web page, right click on it and choose Save Image As (or something similar).

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle"><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"></TD>
</TR>
</TABLE>

I suppose that now is also a good time to stress that it is good practice to include size attributes with all your image tags. When your browser knows in advance how big your image is going to be, it loads the page faster.

< Back Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page