Scribd
Upload
2 views

HTML Table

The document provides an overview of creating tables using HTML, including essential tags such as <table>, <tr>, <th>, and <td>. It outlines various attributes for table formatting, such as border, bgcolor, align, valign, cellpadding, and cellspacing, along with tasks for practical application. Additionally, it explains the concepts of rowspan and colspan for merging cells in tables.

Uploaded by

loveyappingshit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Table

The document provides an overview of creating tables using HTML, including essential tags such as <table>, <tr>, <th>, and <td>. It outlines various attributes for table formatting, such as border, bgcolor, align, valign, cellpadding, and cellspacing, along with tasks for practical application. Additionally, it explains the concepts of rowspan and colspan for merging cells in tables.

Uploaded by

loveyappingshit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like