Presentation on theme: "Tables Page layout Tables Tables are the bread and butter of HTML page layout. Youve made nice Office tables right? Well, same sort of thing, but we are."— Presentation transcript:
Tables Page layout Tables Tables are the bread and butter of HTML page layout. Youve made nice Office tables right? Well, same sort of thing, but we are mostly going to use them in a different way. Click PgDown key to turn pages
Tables Page layout How to make a table 1. Any table consists of a number of rows and columns. Need we say more? Lets cut the chit-chat and do it. Cell TL Cell TR Cell BL Cell BR Nb: you guessed that TR means row, and TD means datacell right?
Tables Page layout Table width settings 3. Note that table sizes are not in cms! Not these strange sizes again? Yep. this makes the table the whole width of the window this makes it 300 pixels wide. PC Screens usually range from 600 to 1200 pixels wide. Nb: Table size is elastic by default, ie: they are only as big as need be.
Tables Page layout More table settings 4. Table tag settings default to: border=0 cellspacing=1 cellpadding=1 align=left <table border=4 width=100% cellspacing=5 cellpadding=5 align=center> Nb: HTML is pretty forgiving and the page will probably render no matter what you type tag settings are known as attributes tag attributes should ideally have quotes as above
Tables Page layout Individual cell settings 5. cell tag settings default to: align=left valign=center and have no colour All do the obvious or
Tables Page layout Laying the page out 6. It is a fact of life that with HTML you cant put things exactly on the page where you want them--as you can with desktop publishing. Using invisible tables (border setting of zero) is the main method of controlling placement of page elements. Heres an example:
Tables Page layout A few tips 8. Keep the layout simple Use a hierarchy of element size. Large headings, medium subheadings, small text etc Tables can be nested, ie tables within tables Design inclusively: use 640 wide pages Keep content BRIEF Keep related things together Use colour with care Remember white space! Use page margins. The best way is an invisible table centred and 90% of the width of the window. Try to create some basic page alignment