Data Network Resource
       Earn on the Web


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 http://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.


Valid HTML 4.01 Transitional




Utility Warehouse     Earn on the Web     Free book on how to make money    


All rights reserved. All trademarks, logos, and copyrights are property of their respective owners.