1 Mastering the Internet and HTML Tables and Table Tags

2 Outline Goal Objectives Introduction Table structure and variables Table layout and design Table tags Table rendering and calculations Nesting tables Formatting via tables Tutorials FAQs Summary Exercises/Homework

3 Goal This chapter covers tables, their use in Web pages, and their tags. It also covers table layout, structure, design, and nesting. Using tables to format Web pages is also covered.

4 Objectives Introduction Table layout and design Table structure and variables Table tags Table nesting, rendering, and calculations

5 Introduction HTML uses tables in two ways: the conventional way (tabulate data), and the new way (format Web pages) HTML tables consist f rows which are divided into cells. Each cell holds its own content (data). Cell data could be any HTML element HTML editors use tables for formatting when they are used to develop Web pages It is hard to follow HTML code of Web pages that are formatted via tables Tables may have horizontal, vertical, or both headings

6 Table structure and variable Each table has a generic structure (figure 16.1) consisting of rows, columns, and cells HTML table variables are grouped into two groups: non-cell, and cell Non-cell variables control the table properties and structure. They are table caption, summary, border, header, rows, columns, width, height, cells, and rules (figure 16.1) Cell variables are row span, column span, padding spacing, and alignment of data within a cell (figure 16.2) Other cell variables are the colors of the cell background and foreground (its text) (Cont’d)

7 Figure 16.1 Table structure (Cont’d)

8 Figure 16.2 Cell variables

9 Table layout and design The purpose (tabulating data or formatting Web pages) of a table determines its layout and design A table may have horizontal, vertical, or both headings (figure 16.3) Tables used for formatting do not use headings or borders, and their cell sizes differ greatly Web authors must bear in mind the different sizes of computer screens while designing tables A table width and height should be large enough to fit on a computer screen without having to scroll up or down, or left to right (Cont’d)

10 Figure 16.3 Table layout

11 Table tags HTML provides tags to create tables and control their variables The table tags are,,,, and The tag acts as the container tag for all the others The attributes of the tag are SUMMARY, WIDTH, HEIGHT, BORDER, ALIGN, FRAME, RULES, CELLSPACING, and CELLPADDING The attributes of the tag are ALIGN, VALIGN The attributes of the and tags are ROWSPAN, COLSPAN, CELLPADDING, ABBR, AXIS, HEADERS, SCOPE, NOWRAP, ALIGN, and VALIGN (Cont’d)

12 Table tags Example 16.1 Use of tables (figures 16.4) A Web page with tables This table uses no border Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 (Cont’d)

13 Table tags This table has a border that is 4 pixels thick Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 This table has a width of 200 pixels, a height of 100 pixels, and a border that is 4 pixels thick Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 (Cont’d)

14 Table tags This table has a width of 200 pixels, a height of 100 pixels, a border that is 4 pixels thick, and cell spacing of 8 pixels Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 (Cont’d)

15 (Cont’d) Figure 16.4 Results of the attributes of the tag

16 Table tags Example 16.2 Use of variable-size table cells (figure 16.5) A Web page with variable-size table cells This table uses equal size cells Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 (Cont’d)

17 Table tags This table uses cell 5 that spans two rows and three columns Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 This table uses cell 5 that spans two rows and three columns. The table also has a width of 200 pixels, a height of 100 pixels, and cell spacing of 8 pixels (Cont’d)

18 Table tags Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 (Cont’d)

19 Figure 16.5 Results of the attributes of the tag

20 Table rendering and calculations Browsers use all table, cell and non-cell, variables to calculate cell sizes. They resolve any conflict they find between these variables Each cell must be large enough to hold its content Browsers perform the following calculations, using table variables, to render tables – Calculate table width and height – Calculate the number of columns in a table – Calculate the size of a table cell (figure 16.6) – Calculate cell spacing and padding – Determine inheritance of alignment specifications (Cont’d)

21 Figure 16.6 Effect of cell content on its design

22 Nesting tables Web authors may nest tables to achieve certain design goals of their Web pages Table nesting makes HTML code quite complex and difficult to follow HTML nests tables at the cell level. Web authors can create an entire table inside a cell of another table. Nesting tables may produce awkward results (Cont’d)

23 Nesting tables Example 16.3 Use of nested tables (figure 16.7) A Web page with nested tables Cell 2 is an entire table Cell 1 Nested table T21 T22 T23 (Cont’d)

24 Nesting tables Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 Cell 7 is an entire table Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 T21 T22 T23 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 (Cont’d)

25 Nesting tables Cell 11 is an entire table Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 T21 T22 T23 Cell 12 (Cont’d)

26 Figure 16.7 Nesting tables

27 Formatting via tables The ultimate goal of using tables in HTML is to format Web pages Formatting Web pages with tables is based on the same idea as nesting tables; i.e. formatting is achieved at the cell level. Web authors can create an entire Web page inside a table cell. Each table cell can be viewed as an independent screen that can hold any HTML content including a full Web page (Cont’d)

28 Formatting via tables Example 16.4 Formatting with tables (figures 16.8 and 16.9) (Cont’d) Figure 16.8 Layout design

29 Formatting via tables Formatting a Web page with tables (Cont’d)

30 Formatting via tables What to eat for a midnight snack? Pizza Nachos Ice cream Pretzels Here are some Web sites to visit (Cont’d)

31 Formatting via tables Check latest NU offerings Prentice Hall latest books Various types of tables It is once said that physical fitness and exercises are very important to maintain a healthy life. We all must eat well balanced meals, work out at least three times a week, 45 minutes each time. (Cont’d)

32 Figure 16.9 Formatting a Web page with tables

33 Tutorials Tutorial A table with a horizontal heading (figure 16.10) A Web page with horizontal heading Customer information of a bank Account Number First Name (Cont’d)

34 Tutorials Last Name Account Balance John Doe Lisa (Cont’d)

35 Tutorials Stones Joe Ellis Kathy (Cont’d)

36 Tutorials Doherty Marilyn Walsh Anna Clinton (Cont’d)

37 Figure A table with a horizontal heading

38 Tutorials Tutorial A table with a vertical heading (figure 16.11) A Web page with vertical heading Customer information of a bank Account Number (Cont’d)

39 Tutorials First Name John Lisa Joe (Cont’d)

40 Tutorials Kathy Marilyn Anna Last Name Doe Stones Ellis Doherty Walsh Clinton (Cont’d)

41 Tutorials Account Balance (Cont’d)

42 Figure A table with a vertical heading

43 Tutorials Tutorial A table with dual headings (figure 6.12) A Web page with dual heading Customer information of a bank Customer name (Cont’d)

44 Tutorials John Doe Lisa Stones Joe Ellis Kathy Doherty Marilyn Walsh Account number (Cont’d)

45 Tutorials Account balance (Cont’d)

46 Figure A table with dual headings

47 Tutorials Tutorial Formatting a form via a table (figure 6.13) Formatting a form via tables Please fill this survey form (Cont’d)

48 Tutorials First Name: MI: Last Name: City: (Cont’d)

49 Tutorials State: Zip code: Choose a sport: Basketball: Football: Hockey: (Cont’d)

50 Tutorials Choose a year: Freshman: Sophomore: Junior: Senior: Choose your favorite junk food: (Cont’d)

51 Tutorials Chips Pizza Nachos Please let us know your comments (Cont’d)

52 Figure Formatting a form via tables

53 FAQs Q: Does the tag replace the SUMMARY attribute of the tag? – A: No. The tag provides a very brief, one-statement description of a table. The SUMMARY attribute of the tag provides much more information about the table structure and purpose, to help disabled Web surfers to understand the table. (Cont’d)

54 FAQs Q: What is a good way to debug HTML code while using tables to format Web pages? – A: Use the BORDER attribute of the tag to get an idea of how the browser is creating the table rows, columns, and cells that you have designed. These borders should help you immensely in deciding what to change to finalize the formatting. Once you like the final layout of the page, simply remove the BORDER attribute.

55 Summary – HTML tables can be used to tabulate data or to format Web pages – A table consists of rows. Each row is divided into cells (columns) – A table has non-cell (control table structure and layout) and cell variables (control cell layout) – Non-cell variables are caption, summary, border, header, rows, width, height, cells, and rules – Cell variables are row span, column span, padding, spacing, and alignment – Table tags are,,,, and – The attributes of the tag are SUMMARY, WIDTH, HEIGHT, BORDER, ALIGN, FRAME, CELLSPACING, and CELLPADDING – The attributes of the and tags are ABBR, AXIS, HEADERS, SCOPE, ROWSPAN, COLSPAN, NOWRAP, WIDTH, HEIGHT, ALIGN, VALIGN, CELLPADDING, and BGCOLOR

56 Exercises Problem Create the table shown in figure 16.1 – Solution strategy: Follow example Use a text editor to write and debug the HTML code. Use a browser to display the results (Cont’d)

57 A Web page with a table Table 1: This a caption Cell (1,1) Cell (1, 2) Cell (1, 3) Cell (2,1) Cell (2, 2) Cell (2, 3) Cell (3,1) Cell (3, 2) Cell (3, 3) Cell (4,1) Cell (4, 2) Cell (4, 3) Cell (5,1) Cell (5, 2) Cell (5, 3) (Cont’d)

58

59 Problems Problem Create the dual-heading table shown in figure – Solution strategy: Use a text editor to write the HTML code. Use a browser to test it (Cont’d)

60 Exercise 9 Course Number Course Name Grad./Undergrad. Term Offered (Cont’d)

61 CHE3600 Polymer Science Graduate Every Fall CIV3410 Solid Mech. I Graduate Every Fall ECE3454 Graph Theory (Cont’d)

62 Graduate Every Spring MIM3350 CAD/CAM Graduate Every Winter MIM1430 Manufacturing Undergrad. Every Spring (Cont’d)

63