6. Tables
6.1 Basic Table Structure
I think the best thing is for you to look at the HTML text required
to create a basic table:
<CENTER>
<TABLE>
<TR>
<TH>Baud Rate</TH>
<TD>9600</TD>
</TR>
<TR>
<TH>Data Bits</TH>
<TD>8</TD>
</TR>
<TR>
<TH>Stop Bits</TH>
<TD>1</TD>
</TR>
<TR>
<TH>Parity</TH>
<TD>none</TD>
</TR>
<TR>
<TH>Flow Control</TH>
<TD>Xon/Xoff</TD>
</TR>
</TABLE>
</CENTER>
Gives us this:
In between the <TABLE> tags there are the <TR>, </TR> tag pair which
denote the Table Row containing the Table Data, which is contained within the tag
pair <TD> and </TD>. You will notice that each row happens
to have two cells, this does not have to be the case, you can define what you want,
even having different numbers of cells per row. If you want to have headings within your table,
then you can use the <TH> and </TH> tag pair in place of
<TD> and </TD>. You can see that we have done that in the above example
and it has resulted in the headings being shown in bold text. Apart from being good practice, closing
the cell tags with </TD> or </TH> prevents spurious spaces that may occur
when the table is displayed.
6.2 Customising Tables
You can give the table a plush feel to it by including a BORDER attribute within the
Table tags. BORDER can be assigned a value determining the thickness of the lines around
each cell and the table itself. The default thickness is 1 pixel. Using a BORDER
value of 0 removes the border altogether.
The CELLSPACING attribute determines the amount of space
between each cell in the table, whilst the CELLPADDING attribute gives the amount of space
between the cell wall and its contents. The default size for the table is as large as it
needs to be, however, you can limit the size by defining a width using the WIDTH attribute. The
percentage value or the number of pixels that you insert here is the percentage
or fixed width of the screen page that you wish the table
to take up.
Take a look at the following to see the effect of these commands on the above table:
<CENTER>
<TABLE BORDER="12" CELLSPACING="8" CELLPADDING="3" WIDTH=40%>
<TR>
<TH>Baud Rate</TH>
<TD>9600</TD>
</TR>
<TR>
<TH>Data Bits</TH>
<TD>8</TD>
</TR>
<TR>
<TH>Stop Bits</TH>
<TD>1</TD>
</TR>
<TR>
<TH>Parity</TH>
<TD>none</TD>
</TR>
<TR>
<TH>Flow Control</TH>
<TD>Xon/Xoff</TD>
</TR>
</TABLE>
</CENTER>
Results in this:
Notice how the border is bevelled and if you resize your browser window, the table changes size to keep to the 40%
that was specified. The width adjustment is restricted by the cell contents so there is a minimum size to which you
can reduce the table.
Making just a few changes to the table parameters, as shown next:
<CENTER>
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="12" WIDTH=90%>
<TR>
<TH>Baud Rate</TH>
<TD>9600</TD>
</TR>
<TR>
<TH>Data Bits</TH>
<TD>8</TD>
</TR>
<TR>
<TH>Stop Bits</TH>
<TD>1</TD>
</TR>
<TR>
<TH>Parity</TH>
<TD>none</TD>
</TR>
<TR>
<TH>Flow Control</TH>
<TD>Xon/Xoff</TD>
</TR>
</TABLE>
</CENTER>
Gives the following table:
Big difference! The browser screen is the same size, however the table is allowed to take up
90% of the width, plus the border has been reduced to '1' and the cellspaceing much less whereas
the cellpadding has increased.
6.3 Controlling The Cell Contents
Some more bits that you can do with tables is to align cell contents on a row by way of the ALIGN
and VALIGN (Vertical align) commands. ALIGN can use the keywords LEFT, RIGHT or CENTER
when applied tables; whilst
VALIGN can use the words TOP, BOTTOM, MIDDLE or BASELINE in tables.
Examine the following simple table:
<CENTER>
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="6" WIDTH=50%>
<TR ALIGN=RIGHT VALIGN=BOTTOM>
<TD>Stuff in this row is sitting on the bottom, plus it
is on the right.</TD>
<TD>Like me!</TD>
<TD>And me!</TD>
</TR>
<TR ALIGN=CENTER VALIGN=BASELINE>
<TD>The stuff on this row is centred and is aligned to the
baseline</TD>
<TD>Like me!</TD>
<TD>And me!</TD>
</TR>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD>This row is supposed to be aligned to the right, apart from ME!</TD>
<TD>I'm OK!</TD>
<TD>So I am I!</TD>
</TR>
</TABLE>
</CENTER>
Results in this:
On closer inspection, you can see that on the third row I have inserted an ALIGN=LEFT
command in one of the cells. This particular cell is now ignoring the alignment
commands for the row. Endless possibilities spring to mind. But hang on!
There's more! See if you can see what's happening here!
<CENTER>
<TABLE BORDER="6" CELLSPACING="2" CELLPADDING="6" BGCOLOR="#00DDDD"
BORDERCOLOR="#2377BB" BORDERCOLORLIGHT="#00FFFF" BORDERCOLORDARK="#222222">
<TR>
<TD ROWSPAN="3">This is spanning all three rows</TD>
<TD COLSPAN="3">I'm spanning three columns</TD>
</TR>
<TR BGCOLOR="#FFFF00">
<TD>Data</TD>
<TD>Boring old data</TD>
<TD><IMG SRC="images/star.gif"></TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Red data</TD>
<TD BACKGROUND="images/star.gif">More data</TD>
<TD>The last of the data!</TD>
</TR>
</TABLE>
</CENTER>
Which gives this:
This is starting to look a little complicated, but bear with it. We have just
added some BORDERCOLOR attributes to the table as a whole using the same numbering system
that we encountered earlier on. We are able to adjust the bevelled 3-D look using the
BORDERCOLORLIGHT and BORDERCOLORDARK attributes.
In addition, we have used the BGCOLOR command to add
colour to whole rows as well as to individual cells. What is more, we have incorporated
a background graphic for a couple of the cells. In one of the cells the graphic is an element in its
own right (using the <IMG SRC> tag), and in the other cell, the graphic is used
just as a back drop to the text. This is achieved using the BACKGROUND attribute.
The <CAPTION> and </CAPTION> tag pair allows you to add a caption to a table
either at the top of the table (which is the default), or at the foot of the table. The following
example shows a caption being added to the foot of the 'colourful' table that we have just been looking at:
<CENTER>
<TABLE BORDER="6" CELLSPACING="2" CELLPADDING="6" BGCOLOR="#00DDDD"
BORDERCOLOR="#2377BB" BORDERCOLORLIGHT="#00FFFF" BORDERCOLORDARK="#222222">
<CAPTION ALIGN="BOTTOM">The Colourful Table</CAPTION>
<TR>
<TD ROWSPAN="3">This is spanning all three rows</TD>
<TD COLSPAN="3">I'm spanning three columns</TD>
</TR>
<TR BGCOLOR="#FFFF00">
<TD>Data</TD>
<TD>Boring old data</TD>
<TD><IMG SRC="images/star.gif"></TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Red data</TD>
<TD BACKGROUND="images/star.gif">More data</TD>
<TD>The last of the data!</TD>
</TR>
</TABLE>
</CENTER>
This results in the following display:
Note that the Caption tags sit within the Table tags.
Tables really come into their own when it comes to laying out Web pages. You can
use colour to produce thin coloured lines to divide pages, you can 'nest' another table
within a table, you can have links within cells and have text surrounding pictures
so getting around the standard HTML restrictions that we have so far encountered. Many
web sites use nested tables, although you would not realise it, the borders are switched off so
that you cannot see the outlines of the cells. The normal way of working is to create
a Master Table, and then fit your nested tables within it.
Consider the following
more complex example of tables being nested within tables. I know that it is a long
piece of code so I have put comments in that describe the site structure to help you follow it:
<!-- Start of Table 1 -->
<CENTER>
<TABLE BACKGROUND="images/chrchbak.jpg" BGCOLOR="#8A91BC"
BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="760">
<TR>
<!-- First Column spacer -->
<TD WIDTH="10" HEIGHT="600" ROWSPAN=2></TD>
<TD WIDTH="740" HEIGHT="600">
<!-- Start of Table 2 -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
WIDTH=740>
<!-- Main Title blocks -->
<TR>
<TD WIDTH="250" HEIGHT="285"></TD>
<TD WIDTH="490" HEIGHT="285"><IMG SRC="images/knl.gif"
ALT="Kingston Near Lewes"></TD>
</TR>
<!-- Row spacer -->
<TR>
<TD WIDTH="740" HEIGHT="10" COLSPAN=2></TD>
</TR>
<!-- Top Button table -->
<TR>
<TD WIDTH="740" HEIGHT="180" COLSPAN=2>
<!-- Start of Table 3 -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
WIDTH="740">
<!-- 1st Row of buttons (Currently spare) -->
<TR>
<TD WIDTH="240" HEIGHT="50"></TD>
<TD WIDTH="10" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50"></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50"></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
</TR>
<!-- Row spacer -->
<TR>
<TD WIDTH="740" HEIGHT="10" COLSPAN=6></TD>
</TR>
<!-- 2nd Row of buttons (Currently spare) -->
<TR>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/intro_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Introduction to the Website"></A></TD>
<TD WIDTH="10" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/links_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Useful Links"></A></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50"></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
</TR>
<!-- Row spacer -->
<TR>
<TD WIDTH="740" HEIGHT="10" COLSPAN="6"></TD>
</TR>
<!-- 3rd Row of buttons -->
<TR>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/hist_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="History of Kingston"></A></TD>
<TD WIDTH="10" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/vill_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="The villagers of Kingston"></A></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50"></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
</TR>
<!-- Row spacer -->
<TR>
<TD WIDTH="740" HEIGHT="10" COLSPAN="6"></TD>
</TR>
<!-- End of Table 3 -->
</TABLE></TD>
</TR>
<TR>
<!-- Rows 4,5 and Help -->
<TD WIDTH="740" HEIGHT="110" COLSPAN=2>
<!-- Start of Table 4 -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
WIDTH="740">
<!-- Rows 4 and 5 -->
<TR>
<TD WIDTH="640" HEIGHT="110">
<!-- Start of Table 5 -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
WIDTH="640">
<!-- 4th Row of buttons -->
<TR>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/out_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Out and About Kingston"></A></TD>
<TD WIDTH="10" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/green_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Being Green in Kingston"></A></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
<TD WIDTH="145" HEIGHT="50"></TD>
</TR>
<!-- Row spacer -->
<TR>
<TD WIDTH="640" HEIGHT="10" COLSPAN="5"></TD>
</TR>
<!-- 5th Row of buttons -->
<TR>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/ev_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Up and coming Events"></A></TD>
<TD WIDTH="10" HEIGHT="50"></TD>
<TD WIDTH="240" HEIGHT="50">
<IMG SRC="images/news_t.gif" BORDER="0" WIDTH="240"
HEIGHT="50"
ALT="Local News"></A></TD>
<TD WIDTH="5" HEIGHT="50"></TD>
<TD WIDTH="145" HEIGHT="50"></TD>
</TR>
<!-- End of Table 5 -->
</TABLE></TD>
<!-- Help -->
<TD WIDTH="100" HEIGHT="110">
<IMG SRC="images/quest.gif" BORDER="0" WIDTH="100"
HEIGHT="110"
ALT="Click here for help on navigating the
site"></A></TD>
</TR>
<!-- End of Table 4 -->
</TABLE>
</TR>
<!-- Last Row -->
<TR>
<TD WIDTH="740" HEIGHT="15" COLSPAN="6"></TD>
</TR>
<!-- End of Table 2 -->
</TABLE></TD>
<!-- End Column spacer -->
<TD WIDTH="10" HEIGHT="600" ROWSPAN="2">
</TR>
<!-- End of Table 1 -->
</TABLE>
</CENTER>
Now click on Nesting Tables to see the result. This is actually used on my village
website, so if you wish to see the operational version of this page plus others then click on
https://www.kingstonvillage.org/.
As you can see, I have indented the HTML code to separate out the tables, for instance 'Table 3'
which contains some of the buttons, is nested within a data element of 'Table 2'. 'Table 4'
is also nested within 'Table 2' and 'Table 5' is nested within 'Table 4'. When the code becomes
this intricate, it is often helpful to just temporarily switch on a border for the table elements.
This then gives you thin outlines that give you a better picture of how the table is shaping up.
You can then turn off the borders (set them to 0) once you are happy.
|
