LESSON :
TABLES IN HTML
OBJECTIVES
• Explain the default structure of a table
• State and explain various table attributes
• Design an HTML page that contain at least a table.
PREVIOUS KNOWLEDGE
•
Structure of an HTML page
•
Basic HTML tags and attributes
•
Design simple webpages using HTML
REAL LIFE APPLICATION
Peter runs an electronic shop in the city of Yaoundé. He buy and sells computers
of various brands, all types of smartphones, tablet, watches and networking
devices. He is used to marketing his products on his Facebook page and
WhatsApp status. He recently attended an entrepreneurial business summit, and
the concept of having a business website got his attention.
Peter is determine to learn how to build a website and he was advised start with
front end development, using HTML and CSS.
You have been hired by Peter to help teach him the basics of web development.
Your first task is to explain briefly what HTML is, show him how to write the
and run a webpage. By the end of the session, Peter should be to develop a
simple webpage using basic HTML tag.
PRESENTATION OF CONCEPTS
TABLES
A table is a structured set of data made up of rows and columns. example
INPUT
DEVICES
OUTPU
DEVICES
STORAGE
DEVICES
Mouse
Monitor
Hard disk
Keyboard
Printer
Flash drive
Microphone
Speaker
SD Card
USING THE TABLE TAG
The <table> tag is used to create a table in HTML.
The syntax of creating a table is
<table border>
<tr>
<td> </td>
</tr>
</table>
• <table> element is used to create the table
• Border: It specifies the thickness of the table borders
• <tr>: It stands for table row. A table is define one row after
the other. At the end of the row you use a closing </tr> tag.
• <td>: Each cell of a table is represented using a <td> element.
(The td stands for table data). At the end of each cell you use
a closing </td> tag.
EXAMPLE
TABLE HEADING
A table heading is defined using the <th> data, which replaces the <td> tag in the
cell we wants to make it a heading.
INPUT
DEVICES
Mouse
OUTPU
DEVICES
Monitor
STORAGE
DEVICES
Hard disk
Keyboard
Printer
Flash drive
Microphone
Speaker
SD Card
EXAMPLE
HEIGHT AND WIDTH ATTRIBUTE
The height and width attribute is used in the <table> or <td> tag to set the size of
the table or a cell. The syntax is
• <table border=“value” height=“value” width=“value”>
• <td height=“value” width=“value”>
EXAMPLE
SPANNING COLUMNS
This is the act of merging two or more columns into a single column. This is done using
the colspan attribute. The syntax is
• <td colspan=“value”>
EXAMPLE
16
ICT UPPER SIXTH
LESSON: TABLES IN HTML
SPANNING ROW
This is the act of merging two or more rows
into a single row. This is done using the
rowspan attribute. The syntax is
• <td rowspan=“value”>
Date : 2022
Copyright February 2022 MINESEC
IP - CSC
EXAMPLE
CHANGING TABLE AND CELL BACKGROUND COLOR
The background color of the table or a cell can be changed using the bgcolor attribute in
the <table> or <td> tags respectively. The syntax is;
• <table bgcolor=“color”>
• <td bgcolor=“color”>
EXAMPLE
TABLE CAPTION
• provide a description about the data represented in the table. The caption can either
be placed at the top of the table or the bottom and by default it will always be
centered.
• To insert a caption into a table, use the <caption> </caption> tag.
EXAMPLE
22
CELLSPACING AND CELLPADDING ATTRIBUTE
• The cellspacing attribute defines space between table cells. The attribute is
cellspacing = “value“
• cellpadding represents the distance between cell borders and the content within a
cell. the attribute is
cellpadding = “value"
EXAMPLE