Using Tables: Lesson 3 - Spacing and Alignment
Ligning up
As with just about everything else on your Web page, you can align tables.
Simple use the ALIGN= with either LEFT (default, usually), RIGHT or CENTER
to place your table where you want it to go. Eg. <TABLE BORDER=5 ALIGN=CENTER>.
Padding things out
Another useful element of tables is that you can specify the amount of
space in and between individual cells within your tables using three tags.
The first of these is the CELLSPACING= value, which determines how many
pixels are included between each cell. Similarly, you can determine a
default margin around any text or images within a cell by using the CELLPADDING=
tag. Finally, if you want to maintain a certain size for your cells, regardless
of what is contained within them, use the WIDTH= tag. This can be used
in two ways, either to provide a fixed value in terms of pixels or a percentage
of the screen, for example WIDTH=25 would be a cell 25 pixels wide, but
WIDTH=25% would be a quarter of the browser window.
All these tags are used with the TABLE element, for example, <TABLE
BORDER=5 CELLPADDING=5 CELLSPACING=5 WIDTH=25% ALIGN=CENTER>.
Exercise
<HTML>
<HEAD>
<TITLE>Tables - More basic tables</TITLE>
</HEAD>
<BODY BGCOLOR=White>
<H3>Padding out your cells</H3>
Here is a left hand table with minimal padding and spacing:<P>
<TABLE BORDER=2 CELLPADDING=2 CELLSPACING=2 WIDTH=40%>
<TR>
<TD>ONE</TD>
<TD>TWO</TD>
<TD>THREE</TD>
</TR>
<TR>
<TD>FOUR</TD>
<TD>FIVE</TD>
<TD>SIX</TD>
</TR>
</TABLE>
<P>Now on the right with more generous spacing:<P>
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10 WIDTH=60% ALIGN=RIGHT>
<TR>
<TD>ONE</TD>
<TD>TWO</TD>
<TD>THREE</TD>
</TR>
<TR>
<TD>FOUR</TD>
<TD>FIVE</TD>
<TD>SIX</TD>
</TR>
</TABLE>
<P>
<P>
<P>
<P>
<P>The same table centred, with no border:<P>
<CENTER>
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=10 WIDTH=60%>
<TR>
<TD>ONE</TD>
<TD>TWO</TD>
<TD>THREE</TD>
</TR>
<TR>
<TD>FOUR</TD>
<TD>FIVE</TD>
<TD>SIX</TD>
</TR>
</CENTER>
</TABLE>
</TABLE>
</BODY>
</HTML>
To see how your first Web page should look, click here.
When you've finished, click on the Back button at the top of your browser
to return to this page.
Troubleshooting
I cannot align the tables properly - lines of text keep breaking them
up: To show how different alignments work on one page, I've had to
cheat slightly. Notice the lines containing - this is the HTML
code to insert a space. As the <P> tag inserts only one paragraph
break, no matter how many times you repeat it, you need to give the <P>
someting to attach to, and the simplest thing is to insert a space.
Spacing is not right within the tables: Make sure that you have
included all the tags - CELLSPACING, CELLPADDING and WIDTH.
|
