HTML: Tables

Tables

 It allow you to organize information on a web page

using HTML tags.
 Are useful in arranging web content into rows and
columns
 It consist of rows and columns, and cells, much
like spreadsheets
HTML Table Tags and their
Functions
Tag Function
<table> </table> Indicates the start and end of a table
All other table tags are inserted within
these tags.

<tr> </tr> Indicates the start and end of a table row

Rows consist of heading or data cells
<td> </td> Indicates the start and end of a data cell
in a table
Table Tag Attributes and Functions

Tag Attribute Function

<table> </table> align Controls table alignment (left | center| right)
bgcolor Sets background color for table
background Sets the background of the table using an image
border Defines the table border in pixels
height Sets the table height relative to the window width
width Sets the table width relative to the window height
cellspacing Defines space between cells in pixels
cellpadding Defines space within cells in pixels
<tr> </tr> align Horizontally aligns row (left | center | right )
bgcolor Sets background color for row
valign Vertically aligns row (top | middle | bottom)
width
height
Table Tag Attributes and Functions

Tag Attribute Function

<td> </td> align Indicates the start and end of a data cell in a table
bgcolor Sets background color for cell
background
colspan Sets number of columns spanned by a cell
rowspan Sets number of rows spanned by a cell
valign Vertically aligns cell (top | middle | bottom)
width
height
Example
<table border=“1” width=“760”>
<tr bgcolor=“gray”>
<td>Name</td>
<td>Address</td>
<td>Contact No<td>
</tr>
<tr>
<td>Juana</td>
<td>Bayambang, Pangasinan</td>
<td>09229877789<td> Output
</tr> Name Address Contact No
Juana Bayambang, 09229877789
Pangasinan
Example

<table border="1" width="400" height="250">

<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td> Output
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
Lab Activity 2.0
HTML: Forms
Form

 A form can contain input elements like text fields, checkboxes,

radio-buttons, submit buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label elements.

Form Elements
1. text fields
2. password fields
3. hidden fields
4. drop-down menus (combo/listbox)
5. radio buttons
6. checkboxes
7. textarea fields
8. button
9. submit/reset button
<input> tag

 The <input> tag is used to select user information.

An input field can vary in many ways, depending
on the type attribute. An input field can be a text
field, a checkbox, a password field, a radio button,
a button, and more.
<input> tag attributes
checked checked  Specifies that an input
element should be
preselected when the
page loads (for
type="checkbox" or
type="radio")
disabled disabled Specifies that an input
element should be
disabled when the page
loads
maxlength number Specifies the maximum
length (in characters) of
an input field (for
type="text" or
type="password")
name name Specifies a name for an
input element
<input> tag attributes
readonly readonly Specifies that an input field
should be read-only (for
type="text" or
type="password")
size number Specifies the width of an input
field
type button Specifies the type of an input
checkbox element
file
hidden
image
password
radio
reset
submit
text
value value Specifies the value of an input
element
Textbox, Radio and Checkbox
Textbox
<form>
First name:<input type="text" name="firstname“ maxlength=“12” size=“50”>
</form>

Radio Button
<form>
<input type="radio" name="sex" value="male" checked> Male
<input type="radio" name="sex" value="female"> Female
</form>

Checkbox
<form>
Favorite Vehicle
Bike<input type="checkbox" name="vehicle" value="Bike">
Car<input type="checkbox" name="vehicle" value="Car">
Airplane<input type="checkbox" name="vehicle" value="Airplane">
</form>
 Combo box and Listbox
Combo Box
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option> Listbox
<option value="audi">Audi</option>
<form>
</select> <select name="cars" multiple>
</form> <option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Password, Submit and Reset

Password
<input type="password" name="password">
Submit
<input type="submit" value="Submit">
Reset
<input type="submit" value="Submit">
Lab Activity 3.0

 Create a Reservation Page. Used html form tags and tables.