1 HTML Tables
2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even the most complex tables use just the following three tags: Creates the table Table row Table column
3 Page Layout Tables open up many possibilities for page layout. You have more control over the placement of elements.
4 Page Layout The look and layout of pages on a Web site should reflect the purpose of the site and contribute to the site's usability. Good design can make a page not only appealing but usable.
5 Web page layout using tables Financial Times: Calendar of Events: CTI homepage
6 Using Tables for Positioning Map out your design on paper first. Don't turn off the border until you are satisfied with the page.
7 Planning a Layout On paper, get a rough idea of where you want certain elements to be Then draw out a basic grid structure for your page
8 How would you use tables?
9
10 Nesting Tables
11 Basic HTML Tables A table organizes data in rows and columns (#of columns=#of cells) … Enclose the table structure … Table row … Each data cell within a row. The smallest area of the table we are able to format
12 Basic table structure A1 A2 A3 B1 B2 B3 A1A2A3 B1B2B3 First row First Column
Example by alan burns Instructor: A. Burns 13 Table Caption and Headers … A caption is centered at the TOP/BOTTOM of the table. … special cells that act as table headers (centered and boldface) This is a table First Row A1 First row A1 This is a table Html_table.htm
14 attributes border=“# pixels” Size of the border around the table cellspacing =“# pixels” space inserted between cells (outside cell contents) cellpadding =“# pixels” size of the gap between the cell text and the cell border (inside cell contents) align = left/right table is placed on the left/right and text is wrapped around the table center table is placed in the center of the page. Text is not wrapped around the table
15 More Attributes bordercolor=“color” changes the color of the border bordercolordark=“color” bordercolorlight=“color” creates a 3D effect for the border
16 More attributes frame=“option” Controls which side of the table has borders Where option can be one of the following:
17 More attributes rules=all|rows|cols|none controls around which cell the border is drawn.
18,, attributes width =“pixels” or “%” Table/cell width in pixels or as % of the page/table height =“pixels” or “%” Same as above bgcolor =“color” Change the table/cell background color background =“pic.jpg” Tiles a picture as a background
19 Cell attributes (, ) colspan =“#” this cell spans for # columns rowspan =“#” this cell spans for # rows align = valign= left/right text in the cell is aligned left/right center text in the cell is centered top/bottom text in the cell is aligned top/bottom middle text in the cell is aligned with the middle of the cell
20 Align and valign attributes
21 Exercise Design the following table in FrontPage. Check the HTML to see how the cells are merged. LogoLink ABCD EF
22 Using tables for page layout To display content in newspaper-like columns or separates the page in different topical areas. Start with the outer table and work your way in using nested tables Add background color to visually separate column Add cell padding to avoid crowding Do not use too many nested tables – it slows down the web page & may confuse browsers! HTMLLayout.htm
23 <body background="RedBar.jpg" Image+links Nested Table Outer table Logo Main Side note Another note Nested table See in practice
24 How many rows and columns? Tables and graphics
25 Final remarks Work plan: 1.Diagram the layout before you start writing 2.Create the text for various cols in separate files, to insert later. 3.Start from the outer table first, and gradually work inward Use cell padding & cell spacing to avoid overcrowded web pages Use the valign=“top” attribute for cells containing articles/text. Use no more than three/four cols of text. Keep the layout of your web page simple!