Lab Manual for Computing Fundamental

Lab No. 11
Working with Tables in HTML

Objectives

Working with colspan, rowspan, cellspading and cellspacing in HTML

 LAB # 10
Working with tables and forms in HTML
Introduction
The Table Element
Tables can be used for more than just displaying a table of data. Tables can also be used as a
formatting tool. The data in a table can be text or images.
The <TABLE> element lets the browser know that a table follows. The attributes to the <table>
element apply to the table itself, not the data displayed in the table.
Attributes
Align—This attribute specifies the alignment of the table.
Width—This attribute specifies the width of the table, not the columns.
Border—The border attribute specifies that the border of the table should be drawn.
Cellspacing—This attribute specifies the spacing between cells
Cellpadding—This attribute specifies padding within cells.

Cell Spacing
Example:

CELL PADDING
Example:
Table Elements
The <TR> (TABLE ROW) Element
The <TR> is for defining table rows. Inside the <TR> element is found the table header and table
data element.
The <TH> (TABLE HEADER) and <TD> (TABLE DATA)
The <TH> and <TD> are the table cell element. They identify the data to be displayed in the
table. Each occurrence of <TH> or <TD> within a table row (<TR>) defines a new column
Attribute
Align—this attribute is used to define the left\right alignment for data displayed in the column.
Valign—this attribute is used to define the top\bottom alignment for the data displayed in each
column.
Width—this attribute is used to specify the width of the cell.
Height—this attribute is used to specify the height of the cell.
Colspan—this attribute is used to specify how many columns the cell is to span. The default
value is 1.
Rowspan—this attribute is used to specify how many rows the cell is to span. The default is 1.
Example # 1
ROWSPAN
Example # 2

Example # 3

COLSPAN
Example:
Form
Form elements are different types of input elements, like text fields, checkboxes, radio buttons,
submit buttons
Input Form

Type Description

Text One-line text input field

Radio Define the radio button for selecting one of many

choices

Submit Define a submit button for submitting a form

Example
TIMEBOXING:
Activity Name Activity Time Total Time
Instruments Allocation + Setting up Lab 10 mints 10 mints
Walk through Theory & Tasks (Lecture) 60 mints 60 mints
Implementation & Practice time 90 mints 80 mints
Evaluation Time 20 mints 20 mints
Total Duration 180 mints

Objectives/ Outcomes:
After completing this lab the student should be able to:
Clearly understand the purpose and benefits of Html.
Understand the concept of Html Basics.
Building basic Html pages using Html Basics.
Use and learn Sublime Text3 for building Html Pages.

Lab Tasks/Practical Work

1) Using RowSpan along with the Table tag, design the following tables:

a)

b)

2) Using ColSpan along with the Table tag, design the following tables:
 a)

b)

c)

3) Using the BGCOLOR attribute, along with ROWSPAN and COLSPAN design the
following table:
a)
 4) Design the following table by inserting the appropriate tags, URLs and images.

5) Create a login form using a Heading, text field, button and hyperlink tag.

6) Create a given Registration Form using HTML tags.