HTML Table and List

Table Tag
• The table tag displays information in rows and
columns.
• The <table> tag is a container tag
Table structure
 Rows

• The rows run horizontally from left to right. Our

table above has four rows. Here is the table with
the second row highlighted.
• a single row is represented by the <tr> tag.
 Columns
• The columns run vertically from top to bottom. The
table above has three columns. Here is the table
with the third row highlighted.
• A table column doesn’t have a specific tag.
However, in case you need to control a specific
column, there are certain Cascading Style Sheets
(CSS) tricks which you can use. We shall look at this
later.
 Cells
• The cells are the little boxes which make up the
table. This is where you insert your data. Our table
has 12 cells. Here is the table with the second cell in
the first row selected.
 Cell
• A single cell is represented by either a <td> or
<th> tag. A <td> tag (the “td” stands for “table
data”) is used for inserting data into the table.
A <th> tag (the “th” stands for “table header”)
is used for inserting headings into the table
Creating A Table
Output
 There are three key things you need to note
here:
• 1. The table begins and ends with the <table> tag.
This is what indicates to the browser to insert the
table.
• 2. Each row in the table is represented by the <tr>
tag. In fact, creating a table is often a matter of
stacking different rows, one on top of another.
• 3. Each cell in the table is represented by the <td>
tag. The contents of each cell is typed between the
opening and closing <td> tag.
Table Borders
Output
 Regions in a table

• HTML5 introduced a way of segregating a table

into regions: the head, body and foot. These
regions are represented by the following tags:
• <thead> – is the head of the table. This area
usually contains the column headings
• <tbody> – is the body of the table. The table data.
• <tfoot> – is the foot of the table. The summary,
other footer information goes here
Output
 <th> tag

• The th tag for heading cells

• Notice the <th> tag in the sample code above.
The th tag is used to mark the heading of the
row/column.
 Merging Cells

• It is possible to merge multiple cells in to one. You

do this by combining the cells into one cell.
See this table for example:
 Merging columns
• To merge different cells on a given row, you use the
“colspan” attribute of the
• tag. The colspan attribute takes a number as a value
(e.g. colspan= “5”). This number represents the
number of columns a given cell should cover (span).
<tr>
<td colspan="4">
Temperature Distribution In Jan – Apr 2015
</td>
</tr>
 Merging Rows
• In order to merge two or more cells in the same column, you use
the “rowspan” attribute. This attribute is similar to the colspan,
except that it applies to rows. For instance, the average
temperatures of February and March are merged as follows
<tr>
<td> February </td>
<td> 49 </td>
<td> 37 </td>
<td rowspan="2"> 43 </td>
</tr>
<tr>
<td> March </td>
<td> 52 </td>
<td> 39 </td>
</tr>
 Table Caption

• We used a single row to explain the purpose

of the table. It is possible to add a caption to
the table, which will be more semantically
right.
Cell padding and Cell spacing
Before Cell padding and cell spacing
 <colgroup> Tag
• 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.
• Note: The <colgroup> tag must be a child of a <table>
element, after any <caption> elements and before any
<thead>, <tbody>, <tfoot>, and <tr> elements.
• Tip: To define different properties to a column within a
<colgroup>, use the <col> tag within the <colgroup> tag.
Colgroup
Col
Text Alignment
 Assignment-1
Row 1 - Col 1 Row 1 - Col 2 Row 1 - Col 3

Row 2 - Col 1
Row 1, 2, 3 & 4 - Col 4
Row 3 - Col 1 Row 2, 3 & 4 - Col 2 & 3

Row 4 - Col 1

Row 5 - Col 1 & 2 Row 5 - Col 3 & 4

Row 6 - Col 1, 2, 3 & 4

 HTML Lists
• Unordered List
• Ordered List
• DeSCRIPTION List
 Unordered

• An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
• The list items will be marked with bullets (small black
circles) by default:
• Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Type Property
Value Description

disc Sets the list item marker to

a bullet (default)
circle Sets the list item marker to
a circle
square Sets the list item marker to
a square
none The list items will not be
marked
 Example
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul type=‘dics’>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
 Ordered List

• An ordered list starts with the <ol> tag. Each

list item starts with the <li> tag.
• The list items will be marked with numbers by
default:
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 Type Attribute
Type Description
type="1" The list items will be numbered
with numbers (default)

type="A" The list items will be numbered

with uppercase letters

type="a" The list items will be numbered

with lowercase letters

type="I" The list items will be numbered

with uppercase roman numbers

type="i" The list items will be numbered

with lowercase roman numbers
 Example 2
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul type=‘dics’>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<ul type=‘circle’>
<li>Apple</li>
<li>Mango</li>
</ul>
</ul>
</body>
</html>
 HTML Layouts
Header

Home

Aboutus
Amity University:
Registration

Contactus

@CopyRight
 Example-1
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
 Description Lists

• HTML also supports description lists.

• A description list is a list of terms, with a
description of each term.
• The <dl> tag defines the description list,
the <dt> tag defines the term (name), and
the <dd> tag describes each term:
 Example
<!DOCTYPE html>
<html>
<body>
<h2>A Desription List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
 Nested Lists
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Form
 Forms
• HTML Forms are required, when you want to collect
some data from the site visitor. For example, during
user registration you would like to collect information
such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will
post it to a back-end application such as PHP script etc.
The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.
• There are various form elements available like text
fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc.
 Form Syntax
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
• The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
• The form-data can be sent as URL variables (with method="get") or as
HTTP post transaction (with method="post").
• GET:
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user want to bookmark the result
• GET is better for non-secure data, like query strings in Google
• POST:
• Appends form-data inside the body of the HTTP request (data is not
shown is in URL)
• Has no size limitations
• Form submissions with POST cannot be bookmarked
 Form Attributes

Attribute Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET
and POST methods.
target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes
the data before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method
most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data
in the form of files like image, word file etc.
 Form Controls

• Text Input Controls

• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
 Text Input Controls
• There are three types of text input used on forms −
• Single-line text input controls − This control is used for
items that require only one line of user input, such as
search boxes or names. They are created using
HTML <input> tag.
• Password input controls − This is also a single-line text
input but it masks the character as soon as a user
enters it. They are also created using HTMl <input> tag.
• Multi-line text input controls − This is used when the
user is required to give details that may be longer than
a single sentence. Multi-line input controls are created
using HTML <textarea> tag.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br> Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
 Multiple-Line Text Input

• This is used when the user is required to give

details that may be longer than a single
sentence. Multi-line input controls are created
using HTML <textarea> tag.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here... </textarea>
</form>
</body>
</html>
Example
 Checkbox
• Checkboxes are used when more than one
option is required to be selected. They are
also created using HTML <input> tag but type
attribute is set to checkbox..
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
 Radio buttons
• Radio buttons are used when out of many
options, just one option is required to be
selected. They are also created using HTML
<input> tag but type attribute is set to radio.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
 Select Box Control

• A select box, also called drop down box which

provides option to list down various options in
the form of drop down list, from where a user
can select one or more options.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
 File Upload Box

• If you want to allow a user to upload a file to

your web site, you will need to use a file
upload box, also known as a file select box.
This is also created using the <input> element
but type attribute is set to file.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
 Button Controls
Sr.No Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form
controls to their initial values.

3 button
This creates a button that is used to trigger a client-side
script when the user clicks that button.

4 image
This creates a clickable button but we can use an image
as background of the button.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
 Date,Color,Email,number,range,
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
<input type="color" name="favcolor">
<input type="date" name="bday">
<input type="email" name="email">
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="points" min="0" max="10">
<input type="tel" name="usrtel">
</form>
</body>
</html>