Main page table

From Asterix HTML
Revision as of 11:44, 25 November 2023 by Peter (talk | contribs) (Created page with "You can use a table or floats to structure your web pages == Basic web page structure == {| class="wikitable" ! style="text-align: center;" | Position ! style="text-align: center;" | Content |- | style="text-align: center;" | Header | style="text-align: center;" | Logo |- | style="text-align: center;" | Left hand side | style="text-align: center;" | Navigation table |- | style="text-align: center;" | Center | style="text-ali...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

You can use a table or floats to structure your web pages

Basic web page structure

Position Content
Header Logo
Left hand side Navigation table
Center Each web page has a different center
Right hand side Three sets of collaboration links
Footer See footer for details of footer table

Up until now, I have shown you how to use a full page table to set this structure and most of us have managed rather well to get this basic tructure to work, even using this as the basic structure of your 1st design brief

Tables or old-school!

Using a table to structure your web page is not good practice- there are better ways to layout the structure of your web page. However, by concentrating on the way a simply table works, you are programming your brain to see the layers of coding used in HTML!- everything about tags inside tags inside tags inside tags, that is so important to become comfortable with

For example

 Inside the html and /html tags you have body and /body taga
 Inside the body and /body tags you have table and /table tags
 Inside the table and /table tags you have tr and /tr tags (a row of the table)
 Inside the tr and /tr tags you have td and /td tags (the data cells of a table row)
 Inside the td and /td tags could have table and /table tags (a table in a table!)

It's all about nexting! (see more on Wikipedia)

A better way to layout a web page

For now, I'm just going to give you one word : Floats

Notes

This structure must be replicated consistently across all your web pages

Main Page | Basic web design | Navigation | Ranking | Support | Asterix Home