1. Instructor: A. Burns 1 HTML Tables

2. Instructor: A. Burns 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. Instructor: A. Burns 3 Page Layout Tables open up many possibilities for page layout. You have more control over the placement of elements.

4. Instructor: A. Burns 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. Instructor: A. Burns 5 Web page layout using tables Financial Times: http://news.ft.com/home/us/http://news.ft.com/home/us/ Calendar of Events: http://www.cs.depaul.edu/calendar/calendar.asp http://www.cs.depaul.edu/calendar/calendar.asp http://events.tc.umn.edu/months.xml CTI homepage http://www.cs.depaul.edu/news/default.asp

6. Instructor: A. Burns 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. Instructor: A. Burns 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. Instructor: A. Burns 8 How would you use tables?

9. Instructor: A. Burns 9 How would you use tables?

10. Instructor: A. Burns 10 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

11. Instructor: A. Burns 11 Basic table structure A1 A2 A3 B1 B2 B3 A1A2A3 B1B2B3 First row First Column

12. Instructor: A. Burns 12 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

13. Instructor: A. Burns 13 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

14. Instructor: A. Burns 14 More Attributes bordercolor=“color”  changes the color of the border bordercolordark=“color”  bordercolorlight=“color”  creates a 3D effect for the border

15. Instructor: A. Burns 15 More attributes frame=“option” Controls which side of the table has borders Where option can be one of the following:

16. Instructor: A. Burns 16 More attributes rules=all|rows|cols|none  controls around which cell the border is drawn.

17. Instructor: A. Burns 17,, 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

18. Instructor: A. Burns 18 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

19. Instructor: A. Burns 19 Align and valign attributes

20. Instructor: A. Burns 20 Exercise Design the following table in FrontPage. Check the HTML to see how the cells are merged. LogoLink ABCD EF

21. Instructor: A. Burns 21 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

22. Instructor: A. Burns 22 <body background="RedBar.jpg" Image+links Nested Table Outer table Logo Main Side note Another note Nested table See in practice

23. Instructor: A. Burns 23 How many rows and columns? Topframe.htm Tables and graphics

24. Instructor: A. Burns 24 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!