HTML Tables and

Forms

Chapter 5

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Introducing Tables
Basic Table Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Basic Table Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Adding Headings

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Spanning Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Spanning Rows

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Additional Table Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Tables
Using Tables for Layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Styling Tables
Table Borders

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Styling Tables
Table Borders

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Styling Tables
Boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Styling Tables
Hover & Zebras

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Introducing Forms
Form Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Forms
How Forms Work

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Forms
Query Strings

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Forms
GET and POST

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Introducing Forms
HTML Form elements

• <button> • <legend>

• <datalist> • <option>

• <fieldset> • <optgroup>

• <form> • <select>

• <input> • <textarea>

• <label> • <output>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Form Control Elements
Text Input Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
New in HTML5 – pattern and datalist

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Choice Controls ( <select>)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Choice Controls <select> using value attribute

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Button Controls (radio)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Button Controls (checkbox)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Button Controls (checkbox)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Specialized Controls (file upload)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Specialized Controls (number and range controls)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Specialized Controls (colour)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Date and Time Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Form Control Elements
Date and Time Controls

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Table and Form Accessibility
Accessible Tables

• Use tables for data, not layout

• Use the <caption> element
• Connect cells with a textual description in the
header
<caption>Famous Paintings</caption>
<tr>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Width</th>
<th scope="col">Height</th>
</tr>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Table and Form Accessibility
Accessible Form

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Microformats

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Microformats
Schema.org

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Microformats
References

hCard, which is used to semantically mark up contact

information for a person
• http://microformats.org/wiki/hcard.
Schema.org aims to create and promote schemas for
structured data on the Web. Google’s on-line testing
tool helps developers test their semantic markup and
microformats
• https://search.google.com/structured-data/testing-
tool/u/0/

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Chapter 5
1 Introducing
Tables 2 Styling Tables

3 Introducing
Forms 4 Form Control
Elements

5 Table and Form

Accessibility 6 Microformats

8
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Summary
Key Terms

• checkbox • radio • Web

buttons Accessibility
• colspan
• rowspan • Initiative
• form
(WAI)
• schema.org
• GET
• table
• hCard
• URL
• microformat
encoded
• POST • web
• query string accessibility

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

 Questions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.