Web Module 2

HTML TABLES AND FORMS
MODULE 2
INTRODUCING TABLES
• A table is a matrix of cells, each possibly having content
• The cells can include almost any element
• Some cells have row or column labels and some have data
• A table is specified as the content of a <table> tag
• A border attribute in the <table> tag specifies a border between the
cells
• If border is set to "border", the browser’s default width border is used
• The border attribute can be set to a number, which will be the border
width
• Without the border attribute, the table will have no lines!
• Tables are given titles with the <caption> tag, which can immediately
follow <table>
• Each row of a table is specified as the content
of a <tr> tag
• The row headings are specified as the content
of a <th> tag
• The contents of a data cell is specified as the
content of a <td> tag
<table border = "border">
<caption> Fruit Juice Drinks </caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
</table>
• Output:-
The rowspan and colspan attributes
• A table can have multiple levels of row or column labels in which one label
covers 2 or more secondary lables
– The colspan attribute specification in a table header or table data tag
tells the browser to make the cell as wide as the specified number of
rows below it in the table
<tr>
<th colspan = "3"> Fruit Juice Drinks </th>
</tr>
<tr>
<th> Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>
Styling tables
• borders can be assigned to both the <table> and the
<td> element using border property (they can also be
assigned to the <th> element as well).
• borders cannot be assigned to the <tr>, <thead>,
<tfoot>, and <tbody> elements.
• The border-collapse property. This property selects
the table’s border model.( collapsed border means
single border)
• Each cell has its own unique borders.You can adjust
the space between these adjacent borders via the
border-spacing property,
Example 1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</body>
</html>
• Cell padding specifies the space between the cell
content and its borders.
• To set the padding, use CSS padding property
• To add a caption to a table, use the <caption> tag
• Border spacing specifies the space between the cells.
• To set the border spacing for a table, use the
CSS border-spacing property
• If the table has collapsed borders, border-spacing has
no effect.
Example 3
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-spacing: 4px;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table >
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
<thead>,<tbody>,<tfoot>
• The <thead> tag is used to group header content in
an HTML table.
• The <thead> element is used in conjunction with
the <tbody> and <tfoot> elements to specify each
part of a table (header, body, footer).
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
• output
<colgroup> and <col>
• The <colgroup> tag specifies a group of one or more
columns in a table for formatting.
• The <colgroup> tag is useful for applying styles to
entire columns, instead of repeating the styles for
each cell, for each row.
• The <col> tag specifies column properties for each
column within a <colgroup> element.
• The <col> tag is useful for applying styles to entire
columns, instead of repeating the styles for each cell,
for each row.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,th, tr,td {
border: solid 1pt black;
border-collapse:collapse;
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: red;
}
</style>
</head>
<body>
<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd)
table rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</body>
</html>
Forms
• Forms provide the user with an alternative way to
interact with a web server.
• Forms provide a much richer mechanism. Using a
form, the user can enter text, choose items from
lists, and click buttons.
• A form is constructed in HTML in the same manner
as tables or lists: that is, using special HTML
elements.
• form is defined by a <form> element, which is a
container for other elements that represent the
various input elements within the form as well as
plain text and almost any other HTML element
How form works?
The <form> tag
• All of the components of a form are defined in the content of a <form>
tag
– The only required attribute of <form> is action, which specifies
the URL of the application that is to be called when the Submit button
is clicked
action= "http://www.cs.ucp.edu/cgi-bin/survey.pl"
• If the form has no action, the value of action is the empty string
(“ “)
The <input> Element
• The <input> element is the most important

form element.
• The <input> element can be displayed in
several ways, depending on the type attribute
Text Input
Text Input Controls
Example 1
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
name:<br>
<input type="text" name="firstname" size= "12">
<br>
Email:<br>
<input type="email" name="mailid">
<br>
password:<br>
<input type="password" name = “passwd" size= "12" maxlength="12"/>
</form>
</body>
</html>
The value attribute
• The value attribute specifies the initial value for an input field:
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
• Textarea
- created with <textarea>:
– Usually include the rows and cols attributes to specify the size of the text
area
– Default text can be included as the content of <textarea>
– Scrolling is implicit if the area is overfilled
example
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="/action_page.php">
<textarea placeholder="enter some text">
</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Grouping Form Data with <fieldset>
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<form action=" ">

<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
• <input type="text" placeholder="L#L #L#"
pattern="[a-z][0-9][a-z] [0-9][a-z][0-9]" />
Choice Controls
Select Lists
• The <select> element is used to create a multiline
box for selecting one or more items.
• The options (defined using the <option> element)
can be hidden in a dropdown list or multiple rows of
the list can be visible.
• Option items can be grouped together via the
<optgroup> element.
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<form action=" ">

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>select locations</h2>
<form action=" ">

<select name="places" >
<optgroup label="North America">

<option>Calgary</option>
<option>Los Angeles</option>
</optgroup>
<optgroup label="Europe">
<option>London</option>
<option>Paris</option>
<option>Prague</option>
</optgroup>
</select>
<br><br>
</form>
</body>
</html>
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.
• <input type="radio"> defines a radio button
Example
<!DOCTYPE html>
<html>
<body>
<h2>Gender</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
</body>
</html>
Checkboxes
Checkboxes –
To collect multiple choice input
– Every checkbox requires a name and value attribute, which is the
widget’s value in the form data when the checkbox is ‘checked’
• A checkbox that is not ‘checked’ contributes no value to the form
data
– By default, no checkbox is initially ‘checked’
– To initialize a checkbox to ‘checked’, the checked attribute must be
set to "checked"
<!DOCTYPE html>
<html>
<body>
<form action=" ">

<label>I accept the software license</label>
<input type="checkbox" name="accept" >
</form>
</body>
</html>
• Button elements
• Examples
Specialised controls
To upload a file
• The <input type="file"> defines a file-select field and a "Browse" button
for file uploads.
Example:-
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<form action=“ ">

Select a file: <input type="file" name="myFile"><br><br>
</form>
</body>
</html>
Number and Range
• HTML5 introduced two new controls for the input of
numeric values.
• When input via a standard text control, numbers
typically require validation to ensure that the user
has entered an actual number.
• Because the range of numbers is infinite, the
entered number has to be checked to ensure it is not
too small or too large.
• The <input type="number"> defines a numeric input field
<!DOCTYPE html>
<html>
<body>
<h1> number field</h1>

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
</body>
</html>
• The <input type="range"> defines a control for entering a number whose exact
value is not important
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<form action=" ">

Points:
<input type="range" name="points" min="0" max="10">
</form>
</body>
</html>
Color
• Not every web page needs the ability to get color
data from the user, but when it is necessary, the
HTML5 color control provides a convenient interface
for the user.
• The <input type="color"> is used for input fields that
should contain a color.
<!DOCTYPE html>
<html>
<body>
<h2>Color Picker</h2>
<form action=" ">

<label>Background Color: <br/>
<input type="color" name="bgcolor" />
</form>
</body>
</html>
Date and Time Controls
• HTML5 date and time controls
<!DOCTYPE html>
<html>
<body>
Birthday:
<input type="date" name="bday">
<br>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<br>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
</body>
</html>
Table and Form Accessibility
Accessible Tables
• Table content with <caption> element
• Connect cells with textual description in the header
Ex: <th scope=“col”>title</th>
Accessible Forms
<label for=f-title ........>title</label>
...
<input type=“text” name=“title” id=“f-title”/>
...
<select name=“where” id=“f-title”>
<option>.....</option>
</select>
Microformats
• hcard information
• Hnews information etc
Advanced CSS
Normal Flow
• normal flow, which refers here to how the browser
will normally display block-level elements and inline
elements from left to right and from top to bottom.
• Block-level elements such as <p>, <div>, <h2>, <ul>,
and <table> are each contained on their own line.
Because block-level elements begin with a line break
(that is, they start on a new line)
• Inline elements do not form their own blocks but
instead are displayed within lines. Normal text in an
HTML document is inline, as are elements such as
<em>, <a>, <img>, and <span>.
• In a document with normal flow, block-level
elements and inline elements work together as
shown in Figure.
• Block-level elements will flow from top to bottom,
while inline elements flow from left to right within a
block
• It is possible to change whether an element is block-
level or inline via the CSS display property.
• Consider the following two CSS rules:
span { display: block; }
li { display: inline; }
• These two rules will make all <span> elements
behave like block-level elements and all <li>
elements like inline
Positioning Elements
• The position property is used to specify the
type of positioning.
• The left, right, top, and bottom properties are
used to indicate the distance the element will
move; the effect of these properties varies
depending upon the position property
Static positioning
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the
top, bottom, left, and right properties.
• An element with position: static; is not positioned in
any special way; it is always positioned according to
the normal flow of the page:
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; </p>
<div class="static">
welcome to mite
</div>
</body>
</html>
Relative Positioning
• An element with position: relative; is positioned relative to its
normal position
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its

normal position:</p>
<div class="relative">
welcome to mite
</div>
</body>
</html>
example
Absolute Positioning
• When an element is positioned absolutely, it is
removed completely from normal flow.
• Thus, unlike with relative positioning, space is not
left for the moved element, as it is no longer in the
normal flow.
• Its position is moved in relation to its container
block.
example
Fixed Position
• Elements with fixed positioning do not move when
the user scrolls up or down the page
• The fixed position is most commonly used to ensure
that navigation elements or advertisements are
always visible.
Z-index
• The z-index property specifies the stack order of an
element.
• An element with greater stack order is always in front
of an element with a lower stack order.
• only positioned elements will make use of their z-
index.
div#myBox {
position:absolute;
background-color:red;
z-index:initial;
}
• z-index:1
• z-index:2
example
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>
</body>
</html>
Floating Elements
The float Property
• The float property can have one of the following
values:
left - The element floats to the left of its container
right- The element floats to the right of its container
none - The element does not float (will be displayed
just where it occurs in the text). This is default
inherit - The element inherits the float value of its
parent
• In its simplest use, the float property can be used to
wrap text around images.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will
wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpist.</p>
</body>
</html>
img {
float: left;
}
Clear property
• You can stop elements from flowing around a
floated element by using the clear property
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is
some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some
text. This is also some text. This is also some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
Overlaying and hiding elements
<!DOCTYPE html>
<html>
<head>
<style>
.overlayed{
position:relative;
top:10px;
left:10px;
}
</style>
</head>
<body>
<figure>
<img src="img_5terre.jpg" alt="Italy" width="200px" />
<figcaption>italy</figcaption>
<img src="img_forest.jpg" alt="Forest" width="100px" class="overlayed "/>
</figure>
</body>
</html>
• When position:absolute
<!DOCTYPE html>
<html>
<head>
<style>
.overlayed{
position:absolute;
top:10px;
left:10px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<figure>
<img src="img_5terre.jpg" alt="Italy" width="200px" />
<figcaption>italy</figcaption>
<img src="img_forest.jpg" alt="Forest" width="100px" class="overlayed hide"/>
</figure>
</body>
</html>
Constructing Multicolumn Layouts
• Using Floats to Create Columns
• Considering an example, The first step is to
float the content container that will be on the
left-hand side.
• Remember that the floated container needs to
have a width specified.
Creating two column layout-step 1
Creating two column layout-step 2
Creating a three-column layout
Using Positioning to Create Columns
Approaches to CSS Layout
• One of the main problems faced by web
designers is that the size of the screen used to
view the page can vary quite a bit.
• Fixed Layout
• The first approach is to use a fixed layout. In a
fixed layout, the basic width of thedesign is
set by the designer, typically corresponding to
an “ideal” width based on a “typical” monitor
resolution
• Fixed layouts are created using pixel units,
typically with the entire content within a <div>
container (often named "container", "main",
or "wrapper") whose width property has been
set to some width.
• The advantage of a fixed layout is that it is
easier to produce and generally has a
predictable visual result.
• The problem with fixed layouts is that they
don’t adapt to smaller viewports.
Liquid Layout
• The second approach to dealing with the problem
of multiple screen sizes is to use a liquid layout
(also called a fluid layout).
• In this approach, widths are not specified using
pixels, but percentage values
• The obvious advantage of a liquid layout is that it
adapts to different browser sizes, so there is
neither wasted white space nor any need for
horizontal scrolling
Disadvantages of liquid layouts
• Liquid layouts can be more difficult to create
because some elements, such as images, have
fixed pixel sizes.
• as the screen grows or shrinks dramatically, in
that the line length (which is an important
contributing factor to readability) may
become too long or too short.
Responsive Design
• In a responsive design, the page “responds”
to changes in the browser size that go beyond
the width scaling of a liquid layout.
• In a responsive layout, images will be scaled
down and navigation elements will be
replaced as the browser shrinks,
• There are four key components that make
responsive design work. They are:
1. Liquid layouts
2. Scaling images to the viewport size
3. Setting viewports via the <meta> tag
4. Customizing the CSS for different viewports
using media queries
Setting Viewports
• A key technique in creating responsive layouts
makes use of the ability of current mobile
browsers to shrink or grow the web page to fit
the width of the screen.
• The viewport is the user's visible area of a web
page.
• The viewport varies with the device, and will
be smaller on a mobile phone than on a
computer screen.
• Before tablets and mobile phones, web pages
were designed only for computer screens, and
it was common for web pages to have a static
design and a fixed size.
• HTML5 introduced a method to let web
designers take control over the viewport,
through the <meta> tag.
• <meta name="viewport" content="width=devi
ce-width” />
• A <meta> viewport element gives the browser
instructions on how to control the page's
dimensions and scaling.
• The width=device-width part sets the width of
the page to follow the screen-width of the
device (which will vary depending on the
device).
• since only setting the viewport as in Figure
shrank but still cropped the content, setting
the viewport is only one step in creating a
responsive design.
• There needs to be a way to transform the look
of the site for the smaller screen of the mobile
device, which is the job of the next key
component of responsive design, media
queries.
Media queries
• A media query consists of a media type and
can contain one or more expressions, which
resolve to either true or false
@media not|only mediatype and (expressions) {
CSS-Code;
}
• You can also have different stylesheets for
different media:
<link rel="stylesheet" media="mediatype and|n
ot|only (expressions)" href="print.css">
CSS Frameworks
• A CSS framework is a precreated set of CSS
classes or other software tools that make it
easier to use and work with CSS.
They are two main types of CSS framework:
• grid systems
• CSS preprocessors
Grid Systems
• Grid systems make it easier to create
multicolumn layouts.
• There are many CSS grid systems; some of the
most popular are
• Bootstrap (twitter.github.com/bootstrap),
• Blueprint (www.blueprintcss.org), and
• 960 (960.gs)
• The 960 framework uses either a 12- or 16-
column grid.
• Bootstrap uses a 12-column grid.
• Blueprint uses a 24-column grid.
• The grid is constructed using <div> elements
with classes defined by the framework.
• The HTML elements for the rest of your site
are then placed within these <div> elements.

Web Module 2

Uploaded by

Copyright:

Available Formats

Web Module 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Module 2

Uploaded by

Copyright:

Available Formats

HTML TABLES AND FORMS

• The <input> element is the most important

<h2>Grouping Form Data with Fieldset</h2>

<form action=" ">

<h2>The select Element</h2>

<form action=" ">

<form action=" ">

<optgroup label="North America">

<form action=" ">

<form action=“ ">

<h1> number field</h1>

<form action=" ">

<form action=" ">

<p>An element with position: static; </p>

<p>An element with position: relative; is positioned relative to its

<img src="w3css.gif" width="100" height="140">

<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">

<img src="w3css.gif" width="100" height="132">

You might also like