1. Tables II

To create a more complicated table (where a row spans through several columns or a column through several rows) use the attributes rowspan and colspan. I advise you to draw and analyse the table before you start programming it, otherwise you may get lost easily.

example:

<table> <tr> <td colspan="2"> A A A </td> </tr> <tr> <td> B B B </td> <td> C C C </td> </tr> <tr> <td rowspan="2"> D D D </td> <td> E E E </td> </tr> <tr> <td> F F F </td> </tr> </table>

A A A B B B C C C D D D E E E F F F

2. Lists

Can be bulleted (or so called unordered) <ul></ul> and numbered (or ordered) <ol></ol>

Each bullet/number inside such a list is represented by a <li></li> tag - the text is written in between the tags.

<ul>   <li>first bullet</li>   <li>second bullet</li>   <li>third bullet</li> </ul>

first bullet second bullet third bullet

<ol>   <li>first bullet</li>   <li>second bullet</li>   <li>third bullet</li> </ol>

first bullet second bullet third bullet

3. classes and CSS

If you want to apply styles to only one specific place and you don't want to vjange also all pther tags in the document, use classes. You may create as many classes as you want, as long as you give them different names. You create a CSS class by putting a dot and a name of the class, afterwards you write attributes as before:



.myText {font-family: Arial; font-size: 20px; color: red;}
.mainImage {border-style: solid; border-color: yellow;}


You apply the class into a tag by using attribute "class":


<div class="myText">any text that will be Arial 20, red color</div>
<li class="myText">any text in Arial 20, red color; this text will be in a list of bulleted/numbered items</li>
<img src="images/picture.jpg" class="mainImage"> - this image will have a yellow solid border