CSW131 Steven Battilana 1 CSW 131 – Chapter 7 Adding Tables and Lists (X/HTML) Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley

CSW131 Steven Battilana 2 Add Data Tables (pp ) Tables allow the addition of easily organized data, such as images, numbers, specifications, etc. The structure is: [opening table tag] [table row; as many as needed] [table data (aka, “cells”) Tables allow the addition of easily organized data, such as images, numbers, specifications, etc. The structure is: [opening table tag] [table row; as many as needed] [table data (aka, “cells”) First download First download ch07.zip into downloads subfolder copy & paste ch07zip into class_work subfolder extract (unzip) ch07.zip, which becomes subfolder ch07 into class_work subfolder Right-click tables.html and select Edit with Notepad++ On a new line after type: On a new line after type:<table> [If saved & viewed, nothing appears yet] [If saved & viewed, nothing appears yet] More...

CSW131 Steven Battilana 3 Add Data Tables (pp CONT.) …and between the table tags enter the following rows & data: Save tables.html and view it in a browser. Column widths are dependent on the widest entry for each column. Save tables.html and view it in a browser. Column widths are dependent on the widest entry for each column. Note: Do NOT use tables to layout web pages (use CSS). Note: Do NOT use tables to layout web pages (use CSS). Name Department Phone Malcome Reynolds Administration Inara Serra Public Relations Jane Cobb Security

CSW131 Steven Battilana 4 Format Tables with CSS (pp ) Tables are fairly bland without CSS. Properties used to format text are great for text in cells. Background-color for all structural aspects of the table, and borders can be formatted. Tables are fairly bland without CSS. Properties used to format text are great for text in cells. Background-color for all structural aspects of the table, and borders can be formatted. Continuing on tables.html, before type: Continuing on tables.html, before type: table{ background-color: #FFC955; border: 1px solid #540907; }</style> Save tables.html and view it in a browser. Experiment with formatting TIPS, bottom of p. 165 (place borders around cells, then alternate row colors, e.g.,.F90). See “DONE” Experiment with formatting TIPS, bottom of p. 165 (place borders around cells, then alternate row colors, e.g.,.F90). See “DONE”

CSW131 Steven Battilana 5 Create Complex Tables (pp ) Similar to “merging cells”, the attributes colspan merges cells along rows, and rowspan merges cells along columns. Similar to “merging cells”, the attributes colspan merges cells along rows, and rowspan merges cells along columns. Continuing on tables.html, before type: Continuing on tables.html, before type:<tr> Other Personnel Other Personnel </tr> Save tables.html and view it in a browser noting merged cells. Save tables.html and view it in a browser noting merged cells. Note: See TIPS at bottom of p. 167 for “merging” cells. Note: See TIPS at bottom of p. 167 for “merging” cells. <tr> Simon Tam Simon Tam Medical Medical </tr><tr> Kaylee Frye Kaylee Frye Facilities Facilities </tr>

CSW131 Steven Battilana 6 Add a Header Row (pp ) To make tables more meaningful (for traditional and visually challenged users), table headers,, replace in the first row and or column. They default as bold and centered. To make tables more meaningful (for traditional and visually challenged users), table headers,, replace in the first row and or column. They default as bold and centered. Continuing on tables.html, replace the table data tags in the 1 st row with table header tags: Continuing on tables.html, replace the table data tags in the 1 st row with table header tags:<tr> Name Name Department Department Phone Phone Save tables.html and view it noting NEW header formatting. Save tables.html and view it noting NEW header formatting. Note: See TIPS at bottom of p. 169 for thoughts on headers. Table headers do NOT need to be the 1 st row of a table, and you can change the appearance using CSS. Note: See TIPS at bottom of p. 169 for thoughts on headers. Table headers do NOT need to be the 1 st row of a table, and you can change the appearance using CSS.

CSW131 Steven Battilana 7 Add Table Sections (pp ) Three table sections are available and used in this order:,, and. In addition to giving meaning, for long tables that may be printed on more than 1 page, the and contents will print (on all pages). Three table sections are available and used in this order:,, and. In addition to giving meaning, for long tables that may be printed on more than 1 page, the and contents will print (on all pages). Continuing on tables.html, on a new line after type:, placing after the 1st …and on a new line after type: Continuing on tables.html, on a new line after type:, placing after the 1st …and on a new line after type:<tfoot><tr> All numbers are area code 999 All numbers are area code 999 </tr> …and on a new line after type:, placing on a new line before …and on a new line after type:, placing on a new line before Save tables.html and view it noting (while we added a line in the footer) there is NO appearance change. Save tables.html and view it noting (while we added a line in the footer) there is NO appearance change. Coding sections “logically”, cutting & pasting correctly is common. Coding sections “logically”, cutting & pasting correctly is common.

CSW131 Steven Battilana 8 Add an Unordered List (pp ) Unordered (or bulleted) lists are most common list types with easy, common sense tags and (list items). Unordered (or bulleted) lists are most common list types with easy, common sense tags and (list items). Right-click unorderedlists.html, select Edit with Notepad++, and on a new line after type:<ul> Jump, Van Halen "Jump", Van Halen Mickey, Tony Basil "Mickey", Tony Basil Blaze of Glory, Bon Jovi "Blaze of Glory", Bon Jovi "Tik Tok", KeSha "Tik Tok", KeSha </ul> Save unorderedlists.html and view it noting bulleting items. Save unorderedlists.html and view it noting bulleting items. See TIPS on changing bullet appearance and nesting bullets. See TIPS on changing bullet appearance and nesting bullets.

CSW131 Steven Battilana 9 Add an Ordered List (pp ) Ordered (or number ordered) lists are the 2 nd most common list type with similar, common sense tags and (list items). Ordered (or number ordered) lists are the 2 nd most common list type with similar, common sense tags and (list items). Right-click orderedlists.html, select Edit with Notepad++, and on a new line after type:<ol><li>"Serenity"</li> "Star Wars" "Star Wars" "The Empire Strikes Back" "The Empire Strikes Back" <li>"Up"</li> "The Princess Bride" "The Princess Bride" </ol> Save orderedlists.html and view it noting numbered items. Save orderedlists.html and view it noting numbered items. Note: Letters can replace numbers using CSS (see TIPS, p. 175). Note: Letters can replace numbers using CSS (see TIPS, p. 175).

CSW131 Steven Battilana 10 Definition Lists [NOT IN BOOK] Definition lists are the least common list type, and use 3 sets of tags: definition list definition term (rather than item) definition description Definition lists are the least common list type, and use 3 sets of tags: definition list definition term (rather than item) definition description Right-click definitionlists.html, select Edit with Notepad++, and on a new line after type these 2 terms and definitions:<dl> Admiral Grace Hopper Admiral Grace Hopper Key pioneer in computers and programming. Key pioneer in computers and programming. <dt>ENIAC</dt> The first electronic, mechanical computer The first electronic, mechanical computer </dl> Save definition lists.html and view it noting the format. Save definition lists.html and view it noting the format. Notes: Consider indenting code. CSS can change the format/style. Notes: Consider indenting code. CSS can change the format/style.

CSW131 Steven Battilana 11 Style Lists (pp ) Like virtually anything else, lists can also be styled, with a good number of supporting properties and values. Indentations and the bullets themselves can be changed, as well as the numbering schemes. CSS list-style-type property allows values of disc (default), square, or circle. Common values for numbering schemes include lower-roman, upper- roman, lower-alpha, upper-alpha, decimal-leading-zero & decimal. Like virtually anything else, lists can also be styled, with a good number of supporting properties and values. Indentations and the bullets themselves can be changed, as well as the numbering schemes. CSS list-style-type property allows values of disc (default), square, or circle. Common values for numbering schemes include lower-roman, upper- roman, lower-alpha, upper-alpha, decimal-leading-zero & decimal. Within unorderedlists.html, on a new line before type: Within unorderedlists.html, on a new line before type: ul{ list-style-type: square; margin-left: 5px; padding-left: 5px; }</style> Save unorderedlists.html and view noting bullet and indent changes. Save unorderedlists.html and view noting bullet and indent changes. See TIPS, p. 177, to eliminate or customize bullets using images (see “Navigation” and “1way2float3” respectively on our class “Hot!” page). See TIPS, p. 177, to eliminate or customize bullets using images (see “Navigation” and “1way2float3” respectively on our class “Hot!” page).

CSW131 Steven Battilana 12 Replace List Bullet with a Custom Image [NOT IN BOOK] In addition to styling a list by changing the default bullet (like the last slide), the standard default bullets can be replaced by a custom image. Make sure the image used is an appropriate (proportional) size. In addition to styling a list by changing the default bullet (like the last slide), the standard default bullets can be replaced by a custom image. Make sure the image used is an appropriate (proportional) size. Right-click custombullets.html and Edit with Notepad++: Right-click custombullets.html and Edit with Notepad++:ul{ list-style-type: square; list-style-image: url('images/Gopherbullet.jpg'); margin-left: 5px; padding-left: 25px; } Save as custombullets.html and view the custom bullets. Save as custombullets.html and view the custom bullets. Again, see TIPS, p. 177, to eliminate or customize bullets using images (see “Navigation” and “1way2float3” on our class “Hot!” page). Again, see TIPS, p. 177, to eliminate or customize bullets using images (see “Navigation” and “1way2float3” on our class “Hot!” page).

CSW131 Steven Battilana 13 To Do List Read Chapter 7 Read Chapter 7 Revisit what we did in class Revisit what we did in class Be careful as we do not follow book Remember, MUCH more detail about anything we cover is: Remember, MUCH more detail about anything we cover is: at w3.org the Appendices of your book DOCUMENT Your Project DOCUMENT Your Project You should have turned in your draft plans and received them back already with comments. Remember, websites about one of your passions is usually a winner.