Introduction to CSC110

Transcript Introduction to CSC110

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
1
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 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 <body> type:
<table>
</table> [If saved & viewed, nothing appears yet]
More . . .
2
Add Data Tables (pp. 162-163 CONT.)
…and between the table tags enter the following rows & data:
<tr>
<td>Name</td>
<td>Department</td>
<td>Phone</td>
</tr>
<tr>
<td>Inara Serra</td>
<td>Public Relations</td>
<td>555-1234</td>
</tr>
<tr>
<td>Malcome Reynolds</td>
<td>Administration</td>
<td>555-1212</td>
</tr>
<tr>
<td>Jane Cobb</td>
<td>Security</td>
<td>555-4321</td>
</tr>
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).
3
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”
4
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>
<tr>
<tr>
<td>Simon Tam</td>
<td>Medical</td>
<td>555-5555</td>
</tr>
<td>Kaylee Frye</td>
<td>Facilities</td>
<td>555-4242</td>
</tr>
 Save tables.html and view it in a browser noting merged cells.
 Note: See TIPS at bottom of p. 167 for “merging” cells.
5
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.
6
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.
7
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>"Tik Tok", KeSha</li>
</ul>

 Save unorderedlists.html and view it noting bulleting items.
 See TIPS on changing bullet appearance and nesting bullets.
8
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>

 Save orderedlists.html and view it noting numbered items.
 Note: Letters can replace numbers using CSS (see TIPS, p. 175).
9
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.
10
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, upperroman, 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).
11
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).
12
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.
13

Introduction to CSC110

Transcript Introduction to CSC110

Directory