LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and

LESSON 3

Coding Tables Continued

Lesson Learning Targets

• I can create a Web page table that displays text and / or

images.

• I can create a Web page table that serves as a menu bar.

Creating the Secondary

(New Releases) Web Page

Starting Notepad

• Open Notepad++

• Save in Folders:

HTML and JS Unit 3 – Tables In Class Project

• Save As: newreleases.html

Enter in HTML Skeleton

<!DOCTYPE>

<html>

<head>

<title>Bell Video – New Releases</title>

</head>

<body>

</body>

</html>

Add Skeleton

• Inside the body tags – immediately add the following code.

<body>

<img src = “bellvideologo.jpg" width="596“

height="93“ />

</body>

Add Bell Video Image to Top!

Creating a Horizontal Menu Bar with Text Links

Insert a Table with 1 Row and 7 Columns (Each Word Gets a Column and Each “I”

Gets a Column)

Thinking Through the First Table

Table Requirements(color coded with

next slide):

1) Borderless

2) 1 Row – all cells in row are centered

3) 7 Columns

4) Want it to take up 60% of the width of

the browser

Creating a Horizontal Menu Bar with Text Links

• After the <img/> tag, type the following:

<br />

<table border="0" cols="7” width="60%">

<tr align="center">

</tr>

</table>

Thinking Through Row 1

Row Requirements:

1) 7 Columns – each with word or “|”

2) All Data Cells

3) Each have a varying width % of the

table

Add Cell 1 and Cell 2

• After the <tr> tag, type the following:

<tr align="center">

<td width="20%"><a href =

“bellvideohome.html">Home</a></td>

<td width="1%">|</td>

Add Cells, 3, 4, 5, 6

• (continue)

<td width="25%"><a =href="newreleases.html">New

Releases</a></td>


<td width="15%"><a

href="actor.html">Actor</a></td>


<td width = “15%”><a

href=“type.html”>Type</a></td>

What you Should See So Far

Creating a Table with Borders

Thinking Through the Second Table

Table Requirements:

1) Border = 5 pixels

2) 5 Rows – 1 heading, 4 data

3) 3 Columns

4) Want it to take up 80% of the width of

the browser

Creating Table Outline

• After the horizontal menu table just added, create a new table and the first row of headings:

<br />

<table cols="3" border="5" width="80%">

<tr>

</tr>

<tr>

</tr>

Creating Table Outline

• (continued)<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>


Row 1 Requirements:

1) 3 Heading Cells – will default to

center alignment

**will use <th> tags**

2) Background color = blue

Edit Row 1

• Edit the code for the first row

<tr bgcolor="blue">

<th><font color="white” size="+1"> Title</font></th>

<th><font color="white” size="+1">

Actor(s)</font></th>

<th><font color="white” size="+1">

Description</font></th>

</tr>


Row 2, 3, 4 Requirements:

1) 3 data Cells **will use <td> tags**

**NOTE – when define the width of the cells

(percentage wise%) in one row – applies to

all rows**

Edit Row 2

• Edit second row of text:<tr>

<td width="25%">Good Night,

<br />and Good Luck</td>

<td width="30%">David Strathairn

<br />George Clooney</td>

<td width="45%">Nostalgic black and white used to show period authenticity.</td>

</tr>

Edit Row 3

• Edit third row of text:

<tr>

<td>Walk the Line</td>

<td>Joaquin Phoenix<br />

Reese Witherspoon</td>

<td>The music is compelling; the

lives are riveting.</td>

</tr>

Edit Row 4

• Edit the fourth row of text:

<tr>

<td>The Constant Gardener</td>

<td>Rachel Weisz

<br />Ralph Fiennes</td>

<td>Flashback structure enhances

this mystery as it circles

around a conspiracy.</td>

</tr>

Edit Row 5

• Create the fifth row of text and end the table:

<tr>

<td>Cinderella Man</td>

<td>Paul Giamatti

<br />Russell Crowe</td>

<td>A movie where a good man

prevails despite odds

against him.</td>

</tr>

Special Note When Designing tables

• As many rows of text can continue to be added as you need

• You ONLY need to specify and know number of columns

ahead of time because this MUST be specified in the <table> tag

What you Should Now See!

Testing Links in a Web Page – DO They Work?

• Click the Home link in the horizontal menu bar on the New

Releases Web page

• Click the New Releases link in the vertical menu bar on

the home page to return to the New Releases Web page

• Click the Type link in the horizontal menu bar on the New

Releases Web page

• Click the Actor link in the horizontal menu bar on the Type

Web page

Testing Links in a Web Page

Project 4: Creating Tables in a Web

Site

33

Displaying Rules within a

Table

Displaying Rules In Table

• Rules Attribute

• used to create horizontal or vertical lines within a

table (around the individual cells)

• Insert inside the <table> tag

• rules=“cols” shows vertical lines

• rules=“rows” shows horizontal lines

• rules=“none” shows no lines


• Displaying Vertical Rules

• Add the following into the <table> tag

<br />

<table cols=“3" border="5“ rules=“cols”

width="80%">

<tr bgcolor="blue">

**Now Refresh your browser – what do you

see?**


• Displaying Vertical Rules


• Displaying Horizontal Rules

• Change the following in the <table> tag

<br />

<table cols=“3" border="5“ rules=“rows”

width="80%">

<tr bgcolor="blue">


see?**


• Displaying Horizontal Rules


• Displaying No Rules

• Change the following in the <table> tag

<br />

<table cols=“3" border="5“ rules=“none”

width="80%">

<tr bgcolor="blue">


see?**



• Special Note

• Be Default a table will display all rules

• If you want something different – you must specify

Practice

Worksheet 3C

LESSON 4

Coding Tables Continued (Cell spacing, padding,

captions, and spanning)

Lesson Learning Targets

• I can format a Web page table with cell padding and cell

spacing.

• I can format a Web page table using cell spanning to

combine cells across a row or column.

Adding Cellspacing,

Cellpadding, and a Caption

Cell Formatting

• Cell Formatting

• By default, the size of each data cell fits the

minimum size for the inserted text

Cell Formatting

• Cell Padding : cellpadding

• Defines the number of pixels of space within a

cell of a table (white space inside the cell)

• Cell Spacing : cellspacing

• Defines the number of pixels of space between

cells in a table (width of the cell borders)

Compare

Can Make Tables Look Nicer

Opening an HTML File

• Open actor.html file in NotePad (downloaded

from my classroom website and saved with the other

files

BEFORE

Cellspacing, Cell padding, and table Caption

AFTER

Cellspacing and Cell padding, and Caption

Adding Cellspacing and Cellpadding to a Table

• Find the table immediately after the horizontal menu; make

the following changes:

<table border="5" cellspacing=“2”

cellpadding=“5” cols="4"

width="70%">

<tr bgcolor="blue">

<th><font color="white"

size=+1>Actor</font></td>

...

Adding a Table Caption

• A caption helps clarify the purpose of the table

• Immediately before the end of the table, find the text



• Replace the comment with:

<caption align=“bottom”><em>Listing of

movies by actor</em></caption>

**note this tag is nested INSIDE the table

tag**

55

Table Caption

56

Start Tag Purpose End Tag

<caption> - Place inside the table tags

- Will place a “caption” around table

- Used to provide clarification to table

- Can use align attribute to choose location around

table (top, bottom)

</caption>

Table after Cellspacing and Cell padding, and

Caption

Saving and Printing the HTML File and Viewing and

Printing the Web Page


Site

58

Spanning Rows and

Columns

Spanning Rows and Columns

• Cell Spanning

• Merging several cells into a single cell

• An attribute of the <th> or <td> tags

**This is where planning becomes

extremely IMPORTANT**

Spanning Rows and Columns

• Column Spanning Attribute: colspan

• Defines the number of columns spanned by

a cell

• Row Spanning Attribute : rowspan

• Defines the number of rows spanned by a

cell

Table without Cell Spanning

Table with Cell Spanning

Adds to the visual Appearance of a Table!!

Practicing Spanning

• Write the basic code to create the cell spanning on the

table on the next slide (we’ll add in attributes later)

Opening an HTML File

• Open type.html (should be downloaded from

my classroom website)

We Want to Span 3 columns in the first Row Together

• The first cell in the first row – spans three columns

• Add colspan=“3” as an attribute to this cell

• We will then only program ONE CELL for this row

Creating the First Heading

That Spans Columns• Find the end of the table with the horizontal menu bar; insert

the follow (in yellow):

<br />

<table border="5" cellspacing="2“

cellpadding="5" cols="2"

width="80%">

<tr>

<th colspan="3" bgcolor="blue">

<font color="white" face=“Chaucer“

size="+2">Movies by Type</font>

</th>

</tr>

Span 2 Rows• In row 2 – first cell with rowspan=“3”

• In row 3&4 – the first cell will already be accounted for (in row 2) so when

we program we start with cell 2

• In row 5 – first cell with rowspan=“3”

• In row 6&7 – the first cell will already be accounted for (in row 5) so when

we program we start with cell 2

Creating the First Heading

That Spans Columns

• After the movies by Type Row add the following

</tr>

<tr>

<th rowspan="3" width="20%"

bgcolor="black">

<font color="#ffffff“

size="+1">Drama</font>

</th>

Span 2 Rows• Notice after Drama – in Row 2

• Title-Actor(s) spans 2 columns – so needs colspan=“2”

Add next 2 cells in row 2

• After the Drama Cell – complete the row with the following

<th colspan="2" bgcolor="gainsboro">

<font color="blue" size="+1">Title

- Actor(s)</font>

</th>

</tr>

Add the next two rows

Remember- on the next two rows – the first cell is already

taken up by cell spanning

<tr>

<td>Good Night, and Good Luck</td>

<td>David Strathairn</td>

</tr>

<tr>

<td>The Constant Gardener</td>

<td>Rachel Weisz<br />Ralph Fiennes</td>

</tr>

What you should see!

Add Comedy RowSpan

• After the 3rd row (drama movies) Insert the following to

span Comedy over two rows

<tr>

<th rowspan="3" width="20%"

bgcolor="black">

<font color="#ffffff" size="+1">Comedy

</font>

</th>

Creating the Second Heading

That Spans Columns

• Complete row 5 – Title – Actor(s) spans 2 columns

<th colspan="2" bgcolor="gainsboro">

<font color="blue" size="+1">Title

- Actor(s)</font>

</th>

</tr>

Add the next two rows

Remember- on the next two rows – the first cell is already

taken up by cell spanning

<tr>

<td>The Wedding Crashers</td>

<td>Owen Wilson</td>

</tr>

<tr>

<td>Napoleon Dynamite</td>

<td>Jon Heder</td>

</tr>

What you Should Now See!


Site

81

Homework

• Worksheet 3D

DAY 6, 7, 8Project 3A Work Days!

DAY 9 & 10Review and Test!

Documents

LESSON 3 - MS WARDECKEmswardecke.weebly.com/uploads/1/7/1/6/17167688/unit_3... · 2018. 2. 11. · Lesson Learning Targets •I can create a Web page table that displays text and