1 / 13

CSW 131 – Chapter 7 Adding Tables and Lists ( X/HTML )

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. Add Data Tables (pp. 162-163).

willow-roy
Download Presentation

CSW 131 – Chapter 7 Adding Tables and Lists ( X/HTML )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSW 131 – Chapter 7Adding Tables and Lists (X/HTML) Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

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

  3. Add Data Tables (pp. 162-163 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 <td> entry for each column. • Note: Do NOT use tables to layout web pages (use CSS).

  4. Format Tables with CSS (pp. 164-165) • 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 </head> type: <style type="text/css"> 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”

  5. Create Complex Tables (pp. 166-167) • Similar to “merging cells”, the attributes colspan merges cells along rows, and rowspan merges cells along columns. • Continuing on tables.html, before </table> type: <tr> <td colspan="3">Other Personnel</td> <!—[this merges the 3 cells as 1 cell on this row]--> </tr> • Save tables.html and view it in a browser noting merged cells. • Note: See TIPS at bottom of p. 167 for “merging” cells.

  6. Add a Header Row (pp. 168-169) • To make tables more meaningful (for traditional and visually challenged users), table headers, <th>, replace <td> in the first row and or column. They default as bold and centered. • Continuing on tables.html, replace the table data tags in the 1st row with table header tags: <tr> <th>Name</th> <th>Department</th> <th>Phone</th><tr> • 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 1st row of a table, and you can change the appearance using CSS.

  7. Add Table Sections (pp. 170-171) • Three table sections are available and used in this order: <thead>, <tfoot>, and <tbody>. In addition to giving meaning, for long tables that may be printed on more than 1 page, the <thead> and <tfoot> contents will print (on all pages). • Continuing on tables.html, on a new line after <table> type:<thead>, placing </thead> after the 1st </tr>…and on a new line after </thead>type: <tfoot> <tr> <td colspan="3">All numbers are area code 999</td> </tr> </tfoot>…and on a new line after </tfoot>type:<tbody>, placing </tbody> on a new line before </table> • 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.

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

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

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

  11. Style Lists (pp. 176-177) • 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 </head> type: <style type= "text/css"> ul { list-style-type: square; margin-left: 5px; padding-left: 5px; } </style> • 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).

  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. • 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. • Again, see TIPS, p. 177, to eliminate or customize bullets using images (see “Navigation” and “1way2float3” on our class “Hot!” page).

  13. To Do List • Read Chapter 7 • Revisit what we did in class • Be careful as we do not follow book • Remember, MUCH more detail about anything we cover is: • at w3.org • the Appendices of your book • 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.

More Related