Lab 5: HTML Tables And Forms Lab05 Instructions
User Manual:
Open the PDF directly: View PDF .Page Count: 25
LAB 5
(WEEK 4, CHAPTER 5 & 6)
HTML TABLES, FORMS AND
MEDIA
What You Will Learn
•
How to create HTML tables
•
How to style tables
•
How to create HTML forms
•
How to use the and elements
Approximate Time
The exercises in this lab should take approximately 80 minutes to complete.
2
Lab 5: HTML Tables and Forms
CREATING TABLES
PREPARING DIRECTORIES
1
If you haven’t done so already, create a folder in your personal drive for all the labs for
this course.
2
Unzip lab05 files to your course folder created in step one.
The element in HTML represents information that exists in a twodimensional grid. Tables can be used to display calendars, financial data,
pricing tables, and many other types of data. Just like a real-world table, an
HTML table can contain any type of data: not just numbers, but text, images,
forms, even other tables.
Exercise 5.1 — CREATE A BASIC TABLE
1
Open, examine, and test lab05-exercise01.html in browser.
2
Add the following markup to the document.
The Death of Marat
Jacques-Louis David
1793
162cm
128cm
Burial at Ornans
Gustave Courbet
1849
314cm
663cm
Fundamentals of Web Development
The indenting shown here is purely for clarity purposes (that is, it is there to help you
see the structure of the table more clearly). It is up to you whether you want to space
the table markup in the same fashion.
3
Test in browser.
4
Add the following markup.
Title
Artist
Year
Width
Height
The Death of Marat
...
This adds a heading row to the table.
5
Test in browser. The result should look similar to that shown in Figure 5.1.
Figure 5.1 – Exercise 5.1 Complete
Copyright © 2017 Randy Connolly and Ricardo Hoar
3
4
Lab 5: HTML Tables and Forms
Exercise 5.2 — COMPLEX CONTENT IN TABLES
1
Open, examine, and test lab05-exercise02.html in browser.
2
Add the following content to the table.
Work
Year
Size
The Death of Marat 1793
Width: 162cm
Burial at Ornans 1849
Width: 314cm
Betty de Rothschild 1848
Width: 142cm
Arrangement in Grey and Black 1871
Width: 144cm
Here we are adding content to an existing table structure. Notice that some cells
contain multiple HTML elements.
3
Test in browser. The result should look similar to that shown in Figure 5.2.
Figure 5.2 – Exercise 5.2 complete
Exercise 5.3 — SPANNING ROWS AND COLUMNS
1
Open, examine, and test lab05-exercise03.html in browser.
Copyright © 2017 Randy Connolly and Ricardo Hoar
5
6
2
Lab 5: HTML Tables and Forms
Add the following style to the of the document and test.
This will make the structure of the table more obvious.
3
Add the following two tags to the beginning of the table and test in browser.
Artist
Work Details
Jacques-Louis David
4
Add the following element at the beginning of the table.
Artist Inventory
Artist
The caption is used to provide a title for the table, which improves accessibility.
5
Test in browser. The result should be similar to that shown in Figure 5.3.
Fundamentals of Web Development
Figure 5.3 – Exercise 5.3 complete
Exercise 5.4 — ALTERNATE TABLE STRUCTURE ELEMENTS
1
Open, examine, and test lab05-exercise04.html in browser.
Notice that the element can be used in rows and columns.
2
Add the following attributes to the table headings.
Pricing Table
Free
Basic
Premium
Upload Space
50MB
Copyright © 2017 Randy Connolly and Ricardo Hoar
7
8
Lab 5: HTML Tables and Forms
200MB
Unlimited
Daily Uploads
1
10
Unlimited
Total Uploads
20
100
Unlimited
Social Sharing
Analytics
This improves the accessibility of the table.
3
Add the following around the first row.
Fundamentals of Web Development
Free
Basic
Premium
4
Test in browser. There is no special formatting for this element; instead we can apply
special styling to it.
5
Add the following element around the other table rows.
Upload Space
50MB
200MB
Unlimited
Daily Uploads
1
10
Unlimited
Total Uploads
20
100
Unlimited
Social Sharing
Copyright © 2017 Randy Connolly and Ricardo Hoar
9
10
Lab 5: HTML Tables and Forms
Analytics
Like with the element, there is no preset-browser formatting associated with
the element.
6
Add the following element between the and element.
Price per year
Free
$ 9.99
$ 19.99
7
Test in browser.
Notice the appears at the end of the table but should appear in the markup
before the element.
STYLING TABLES
Exercise 5.5 — SIMPLE TABLE STYLING
1
Open, examine, and test lab05-exercise05.html in browser.
2
Add the following style to the
.