Computing index HTML GUIDE
PAGE 7

TOC <- -> Ind

Tags covered on this page
<DD> <DL> <DT> <LH> <LI>
<OL> <TABLE> <TD> <TR> <UL>





LISTS AND TABLES

We now come to two very handy text-formatting techniques in HTML.
Lists and tables are quick and easy ways of making the information on your page stand out, allowing you to struture your text and making it easier to read and understand.

The first two sorts of lists we will meet are ordered and un-ordered lists,
for which the tags are <OL> and <UL> respectively.
Again, these are container tags, anything placed between the list tag and its cancellation tag is considered to be part of the list.
<OL> .. ordered list of items .. </OL>
<UL> .. un-ordered list of items .. </UL>

The difference between an ordered and an un-ordered list is very subtle.
The items in an ordered list are numbered, while those in an un-ordered list are merely preceeded by a bullet hole.
To enter an item into a list, insert the <LI> tag before it.

An example of each type of list is given below.

<HTML>

<HEAD>
<TITLE>
Simple lists example
</TITLE>
</HEAD>

<BODY>

An ordered list
<OL>
<LI> Item one
<LI> Item two
<LI> Item three
</OL>
<P>
An un-ordered list
<UL> An item
<LI> Another item
<LI> Yet another item
<LI>
</UL>

</BODY>

</HTML>

An ordered list
  1. Item one
  2. Item two
  3. Item three

An un-ordered list

  • An item
  • Another item
  • Yet another item


For complex topics you can insert sub lists.
For each sub-list you insert, the list inside is indented further into the page, and, in the case of the un-ordered list, the bullet hole changes shape.

<HTML>

<HEAD>
<TITLE>
Multiple lists example
</TITLE>
</HEAD>

<BODY>


<OL>
<LI>Chapter 1
<LI>Chapter 2
<OL>
<LI>Section 2.1
<LI>Section 2.2
<LI>Section 2.3
</OL>
<LI>Chapter 3
<OL>
<LI>Section 3.1
<LI>Section 3.2
<OL>
<LI>Paragraph 3.2.1
<LI>Paragraph 3.2.2
</OL>
<LI>Section 3.3
</OL>
<LI>Chapter 4
</OL>
<P>
<UL>
<LI>A train
<LI>Another train
<UL>
<LI>Coach 1
<LI>Coach 2
<LI>Coach 3
</UL>
<LI>One more train
<UL>
<LI>Coach 1
<LI>Coach 2
<UL>
<LI>Seat 1
<LI>Seat 2
</UL>
<LI>Coach 3
</UL>
<LI>Yet another train
</UL>

</BODY>

</HTML>

  1. Chapter 1
  2. Chapter 2
    1. Section 2.1
    2. Section 2.2
    3. Section 2.3
  3. Chapter 3
    1. Section 3.1
    2. Section 3.2
      1. Paragraph 3.2.1
      2. Paragraph 3.2.2
    3. Section 3.3
  4. Chapter 4

  • A train
  • Another train
    • Coach 1
    • Coach 2
    • Coach 3
  • One more train
    • Coach 1
    • Coach 2
      • Seat 1
      • Seat 2
    • Coach 3
  • Yet another train


One final point before we move on to the third and final type of list, is that we can introduce a List Heading via the <LH> tag.
This tag is to be placed immediately after the initial list tag, before and <LI> item tags.
Like most tags it is a container, and you can see it in action by viewing Example File 5 on the examples page.


So, finally we come to the Definition List, inserted, like the
ordered and un-ordered lists, by the code...
<DL> .. list of definitions .. </DL>
Differing to the other types of list, a definition list does not contain items. So the <LI> tag is obselete.
Instead, the list is filled by Definition Terms <DT> and Definition Descriptions <DD>.

An example of how these are used is shown below.

<HTML>

<HEAD>
<TITLE>
Definition list example
</TITLE>
</HEAD>

<BODY>

A list of definitions
<DL>
<DT> HTML
<DD>Acronym - HyperText Markup Language - language for formatting files on the internet.
<DT> Guide
<DD>Book of instruction or information.
</DL>

</BODY>

</HTML>

A list of definitions
HTML
Acronym - HyperText Markup Language - language for formatting files on the internet.
Guide
Book of instruction or information.


Tables are an essential way of formatting text on screen. They give you the opportunity to control the text flow in so many different ways than to the usual left alignment and center alignment.


<TABLE>

To begin with, you need to define the BORDER size for a table.
The default border size is zero, so without specifying a border you will not see the edges of the table you create (often an invisible table looks very effective).

<TABLE BORDER=2>
Small border

<TABLE BORDER=8>
Large border

The next thing to do is to specify the tables size, by its WIDTH and its HEIGHT.
Without these values the table will shrink down to the smallest size possible with the text inside it (as seen in the two examples above).

<TABLE WIDTH=400 HEIGHT=50 BORDER=3>
Table size in pixels

<TABLE WIDTH=75% HEIGHT=50 BORDER=3>
Table width by screen
size percentage

An interesting thing with tables is to change the background colour within them.
This is done using one of the two colouring systems, and uses the BGCOLOR attribute.

<TABLE WIDTH=75% HEIGHT=50 BORDER=3 BGCOLOR="#50D0FF">
Table a with light blue background

The final thing to note about the TABLE tag is the ALIGNment attribute.
Using this you can align sections of text or pictures to either side of the screen and then continue to write text down the page.
Alignment is either LEFT, RIGHT or CENTER.

<TABLE WIDTH=50% HEIGHT=50 BGCOLOR="#50D0FF" ALIGN=RIGHT>
An aside.

The main section of text continues to flow around the table situated on the right hand side of the browser window.



The last two tags on this page are the <TR> and <TD> tags.

These are just, if not more, important than the TABLE tag, since without these inserted within your table, the contents of the table will not be shown on screen!

Firstly, the <TR> tag informs the browser to insert a row into your table.
Rows are helpful in breaking up your table into several parts.

Secondly we have the <TD> tag. This stands for Table Data and if you want text to be shown in your table, a TD tag must be inserted somewhere within the table.

Again, both of these are container tags, and you can see exactly how to set up a simple table in the example below.

<HTML>

<HEAD>
<TITLE>
Simple table example
</TITLE>
</HEAD>

<BODY>

<TABLE BORDER=4 WIDTH=200 HEIGHT=150>
<TR>
<TD>
Row 1, Col 1
</TD>
<TD>
Row 1, Col 2
</TD>
</TR>
<TR>
<TD>
Row 2, Col 1
</TD>
<TD>
Row 2, Col 2
</TD>
</TR>
</TABLE>

</BODY>

</HTML>

Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2


The last thing to note about tables is the list of attributes for the TD tag.

Firstly, you can alter the background colour of each table entry individually by using the BGCOLOR attribute.
<TD BGCOLOR="#FFFF00">
gives a yellow background for this table cell.

You can also align the text within a cell in three particular ways in two directions:

<TD ALIGN=LEFT>
<TD ALIGN=CENTER>
<TD ALIGN=RIGHT>
aligns text in the horizontal direction,

<TD VALIGN=TOP>
<TD VALIGN=MIDDLE>
<TD VALIGN=BOTTOM>
aligns text in the vertical direction.


The Example File 6 on the examples page contains the HTML code for a table with all the features discussed here.

TOC <- -> Ind







[ Index Page | HTML Guide | JavaScript | Free Images | My Scripts | Resources Links ]

©1997 Stephen Battey
This page hosted by Get your own free home page