New Perspectives on Creating Web Pages with HTML

1. New Perspectives on Creating Web Pages with HTML Tutorials 4 and 5: Designing a Web Page with Tables and Frames IS 360 – Tables and Frames

2. Table Tutorial Objectives • Create a text table • Create a table using the <table>, <tr>, and <td> tags • Create table headers and captions • Control the appearance of a table and table text • Create table cells that span several rows or columns IS 360 – Tables and Frames

3. Tutorial Objectives Continued • Use nested tables to enhance page design • Learn about Internet Explorer extensions for use with tables IS 360 – Tables and Frames

4. Tables and Frames • Relatively advanced HTML programming due to the many interrelated attributes • Frames can contain any other HTML elements, including tables • Frames can be nested within other frames • The interactions can be confusing to the programmer and the user! • easy to program, but the behavior of the page may be difficult to visualize • Design first, program second IS 360 – Tables and Frames

5. A Text Table This figure shows a text table. IS 360 – Tables and Frames

6. A Graphical Table This figure shows a graphical table IS 360 – Tables and Frames

7. Using the <pre> Tag for simple text tables • The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file. • preformatted text is text formatted in ways that HTML would otherwise not recognize. • The <pre> tag displays text using a fixed-width font. • By using the <pre> tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is using. • Most of the time, the <table> tag will be used to insert tables into a Web page. IS 360 – Tables and Frames

8. text will appear in the browser as it appears here Text Table Created with the <pre> Tag (race1.htm) This figure shows the complete preformatted text as it appears in the file. IS 360 – Tables and Frames

9. table text appears in a fixed width font Text Table as it Appearsin the Browser This figure shows the page as it appears in the browser. IS 360 – Tables and Frames

10. Defining a Table Structure • The first step to creating a table is to specify the table structure: • the number of rows and columns • the location of column headings • the placement of a table caption • Once the table structure is in place, you can start entering data into the table. IS 360 – Tables and Frames

11. Using the <table>, <tr>, and <td> Tags • Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure. • Each row of the table is indicated using a two-sided <tr> (for table row). • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells. IS 360 – Tables and Frames

12. The Graphical Table Syntax • The general syntax of a graphical table is: <table> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> • This creates a table with two rows and two columns. IS 360 – Tables and Frames

13. two rows A Simple Table (8-07.htm) This figure shows the layout of a graphical table. two columns IS 360 – Tables and Frames

14. beginning of the table structure table cells first row of six in the table end of the table structure HTML Structure of a Table You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. IS 360 – Tables and Frames

15. Completed HTML Table Tags This figure shows the completed text for the body of the table. With the text for the body of the table entered, the next step is to add the column headings. IS 360 – Tables and Frames

16. Creating Headings with the <th> Tag • HTML provides the <th> tag for table headings. • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font. • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text. IS 360 – Tables and Frames

17. table headings Adding Table Headings to the Table Text in cells formatted with the <th> tag is bold and centered above each table column. IS 360 – Tables and Frames

18. table headings appear bold and centered over their columns Result of Table Headingsas Displayed in the Browser (articles.htm) IS 360 – Tables and Frames

19. Creating a Table Caption • HTML allows you to specify a caption for a table. • The syntax for creating a caption is: <caption align=“alignment”>caption text</caption> • alignmentindicates the caption placement • a value of “bottom” centers the caption below the table • a value of “top” or “center” centers the caption above the table • a value of “left” or “right” place the caption above the table to the left or right IS 360 – Tables and Frames

20. caption text caption will be centered above the table Inserting a Table Caption Placing the caption text within a pair of <b> tags causes the caption to display as bold. IS 360 – Tables and Frames

21. table caption Result of a Table Caption This figure shows a table with a caption. IS 360 – Tables and Frames

22. Adding a Border to a Table Only the outside border is affected by the border attribute; the internal gridlines are not affected. IS 360 – Tables and Frames

23. Defining Cell Padding • To control the space between the table text and the cell borders, add the cellpadding attribute to the table tag. • The syntax for this attribute is: <table cellpadding=“value”> • value is the distance from the table text to the cell border, as measured in pixels • the default cell padding value is 1 pixel • Cell padding refers to the space within the cells. IS 360 – Tables and Frames

24. Tables with Different Cell Padding Values This figure shows the effect of changing the cell padding value for a table. IS 360 – Tables and Frames

25. Working with Table and Cell Size • The size of a table is determined by the text it contains in its cells. • By default, HTML places text on a single line. • As you add text in a cell, the width of the column and table expands to the edge of the page. • once the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single line • You can insert a line break, paragraph or heading tag within a cell. IS 360 – Tables and Frames

26. Defining the Table Size • The syntax for specifying the table size is: <table width=“size” height=“size”> • size is the width and height of the table as measured in pixels or as a percentage of the display area • To create a table whose height is equal to the entire height of the display area, enter the attribute height=“100%”. • If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used. • Remember that some monitors display Web pages at a resolution of 640 by 480 pixels. IS 360 – Tables and Frames

27. Setting the Width of the Table This figure shows the revised page with the table width increased to 500 pixels. Once the width is set for the table, the width of individual cells and columns can be set. IS 360 – Tables and Frames

28. Aligning a Table and its Contents • By default, a browser places a table on the left margin of a Web page, with surrounding text placed above and below the table. IS 360 – Tables and Frames

29. Aligning a Table on the Web Page • To align a table with the surrounding text, use the align attribute as follows: align=“alignment” • alignment equals “left”, “right”, or “center” • left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side • center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it • The align attribute is similar to the align attribute used with the <img> tag. • The align attribute is available only with browsers that support HTML 3.2 or later. IS 360 – Tables and Frames

30. This figure shows a right-aligned table. Results of a Right-Aligned Table IS 360 – Tables and Frames

31. Spanning Rows and Columns • To merge several cells into one, you need to create a spanning cell. • A spanning cell is a cell that occupies more than one row or column in a table. • Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. • The syntax for these attributes is: rowspan=“value” colspan=“value” • value is the number of rows or columns that the cell spans in the table IS 360 – Tables and Frames

32. Spanning Rows and Columns Continued • When a cell spans several rows or columns, it is important to adjust the number of cell tags used in the table row. • When a cell spans several rows, the rows below the spanning cell must also be adjusted. IS 360 – Tables and Frames

33. This figure shows a table of opinion poll data in which some of the cells span several rows and/or columns. Span? Span? Span? Example of Spanning Cells (race2.htm) IS 360 – Tables and Frames

34. This figure shows a table of opinion poll data in which some of the cells span several rows and/or columns. This cell spans two columns and two rows this cell spans three columns This cell spans three rows Example of Spanning Cells (race2.htm) IS 360 – Tables and Frames

35. four table cells in the first row only three table cells are required for the second and third rows HTML code resulting table A Table Structure with a Row-Spanning Cell This figure shows spanning cells. IS 360 – Tables and Frames

36. This figure shows a table with spanning cells. spanning cells Results of a Table with Spanning Cells IS 360 – Tables and Frames

37. Designing a Page Layout with Tables • HTML tables are most often used to define the layout of an entire Web page. • If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool. IS 360 – Tables and Frames

38. 620 pixels 1) newspaper logo 120 pixels 500 pixels 2) list of links 3) articles 4) address and phone number Table Layout of a Web Page This figure shows a sample table layout of a Web page. IS 360 – Tables and Frames

39. A Web Page with Tables This figure shows a sample web page using tables. IS 360 – Tables and Frames

40. Using Nested Table • Tables can be created within another table making the Web page easier to manage. IS 360 – Tables and Frames

41. A Sketch of a Web Page using Nested Tables This figure shows a sketch of a web page using nested tables. IS 360 – Tables and Frames

42. The Result of the Web Page using Nested Tables This figure shows a sample web page using nested tables. IS 360 – Tables and Frames

43. Table cells are very general containers! Hold other tables, lists, text, images, etc. IS 360 – Tables and Frames

44. A digression on color (MEH 14.9, MEH back chart) • In HTML4 colors can be specified in two ways: • symbolic labels: RED, BLUE, GREEN, etc. • RGB hex notation: • #RRGGBB • where ‘# is a literal • RR, GG, BB are 2 digit hexadecimal numbers from 00 to FF (0 to 255 ) representing the red, green and blue components of the color • Java and many scripting languages use the same convention IS 360 – Tables and Frames

45. Summary • Learned how to create and use tables. • Created a simple text table using the <pre> tag to display unformatted text. • Created a graphical table using the <table>, <tr>, <th> and <td> tags. • Worked with basic properties of tables. • Learned how to control the placement of the table on a Web page. IS 360 – Tables and Frames

46. Summary • Learned how to specify the size and alignment of the various table elements. • Worked with row-spanning and column-spanning cells. • Discussed the principle uses of tables. • Discussed extensions to the standard table tags that are supported by some browsers. IS 360 – Tables and Frames

47. Frame Tutorial Objectives • Create frames for a Web site • Control the appearance and placement of frames • Control the behavior of hyperlinks on a Web page with frames • Use reserved target names to specify a target for a hypertext link IS 360 – Tables and Frames

48. Advantages to Using Frames • Frames can give more flexibility in designing your Web presentation. • You can place information in different Web pages, removing redundancy. • Frames can make your site easier to manage. • Frames allows you to update only a few files rather than the whole. • Web designers advocate creating both framed and non-framed versions for a Web site and giving users the option of which one to use. IS 360 – Tables and Frames

49. Disadvantages to Using Frames • The browser has to load multiple HTML files before a user can view the contents of the site increasing the waiting time for potential customers. • Some older browsers cannot display frames. • Some users simply do not like using frames. • Some web authors feel that frames are too constricting, limiting flexibility in designing the layout of a Web page. • There is concern that frames can use up valuable screen space. • The source code is removed from the user. IS 360 – Tables and Frames

50. Frames • A FRAME is an independently scrollable display area of a browser window • Each frame cell typically displays a different HTML page • A frame is NOT a separate browser instance (separate browser instances can be invoked programmatically and have different uses and behaviors) IS 360 – Tables and Frames