Introduction to CSC110
Download
Report
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>
<!-- double quotes (" ") are NOT required above -->
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>
<!-- 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).
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