Computer Science 302:

Web Development

Gregory M. Kapfhammer

Up right corner flickr photo by vincentag shared under a Creative Commons (BY-NC-ND) license

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

flickr photo by SaurabhChatterjee shared under a Creative Commons (BY-NC-ND) license

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

Tables and Forms

What are the benefits?


Rows and Columns

See Table 5.2 for an Example

th and tr and td

Spanning Rows and Columns


Using Tables for Layout?

We won't pursue this option!

Styling tables

What can we style?

Styling tables






See Figure 5.9 for an styling example

Interactivity through forms

Form control elements

Form Choice Control

Select lists

Radio buttons


Button controls

Specialized controls

Risks of file upload controls?

Date and time controls

How do forms work?

See Figure 5.12 for an example

What if you do not have a database?

How do these methods work?

SEED Project as an example

Mailing list as an example

Let's dissect some forms!

Half of the class look at SEED

Other half look at mailing list

Draw part of the form on paper

Annotate the form with connected code

Responsive design with forms

Table and form accessibility

Why is accessibility important?

Who does accessibility benefit?

Web accessibility initiative

Questions about accessibility?

Questions about forms or tables?