HTML Tables and Forms

DR. S. & S.S. GHANDHY
GOVERNMENT ENGINEERING
COLLEGE, SURAT
A Presentation on subject W.T.
(HTML Tables and Forms)

PRESENTED BY :
Prof J. J. Patel
(Faculty Guide)
Electronics & Communication Department
Name Enrollment number
Hinesh Miyani 180230111035
HTML Tables and Forms

TOPICS TO BE DISCUSSED:
 Introduction to HTML
 HTML Tables
 Spanning Multiple Rows and Cells
 Cell Padding and Spacing
 HTML Forms
 HTML Form Attributes
 HTML Form Elements
 HTML Input Types and Attributes

Introduction to HTML
What is HTML?
 HTML stands for Hyper Text Markup Language.
 HTML is the standard markup language for creating Web pages.
 HTML describes the structure of a Web page.
 We can apply this markup language to web pages to display
text, images, sound and movie files, and almost any other type
of electronic information.
 We use the language to format documents and link them
together, regardless of the type of computer with which the file
was originally created.

HTML Tables
 Tables represent tabular data
 A table consists of one or several rows
 Each row has one or more columns
 Tables comprised of several core tags:
 <table></table>: begin / end the table
 <tr></tr>: create a table row
 <td></td>: create tabular data (cell)
 Tables should not be used for layout
 Use CSS floats and positioning styles instead

HTML Tables
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
</tr>
<tr>
</tr>
</table>
 Content is placed within tables cells. A table cell is defined by
<td> and </td>.
 The border attribute defines how wide the table's border will be.

Table Heading
<table border="1">
<thead>
<th>Name</th>
<th>Salary</th>
</thead>
<tbody>
<tr>
<td>Ramesh Shah</td>
<td>5000</td>
</tr>
<tr>
<td>Amit Bhaskar</td>
<td>7000</td>
</tr>
</tbody>
</table>
 The <thead> tag is used to group header content in an HTML table.
 The <tbody> tag is used to group the body content in an HTML table.
 The <th> tag defines a header cell in an HTML table.

Spanning Multiple Rows and
Cells
<table border="1">
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</thead>
<tbody>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</tbody>
</table>
 We will use colspan attribute if we want to merge two or more columns into a
single column.
 Similar way we will use rowspan if we want to merge two or more rows.

Cell Padding and Spacing
<table border="1" cellpadding="20">
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
 There are two attributes called cellpadding and cellspacing which we
will use to adjust the white space in our table cells.
 The cellpadding represents the distance between cell borders and the
content within a cell.

Cell Padding and Spacing
<table border="1" cellspacing="10">
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
 The cellspacing attribute defines space between table cells.

HTML Forms
 <form> is just another kind of HTML tag
 HTML forms are used to create GUIs on Web pages
 Usually the purpose is to ask the user for information
 The information is then sent back to the server
 A form is an area that can contain form elements
 The syntax is:
<form parameters> ...form elements... </form>
 Form elements include: buttons, checkboxes, text fields,
radio buttons, drop-down menus, etc.
 Other kinds of HTML tags can be mixed in with the form elements
 A form usually contains a Submit button to send the
information in the form elements to the server.

The <form> tag
 The <form arguments> ... </form> tag encloses form elements
(and probably other HTML as well)
 The arguments to form tell what to do with the user input
 action="url" (required)
 Specifies where to send the data when the Submit button is clicked
 method="get" (default)
 Form data is sent as a URL with ?form_data info appended to the end
 Can be used only if data is all ASCII and not more than 100 characters
 method="post"
 Form data is sent in the body of the URL request
 target="target"
 Tells where to open the page sent as a result of the request
 target= _blank means open in a new window
 target= _top means use the same window

The <input> tag
 Most, but not all, form elements use the input tag, with a type="..."
argument to tell which kind of element it is
 type can be text, checkbox, radio, password, hidden, submit, reset, button,
file, or image
 Other common input tag arguments include:
 name: the name of the element
 value: the “value” of the element; used in different ways for different values
of type
 readonly: the value cannot be changed
 disabled: the user can’t do anything with this element
 Other arguments are defined for the input tag but have meaning only for
certain values of type

Text input
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field:
<textarea name="textarea" cols="24" rows="2"></textarea>
A password field:
<input type="password" name="textfield3" value="secret">

Buttons
<div>A submit button:
<input type="submit" name="Submit" value="Submit">
</div>
<br>
<div>A reset button:
<input type="reset" name="Submit2" value="Reset">
</div>
<br>
<div>A plain button:
<input type="button" name="Submit3" value="Push Me">
</div>
 submit: send data
 reset: restore all form elements to
their initial state
 button: take some action as specified
by JavaScript

Checkboxes
A checkbox:
<input type="checkbox" name="checkbox” value="checkbox" checked>
 type: "checkbox"
 name: used to reference this form element from JavaScript
 value: value to be returned when element is checked
 Note that there is no text associated with the checkbox—you have to
supply text in the surrounding HTML

Radio buttons
Radio buttons:
<br>
<input type="radio" name="radiobutton" value="myValue1" checked>
Male
<br>
<input type="radio" name="radiobutton" value="myValue2" >
Female
 If two or more radio buttons have the same name, the user can only select one of
them at a time
 This is how you make a radio button “group”
 If you ask for the value of that name, you will get the value specified for the
selected radio button
 As with checkboxes, radio buttons do not contain any text

Drop-down menu
A menu:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
 Additional arguments:
 size: the number of items visible in the list (default is "1")
 multiple: if set to "true", any number of items may be selected (default is
"false")

HTML Tables and Forms

Recommended

More Related Content

What's hot (20)

Similar to HTML Tables and Forms (20)

Recently uploaded (20)

HTML Tables and Forms