INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
UNIT IV
Tables: Creating basic table, Table Elements, Caption – Table & Cell Alignment – Rowspan,
Colspan, cellpadding.
I - HTML TABLE
• HTML table tag is used to display data in tabular form (row & column).
Or
A table is a structured set of data made up of rows and columns (tabular
data).
• We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
• In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
• HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page .
Example: table:
[Link] CLASS DEPARTMENT REGNO
1 I BCA CS&CA C23CA141001
2 I BCA CS&CA C23CA141002
Table elements:
• <th>: The Table Header element
• <table>: The Table element
• <tr>: The Table Row element
• <td>: The Table Data Cell element
Table Arrtibutes:
1. Align: Specifies the horizontal alignment of the table within its parent
element.– left, right, center
2. bgcolor : Defines the background color of the table.
[Link] AP/CS VIAAS Page 1
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
3. border: Defines, as a non-negative integer value (in pixels), the size of the
frame surrounding the table.
4. cellpadding : Defines the space between the content of a cell and its
border.
5. cellspacing: Defines the size of the space between two cells.
6. width : Specifies the width of the table.
Steps to create HTML Table:
Step1: the content of every table is enclosed by these two
tags: <table></table>.
Add these inside the body of your HTML.
Ex: <boby>
<table> </table>
</boby>
Step2: The <tr> HTML element defines a row of cells in a table.
Ex: <boby>
<table>
<tr> </tr>
</table>
</boby>
Step3: The <th> HTML element defines a cell as the header of a group of table
cells and may be used as a child of the <tr> element.
Ex: <boby>
<table>
<tr>
<th>sno </th>
<th>Name </th>
<th>class</th>
</tr>
</table>
</boby>
Step4: The <td> HTML element defines a cell of a table that contains data and
may be used as a child of the <tr> element.
[Link] AP/CS VIAAS Page 2
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Ex: <boby>
<table>
<tr>
<th>sno </th>
<th>Name </th>
<th>class</th>
</tr>
<tr>
<td> 1 </td>
<td> Rakshita </td>
<td> BCA </td>
</tr>
</table>
</boby>
Example:
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table>
<tr>
<th>sno </th>
<th>Name</th>
<th>class</th>
</tr>
<tr>
<td> 1 </td>
<td> Rakshita </td>
<td> BCA </td>
</tr>
</table>
</boby>
</html>
[Link] AP/CS VIAAS Page 3
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Other Table Elements:
1. Caption
2. Boarder & bgcolor
3. Table & Cell Alignment
4. Rowspan
5. Colspan
6. cellpadding.
1. The <caption> HTML element specifies the caption (or title) of a table,
providing the table an accessible description.
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table>
<caption> Student Details</caption>
<tr>
<th>sno </th>
<th>Name</th>
<th>class</th>
</tr>
<tr>
<td> 1 </td>
<td> Rakshita </td>
<td> BCA </td>
</tr>
</table>
</boby>
</html>
2. Boarder & bgcolor: Defines, as a non-negative integer value (in pixels), the
size of the frame surrounding the table.
bgcolor : Defines the background color of the table.
[Link] AP/CS VIAAS Page 4
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table border="2" bgcolor="red">
<caption> Student Details</caption>
<tr>
<th>sno </th>
<th>Name</th>
<th>class</th>
</tr>
<tr>
<td> 1 </td>
<td> Rakshita </td>
<td> BCA </td>
</tr>
</table>
</boby>
</html>
3. Table & Cell Alignment:
• Table data defaults to left alignment; table headers to center.
• In order to change the alignment in one cell, insert the appropriate
"ALIGN=" attribute
Attribute Values
Attributes Descriptions
It sets the left align to the table. It is a
left
default value.
right It sets the right align to the table.
center It sets the center align to the table.
[Link] AP/CS VIAAS Page 5
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table border="2" align="center">
<caption> Student Details</caption>
<tr>
<th>sno </th>
<th>Name</th>
<th>class</th>
</tr>
<tr>
<td> 1 </td>
<td> Rakshita </td>
<td> BCA </td>
</tr>
</table>
</boby>
</html>
4. 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.
• It provides the same functionality as “merge cell” in a spreadsheet program
like Excel.
[Link] AP/CS VIAAS Page 6
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table border="2" >
<caption> Student Details</caption>
<tr>
<th>Name</th>
<th>class</th>
</tr>
<tr>
<td> Rakshita </td>
<td rowspan="2" > BCA </td>
</tr>
<tr>
<td> Sweatha </td>
</tr>
</table>
</boby>
</html>
5. colspan:
• HTML Table with Colspan allows you to merge or combine adjacent table
cells horizontally, creating a single, wider cell that spans across multiple
columns.
• Note: The colspan is defined as the <th> element.
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
[Link] AP/CS VIAAS Page 7
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
<boby>
<table border="2" >
<caption> Student Details</caption>
<tr>
<th colspan="2">Name</th>
<th>class</th>
</tr>
<tr>
<td> Rakshita </td>
<td > BCA </td>
</tr>
<tr>
<td> Sweatha </td>
<td > BCA </td>
</tr>
</table>
</boby>
</html>
6. cellpadding.
• The HTML <table> cell padding Attribute is used to specify the space
between the cell content and cell wall
• The cellpadding attribute is set in terms of pixels. By default, the padding
is set to 0.
Syntax:
<table cellpadding="pixels">
Program: Output:
<html>
<head>
<title>Table program</title>
</head>
<boby>
<table border="2" cellpadding="15">
<caption> Student Details</caption>
[Link] AP/CS VIAAS Page 8
INTRODUCTION TO HTML – 23UCASE02 CLASS : I BCA
<tr>
<th >Name </th>
<th>class</th>
</tr>
<tr>
<td> Rakshita </td>
<td > BCA </td>
</tr>
<tr>
<td> Sweatha </td>
<td > BCA </td>
</tr>
</table>
</boby>
</html>
Difference between Padding & Spacing:
Cell padding Cell spacing
Cell padding is the space Cell spacing is the space between
between the cell edges and the each cell.
cell content.
[Link] AP/CS VIAAS Page 9