GNU   davin.50webs.com/webdesign
a GNU world order – your home of everything that is free

       Main Menu          Research Projects         Photo Album            Curriculum Vitae      The Greatest Artists
    Email Address       Computer Games          Web Design          Java Training Wheels      The Fly (A Story)   
  Political Activism   Bob Dylan Quotes+       My Life Story          Smoking Cessation          Other Links      
      Tutorial 1             Tutorial 2               Tutorial 3                   Tutorial 4                 Tutorial 5      
      Tutorial 6             Tutorial 7               Tutorial 8                   Tutorial 9                 Tutorial 10      
      Tutorial 11         Dec/Hex Codes   H.T.M.L. ASCII Codes         Using Emacs           Download Links  


Web design course tutorial 3 : lists and tables

§ 3.1 Lists

Here is how to create an ordered list in H.T.M.L.:

Here is an ordered list
<ol>
  <li>Apple
  <li>Banana
  <li>Carrot
</ol>

Here is an ordered list

  1. Apple
  2. Banana
  3. Carrot

The code in Emacs. The code in a Web browser.

Note that you can change the type of the ordered list by using the type= attribute which can hold one of the following values: A for capital letters, a for small letters, I for large Roman numerals, i for small Roman numerals, or (1) for numbers (the default). For example here is an example with large Roman numerals:

Here is an ordered list
<ol type=I>
  <li>Apple
  <li>Banana
  <li>Carrot
</ol>

Here is an ordered list

  1. Apple
  2. Banana
  3. Carrot

The code in Emacs. The code in a Web browser.

Here is how to create an unordered list in H.T.M.L.:

Here is an unordered list
<ul>
  <li>Apple
  <li>Banana
  <li>Carrot
</ul>

Here is an unordered list

  • Apple
  • Banana
  • Carrot

The code in Emacs. The code in a Web browser.

Like with ordered lists you can change the type of the unordered list by using the type= attribute which can hold one of the following values: disk (the default), circle, or square. For example here is an example with circle as the type:

Here is an unordered list
<ul type=circle>
  <li>Apple
  <li>Banana
  <li>Carrot
</ul>

Here is an unordered list

  • Apple
  • Banana
  • Carrot

The code in Emacs. The code in a Web browser.

Sometimes is a useful to have an ordered or unordered list appear in the center of the screen. To do this you will need to use a table, see Question 3.2. You can have lists inside of lists and everything works as you would expect it to. See Question 3.1 for more information.

§ 3.2 Tables

Here is an example of a table in H.T.M.L.:

<table border=1 width="50%" align=center>
  <tr>
    <td bgcolor=yellow>
      Hello<br>
      Adam<br>
    </td>
    <td bgcolor=lightblue>
      Hello<br>
      Belinda<br>
    </td>
  </tr>
  <tr>
    <td bgcolor=lightblue>
      Hello<br>
      Charles<br>
    </td>
    <td bgcolor=yellow>
      Hello<br>
      Diane<br>
    </td>
  </tr>
</table>


Hello
Adam
Hello
Belinda
Hello
Charles
Hello
Diane

The code in Emacs. The code in a Web browser.

In the above the border=1 attribute tells the browser to generate a border around each cell of the table. A cell is the name that we give to each of the four rectangles in the above diagram. The width=50% attribute tells the browser to set the width to one half of the screen width. The align=center attribute tells the browser to locate the table in the centre of the screen. Note that unlike <img> tags from the last section, you can specify the align=center attribute inside the <table> tag. Like <img> tags, they can also be given an alignment of left or right. For example, here is a table with the align=left attribute:

<table border=1 width="50%" align=left>
  <tr>
    <td bgcolor=yellow>
      Hello<br>
      Adam<br>
    </td>
    <td bgcolor=lightblue>
      Hello<br>
      Belinda<br>
    </td>
  </tr>
  <tr>
    <td bgcolor=lightblue>
      Hello<br>
      Charles<br>
    </td>
    <td bgcolor=yellow>
      Hello<br>
      Diane<br>
    </td>
  </tr>
</table>

blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah


Hello
Adam
Hello
Belinda
Hello
Charles
Hello
Diane
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

The code in Emacs. The code in a Web browser.

This doesn't look as good as it could. To add spaces around the table, you need to use the cellspacing= attribute. Here is a better looking example than the above:

<table border=0 width="50%" align=left cellspacing=10>
  <tr>
    <td bgcolor=yellow>
      Hello<br>
      Adam<br>
    </td>
    <td bgcolor=lightblue>
      Hello<br>
      Belinda<br>
    </td>
  </tr>
  <tr>
    <td bgcolor=lightblue>
      Hello<br>
      Charles<br>
    </td>
    <td bgcolor=yellow>
      Hello<br>
      Diane<br>
    </td>
  </tr>
</table>

blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah


Hello
Adam
Hello
Belinda
Hello
Charles
Hello
Diane
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

The code in Emacs. The code in a Web browser.

Note that in the above, the border= attribute has been omitted for cosmetic reasons. Here is a similar example this time using the also the cellpadding= attribute.

<table border=0 width="50%" align=left cellspacing=10 cellpadding=10>
  <tr>
    <td bgcolor=yellow>
      Hello<br>
      Adam<br>
    </td>
    <td bgcolor=lightblue>
      Hello<br>
      Belinda<br>
    </td>
  </tr>
  <tr>
    <td bgcolor=lightblue>
      Hello<br>
      Charles<br>
    </td>
    <td bgcolor=yellow>
      Hello<br>
      Diane<br>
    </td>
  </tr>
</table>

blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah


Hello
Adam
Hello
Belinda
Hello
Charles
Hello
Diane
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

The code in Emacs. The code in a Web browser.

Note that the blue and yellow table in this example looks better than the previous one because of the cellpadding=10 attribute. Here is a table with some combinations of the align= and valign= attributes. which are useful for aligning text inside cells.

<table border=1>
  <tr>
    <td>
      This is a wide cell
    </td>
    <td>
      This is a wide cell
    </td>
    <td>
      This is a wide cell
    </td>
    <td>
      This is a wide cell
    </td>
  </tr>
  <tr>
    <td align=left>
      This<br>
      cell<br>
      has<br>
      align=left<br>
    </td>
    <td align=center>
      This<br>
      cell<br>
      has<br>
      align=center<br>
    </td>
    <td align=right>
      This<br>
      cell<br>
      has<br>
      align=right<br>
    </td>
    <td>
      This<br>
      is<br>
      a<br>
      small<br>
      cell<br>
    </td>
  </tr>
  <tr>
    <td valign=top>
      This<br>
      cell<br>
      has<br>
      valign=top<br>
    </td>
    <td valign=middle>
      This<br>
      cell<br>
      has<br>
      valign=middle<br>
    </td>
    <td valign=bottom>
      This<br>
      cell<br>
      has<br>
      valign=bottom<br>
    </td>
    <td>
      This<br>
      is<br>
      a<br>
      very<br>
      very<br>
      very<br>
      very<br>
      very<br>
      very<br>
      long<br>
      cell<br>
    </td>
  </tr>
</table>

This is a wide cell This is a wide cell This is a wide cell This is a wide cell
This
cell
has
align=left
This
cell
has
align=center
This
cell
has
align=right
This
is
a
small
cell
This
cell
has
valign=top
This
cell
has
valign=middle
This
cell
has
valign=bottom
This
is
a
very
very
very
very
very
very
long
cell

The code in Emacs. The code in a Web browser.

§ 3.2.1 Tables Inside Tables

Sometimes to create a complex layout you will need to use tables inside tables also known as nested tables. Here is a simple example:

<table width="50%" align=center>
  <tr>
    <td bgcolor=yellow>
      Hello<br>
      Adam<br>
    </td>
    <td bgcolor=lightblue>
      Hello<br>
      Belinda<br>
    </td>
  </tr>
  <tr>
    <td bgcolor=lightblue>
      Hello<br>
      Charles<br>
    </td>
    <td>
      <table width="100%">
        <tr>
          <td bgcolor=springgreen>
            Hello<br>
            Diane<br>
          </td>
          <td bgcolor=lightgrey>
            Hello<br>
            Eddie<br>
          </td>
        </tr>
        <tr>
          <td bgcolor=lightgrey>
            Hello<br>
            Fiona<br>
          </td>
          <td bgcolor=springgreen>
            Hello<br>
            George<br>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Hello
Adam
Hello
Belinda
Hello
Charles
Hello
Diane
Hello
Eddie
Hello
Fiona
Hello
George

The code in Emacs. The code in a Web browser.

§ 3.3 Useful Emacs keys for debugging

§ 3.4 Questions


Question 3.1: Create some H.T.M.L. code for the following layout:

question-01.png


Question 3.2: Using the <ol>. <table>, <tr> and <td> and the corresponding closing tags only, create a layout that looks like this: (note that the list appears in the middle of the screen)

question-02.png

For the following questions you should note that the tables appear in the center of the screen and they each take up 75% of the screen's width. To get this kind of layout you will need to add align=center and width="75%" attributes to the <table> tag. You will also need to use the following colour codes:

 pink
 yellow
 springgreen
 lightblue


Question 3.3: Using one table create H.T.M.L. code for the following layout:

question3.png


Question 3.4: Using one table create H.T.M.L. code for the following layout:

question4.png


Question 3.5: Using one table and the align=right attributes to the second <td> tag create H.T.M.L. code for the following layout:

question5.png


Question 3.6: Using one table and three occurrences of the width= attribute to the <td> tags create H.T.M.L. code for the following layout:

question6.png


Question 3.7: Using one table and three occurrences of the width= attribute to the <td> tags create H.T.M.L. code for the following layout:

question7.png


Question 3.8: Using one table create H.T.M.L. code for the following layout:

question8.png


Question 3.9: Using one table and the align= and valign= attributes create H.T.M.L. code for the following layout:

question9.png


Question 3.10: Using one table and the align=, valign=, border= and cellspacing= attributes create H.T.M.L. code for the following layout:

question10.png


Question 3.11: Using one table inside another create H.T.M.L. code for the following layout:

question11.png


Question 3.12: Using one table inside another create H.T.M.L. code for the following layout:

question12.png


Question 3.13:  † Tricky Using one table inside another create H.T.M.L. code for the following layout:

question13.png


Question 3.14:  † Tricky Using one table inside another create H.T.M.L. code for the following layout:

question14.png


Question 3.15:  † Tricky Using one table inside another create H.T.M.L. code for the following layout:

question15.png


Question 3.16:  † Tricky Using one table inside another create H.T.M.L. code for the following layout:

question16.png


Question 3.17:  † Tricky Using three nested tables create H.T.M.L. code for the following layout:

question17.png


Question 3.18:  † Tricky Using three nested tables create H.T.M.L. code for the following layout:

question18.png


Question 3.19:  † Tricky Using three nested tables create H.T.M.L. code for the following layout:

question19.png


Question 3.20:  † Tricky Using three nested tables create H.T.M.L. code for the following layout:

question20.png


You can view the answers to this tutorial. A password is required.

Back to Web Design Course
This page has the following hit count:
| Main Menu | Research Projects | Photo Album | Curriculum Vitae | The Greatest Artists |
| Email Address | Computer Games | Web Design | Java Training Wheels | The Fly (A Story) |
| Political Activism | Bob Dylan Quotes+ | My Life Story | Smoking Cessation | Other Links |
| Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 |
| Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 |
| Tutorial 11 | Dec/Hex Codes | H.T.M.L. ASCII Codes | Using Emacs | Download Links
Last modified: Sun Oct 9 14:46:30 NZDT 2016
Best viewed at 800x600 or above resolution.
© Copyright 1999-2016 Davin Pearson.
Please report any broken links to