TABLES USING HTML
QUESTION?
In a class of 6 students there are 3
students who scored above average
and 2 students who scored average
and 1 student below average. How
will you statically represent the data?
Pre-assessment
Identify the tags used for the following:
Create a table
Create a row
Create a column
Create table header.
Learning Objective
Creating TABLE using HTML tags.
TABLE IN HTML
An HTML table is defined with
the <table> tag.
Each table row is defined with
the <tr> tag. A table header is defined
with the <th> tag. By default, table
headings are bold and centered. A table
data/cell is defined with the <td> tag.
TABLE IN HTML
TABLES IN HTML
TABLE IN HTML
TABLE IN HTML
TASK SHEET
1.Create a table with caption and content as shown.
2.Insert your favorite color for the border of the table. Also insert a
background color for the table and cells.
3. Change the width of the table and format the font color of the data
entered.
4. Add an image of mango inside any cell.
Attributes of TABLE
BORDER
BORDER COLOR
BGCOLOR
ALIGN & VALIGN
HEIGHT & WIDTH
CELLPADDING
CELLSPACING
ROWSPAN
COLSPAN
TABLE IN HTML
ALIGN
<table border ALIGN="CENTER">
<table border ALIGN=“RIGHT">
<table border ALIGN=“LEFT">
TABLE IN HTML
VALIGN
Any difference???
TABLES IN HTML
HEIGHT & WIDTH
<table border HEIGHT=“100” WIDTH=“200”>
CELLPADDING
Add space between cell value and cell edge.
CELLSPACING
Space between cells.
<table border HEIGHT=100 WIDTH=200 CELLPADDING="20"
CELLSPACING="20">
TASK SHEET
1.Create a table with caption and content as shown.
2.Align the table to center and add any background color.
3. Adjust the spacing of the table and table contents.
4. Align the contents of the table using appropriate attributes.
TABLES IN HTML
WATCH VIDEO
https://www.youtube.com/watch?v=TP4AD
khBj0E
TABLES IN HTML
Learning Objective
Creating TABLE using Rowspan
&
Colspan.
Any difference???
Collaborative Task
ROWSPAN
The rowspan attribute in HTML specifies the
number of rows a cell should span.
That is if a row spans two rows, it means it
will take up the space of two rows in that
table.
It allows the single table cell to span the
height of more than one cell or row.
ROWSPAN
COLSPAN
• The colspan attribute defines the number of
columns a table cell should span.
• The colspan attribute can be used in <td> and
<th>
• It allows the single table cell to span the width of
more than one cell or column.
• It provides the same functionality as “merge cell”
COLSPAN
TASK SHEET
I. Create the following tables as shown below.
II. Add a cookie image in the first table, in
the “COOKIE” cell.
III. Add a tooltip text for the image .
TASK SHEET-ROWSPAN
TASK SHEET-COLSPAN
