Tutorials @ WebDesignPro

Begining HTML and CSS | Part 3

In the third part of this tutorial we are going to focus on the HTML and look at some more ways of laying out our pages. Then in part 4 we will look at CSS in more depth

Not so long ago we didn't use divs to seperate our page content into sections, we used tables instead. Tables can in some ways be easier to use than divs but I want to discourage you from using them for the entire page layout. They are however very usefull when we want to display tabular data.

The table tag always contains a group of child elements. Lets take a look at the structure:

A 'th' tag is also available as a table header

The above code gives us a 4 row 3 column table. Notice that the table tag has 4 child 'tr' elements and each tr element has 3 child 'td' elements. The tr tag starts/ends a new line and the td tag defines each table cell. You should only place content between the td tags, anywhere else will cause your page to display incorrectly

We can stretch table cells over a number of columns or rows in the following manner

Next I invite you to experiment with some styles on the table. Adding border styles may be helpfull

Right, we're going to leave tables for the moment and look at 3 more HTML elements, <ul>, <ol> and <li> These 3 elements are used for compliling lists. There are 2 kinds of list we can make, ul (unordered list) and ol (ordered list). ul and ol elements are always containers for a group of li child elements each of which contains the content for a list item.

Another element you may find handy is blockquote

Once you've familiarised yourself with these new elements move on to part 4 where we will be looking at CSS in more depth

Comments:

Featured Script