HTML Tables and

Forms

01
Module – 2 : HTML Tables and Forms 4
 Objectives
1 Introducing Tables
2 Styling Tables

3 Introducing Forms
4 FormControl
Elements

5 TableandForm
Accessibility 6 Microformats

17CS71-WTA Module – 2 : HTML Tables and

 Section1of6

INTRODUCING TABLES
17CS71-WTA Module – 2 : HTML Tables and
 HTML Tables
A grid of cells

A table in HTML is created using the <table>

element
Tables can be used to display:
•Many types of content
•Calendars, financial data, lists, etc…

•Any type of data

•Images

•Text

•Links

•Other tables

17CS71-WTA Module – 2 : HTML Tables and Forms

 HTML Tables
Example usages

17CS71-WTA Module – 2 : HTML Tables and

 Tables Basics
Rows and cells

•an HTML <table> contains any number of

rows (<tr>)
•each row contains any number of table data
cells (<td>)
• Content goes inside of <td></td> tags
<table>
<tr>
<td>The Death of Marat</td>
</tr>
conten
</table> t

17CS71-WTA Module – 2 : HTML Tables and

 A basic Example

17CS71-WTA Module – 2 : HTML Tables and

 With Table Headings

th

17CS71-WTA Module – 2 : HTML Tables and

 Why Table Headings

A table heading <th>

•Browsers tend to make the content within a
<th> element bold
•<th> element for accessibility (it helps those
using screen readers)
•Provides some semantic info about the row
being a row of headers

17CS71-WTA Module – 2 : HTML Tables and

 Spanning Rows and Columns
Span Span Span a Row

Each row must have

the same number of
<td> or
<th> containers. If you
want a given cell to
cover several columns
or rows,

use the colspan or

rowspan attributes

17CS71-WTA Module – 2 : HTML Tables and

 Using Tables for Layout
It works in many situations

• Popular in 1990s
• Results in table
bloat
• Not semantic
• Larger HTML
pages
• Browser quirks

17CS71-WTA Module – 2 : HTML Tables and

 Example Table layouts

17CS71-WTA Module – 2 : HTML Tables and

 Additional table tags
• <caption>
• <col>,<colgrou
p>
• <thead>
• <tfoot>
• <tbody>

17CS71-WTA Module – 2 : HTML Tables and

 Section2of6

STYLING TABLES
17CS71-WTA Module – 2 : HTML Tables and
 Styling Tables
The old way’sdeprecated

In HTML5 it is left to CSS, However legacy support for

deprecated HTML attributes still exist
 width, height—for setting the width and height of cells
 cellspacing—for adding space between every cell in the table
 cellpadding—for adding space between the content of the
cell
and its border
 bgcolor—for changing the background color of any table
element
background—for adding a background image to any table
element
align—for indicating the alignment of a table in relation to the
surrounding container

17CS71-WTA Module – 2 : HTML Tables and

 Styling Tables
Borders

17CS71-WTA Module – 2 : HTML Tables and

 Styling Tables
Padding and spacing

17CS71-WTA Module – 2 : HTML Tables and

 Styling Tables
Examples

17CS71-WTA Module – 2 : HTML Tables and

 Nth-Child
Nifty Table styling tricks: hover effect and zebra-stripes

17CS71-WTA Module – 2 : HTML Tables and

 Section3of6

INTRODUCING FORMS
17CS71-WTA Module – 2 : HTML Tables and
 HTML Forms
Richer wayto interact with server

Forms provide the user with an alternative way

to interact with a web server.
• Forms provide rich mechanisms like:
• Text input

• Password input

• Options Lists

• Radio and check boxes

17CS71-WTA Module – 2 : HTML Tables and

 Form Structure

17CS71-WTA Module – 2 : HTML Tables and

 How forms interact with servers

17CS71-WTA Module – 2 : HTML Tables and

 Query Strings
At the end of the day, another string

17CS71-WTA Module – 2 : HTML Tables and

 URL encoding
Special symbols

17CS71-WTA Module – 2 : HTML Tables and

 <form> element

Two essential features of any form, namely the

action
and the method attributes.
•The action attribute specifies the URL of the
server-side resource that will process the form
data
•The method attribute specifies how the query
string data will be transmitted from the browser to
the server.
• GET

• POST

17CS71-WTA Module – 2 : HTML Tables and

 GET vs POST

17CS71-WTA Module – 2 : HTML Tables and

 GET vs POST
Advantages and Disadvantages

 Data can be clearly seen in the address

bar.
 Data remains in browser history and
cache.
 Data can be bookmarked
Limit on the number of characters in the
form data returned.
POST
 Data can contain binary data.
 Data is hidden from user.
Submitted data is not stored in cache,
history, or bookmarks.
17CS71-WTA Module – 2 : HTML Tables and
 Section4of6

FORMS CONTROL ELEMENTS

17CS71-WTA Module – 2 : HTML Tables and
 Form-Related HTML Elements
Type Description

<button> Defines a clickable button.

<datalist> An HTML5 element form defines lists to be used with other form elements.

<fieldset> Groups related elements in a form together.

<form> Defines the form container.

<input> Defines an input field. HTML5 defines over 20 different types of input.

<label> Defines a label for a form input element.

<legend> Defines the label for a fieldset group.

<option> Defines an option in a multi-item list.

<optgroup> Defines a group of related options in a multi-item list.

<select> Defines a multi-item list.

<textarea> Defines a multiline text entry box.

17CS71-WTA Module – 2 : HTML Tables and

 Text Input Controls
Type Description
text Creates a single line text entry box. <input type="text" name="title" />

textarea Creates a multiline text entry box. <textarea rows="3" ... />

password Creates a single line text entry box for a password <input type="password" ... />

search Creates a single-line text entry box suitable for a search string. This is an HTML5 element.

<input type="search" …/>

email Creates a single-line text entry box suitable for entering an email address. This is an HTML5
element.

<input type="email" …/>

tel Creates a single-line text entry box suitable for entering a telephone. This is an HTML5
element.

<input type="tel" …/>

url Creates a single-line text entry box suitable for entering a URL. This is an HTML5 element.

<input type="url" … />

17CS71-WTA Module – 2 : HTML Tables and

 Text Input Controls
Classic

17CS71-WTA Module – 2 : HTML Tables and

 Text Input Controls
HTML5

17CS71-WTA Module – 2 : HTML Tables and

 HTML5 advanced controls
Pattern attribute

datalist

17CS71-WTA Module – 2 : HTML Tables and

 Select Lists
Chose an option, any option.

• <select> element is used to create a multiline

box for selecting one or more items
• The options are defined using the <option>
element

• can be hidden in a dropdown or multiple

rows of the list can be visible

• Option items can be grouped together via the

<optgroup> element.

17CS71-WTA Module – 2 : HTML Tables and

 Select Lists
Select List Examples

17CS71-WTA Module – 2 : HTML Tables and

 Which Value to send
Select Lists Cont.

The value attribute of the <option> element is

used to specify what value will be sent back to
the server.
The value attribute is optional; if it is not
specified, then the text within the container is
sent instead

17CS71-WTA Module – 2 : HTML Tables and

 Radio Buttons

Radio buttons are useful when you want the user

to select a single item from a small list of choices
and you want all the choices to be visible
• radio buttons are added via the <input
type="radio">
element

• The buttons are mutually exclusive (i.e., only one

can be chosen) by sharing the same name
attribute

• The checked attribute is used to indicate the

default choice

• the value attribute works in the same manner as

with the <option> element
17CS71-WTA Module – 2 : HTML Tables and
 Radio Buttons

17CS71-WTA Module – 2 : HTML Tables and

 Checkboxes

Checkboxes are used for getting yes/no or

on/off responses from the user.
• checkboxes are added via the <input
type="checkbox”>
Element

• You can also group checkboxes together by having

them share the same name attribute

• Each checked checkbox will have its value sent

to the server

• Like with radio buttons, the checked attribute can

be used to set the default value of a checkbox

17CS71-WTA Module – 2 : HTML Tables and

 Checkboxes

17CS71-WTA Module – 2 : HTML Tables and

 Button Controls
Type Description
<input type="submit"> Creates a button that submits the form data to the
server.
<input type="reset"> Creates a button that clears any of the user’s already
entered form data.

<input type="button"> Creates a custom button. This button may require

Javascript for it to actually perform any action.

<input type="image"> Creates a custom submit button that uses an image for
its
display.
<button> Creates a custom button. The <button> element
differs
from <input type="button"> in that you can
completely customize what appears in the button;
using it, you can, for instance, include both images
and text, or skip server-side processing entirely by
using hyperlinks.
You can turn the button into a submit button by using
the type="submit" attribute.

17CS71-WTA Module – 2 : HTML Tables and

 Button Controls

17CS71-WTA Module – 2 : HTML Tables and

 Specialized Controls
I’m so special

• <input type=hidden>
• <input type=file>

17CS71-WTA Module – 2 : HTML Tables and

 Number and Range

Typically input values need be validated.

Although server side validation is required,
optional client side pre-validation is good
practice.
The number and range controls Added in
HTML5 provide a way to input numeric
values that eliminates the need for JavaScript
numeric validation!!!

17CS71-WTA Module – 2 : HTML Tables and

 Number and Range

17CS71-WTA Module – 2 : HTML Tables and

 Color

17CS71-WTA Module – 2 : HTML Tables and

 Date and Time Controls

Dates and times often need validation

when gathering this information from a
regular text input control.
From a user’s perspective, entering dates can
be tricky as well: you probably have
wondered at some point in time when
entering a date into a web form, what format
to enter it in, whether the day comes before
the month, whether the month should be
entered as an abbreviation or a number, and
so on.

17CS71-WTA Module – 2 : HTML Tables and

 HTML5 Date and Time Controls

17CS71-WTA Module – 2 : HTML Tables and

 HTML5 Date and Time Controls

17CS71-WTA Module – 2 : HTML Tables and

 HTML Controls
Type Description

date Creates a general date input control. The format for the date is "yyyy-mm-dd".

time Creates a time input control. The format for the time is "HH:MM:SS", for
hours:minutes:seconds.

datetime Creates a control in which the user can enter a date and time.

datetime-local Creates a control in which the user can enter a date and time without specifying a time
zone.

month Creates a control in which the user can enter a month in a year. The format is "yyyy-
mm".

week Creates a control in which the user can specify a week in a year. The format is "yyyy-
W##".

17CS71-WTA Module – 2 : HTML Tables and

 Other Controls
You mean there’s more

• The <progress> and <meter> elements can be

used to provide feedback to users,
• but requires JavaScript to function dynamically.

• The <output> element can be used to hold

the output from a calculation.
• The <keygen> element can be used to
hold a private key for public-key
encryption

17CS71-WTA Module – 2 : HTML Tables and

 Section5of6
TABLE AND FORM
ACCESSIBILITY
17CS71-WTA Module – 2 : HTML Tables and
 Web Accessibility

Not all web users are able to view the content on web
pages in the same manner.
The term web accessibility refers to the assistive
technologies, various features of HTML that work with
those technologies, and different coding and design
practices that can make a site more usable for people
with visual, mobility, auditory, and cognitive disabilities.
In order to improve the accessibility of websites, the
W3C created the Web Accessibility Initiative (WAI)
• Web Content Accessibility Guidelines

17CS71-WTA Module – 2 : HTML Tables and

 Web Content Accessibility
Guidelines
• Provide text alternatives for any nontext
content so that it can be changed into other
forms people need, such as large print, braille,
speech, symbols, or simpler language.
• Create content that can be presented in
different ways (for example simpler layout)
without losing information or structure.
• Make all functionality available from a
keyboard.
• Provide ways to help users navigate, find
content, and determine where they are.

17CS71-WTA Module – 2 : HTML Tables and

 Accessible Tables

1. Describe the table’s content using the

<caption> element
2. Connect the cells with a textual description in
the header

17CS71-WTA Module – 2 : HTML Tables and

 Accessible Forms

Recall the <fieldset>, <legend>, and <label>

elements.
Each <label> element should be associated
with a single input element.

17CS71-WTA Module – 2 : HTML Tables and

 Section6of6

MICROFORMATS
17CS71-WTA Module – 2 : HTML Tables and
 Microformats

A microformat is a small pattern of HTML markup

and attributes to represent common blocks of
information such as people, events, and news
stories so that the information in them can be
extracted and indexed by software agents

17CS71-WTA Module – 2 : HTML Tables and

 Microformat

17CS71-WTA Module – 2 : HTML Tables and

 What you’ve learned
1 Introducing Tables
2 Styling Tables

3 Introducing Forms
4 FormControl
Elements

5 TableandForm
Accessibility 6 Microformats

17CS71-WTA Module – 2 : HTML Tables and

 Chapter7

A D V A N C ED CSS: LAYOUT
17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd
 Approaches to CSS Layout
Fixed Layout

In a fixed layout , the basic width of the design is

set by the designer, typically corresponding to
an “ideal” width based on a “typical” monitor
resolution.
The advantage of a fixed layout is that it is
easier to produce and generally has a
predictable visual result.

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Approaches to CSS Layout
Fixed Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Approaches to CSS Layout
Problem with Fixed Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Approaches to CSS Layout
Liquid Layout

Liquid layout (also called a fluid layout) widths are

not specified using pixels, but percentage values
The advantage of a liquid layout is that it
adapts to different browser sizes
Creating a usable liquid layout is generally
more difficult than creating a fixed layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Approaches to CSS Layout
Liquid Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Responsive Layouts

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
4 elements

1. Liquid layouts
2. Setting viewports via the <meta> tag
3. Customizing the CSS for different viewports
using media queries
4. Scaling images to the viewport size

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Setting Viewports

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Setting Viewports

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Media Queries

A media query is a way to apply style rules

based on the medium that is displaying the file

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Media Queries

• width: Width of the viewport

• height: Height of the viewport
• device-width: Width of the device
• device-height: Height of the device
• orientation: Whether the device is
portrait or landscape
• color: The number of bits per color

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Media Queries

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Responsive Design
Responsive Design Patterns

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 Flexbox Layout

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 CSS Frameworks and Preprocessors
Grid in print design

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 CSS Frameworks and Preprocessors
Using Bootstrap

<head>
<link href="bootstrap.css” rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
left column
</div>
<div class="col-md-7">
main content
</div>
<div class="col-md-3">
right column
</div>
</div>
</div>
</body>

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd

 CSS Frameworks and Preprocessors
CSS Preprocessors

17CS71-WTA Module – 2 : HTML Tables and Forms - 2nd