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.
[Link]
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
[Link]
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
• [Link]
[Link] 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
• [Link]
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)
• [Link]
• 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.
