Scribd
Upload
4 views

Creating Table in HTML

The document is a course material on creating tables in HTML, detailing the structure and various tags used to build tables, such as <table>, <tr>, <td>, and <th>. It explains attributes for styling tables, including alignment, colors, and spacing, as well as advanced features like colspan and rowspan. Additionally, it covers the use of <thead>, <tbody>, and <tfoot> tags to organize table content effectively.

Uploaded by

manveetsidhu2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Creating Table in HTML

The document is a course material on creating tables in HTML, detailing the structure and various tags used to build tables, such as <table>, <tr>, <td>, and <th>. It explains attributes for styling tables, including alignment, colors, and spacing, as well as advanced features like colspan and rowspan. Additionally, it covers the use of <thead>, <tbody>, and <tfoot> tags to organize table content effectively.

Uploaded by

manveetsidhu2025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

WEB DESIGNING

Course :cse
Semester :5th​
Subject : WD​
Faculty: Ms. Monika Aggarwal
Topic Creating Tables in HTML
TABLE
• Tables allow you to organize and
arrange data into columns and rows.
Tables also allow you to divide your
page into section where you can
place headers, footers and
navigation links. Almost all Web
sites are laid out using tables.
TABLE
• A table is made up of rows and
columns. You can place different
elements in each cell like text,
images and hyperlinks.
Creating a Table
Tables arrange and organize content into
columns and rows. Basically, they can
be made via the following container
tags:
• <table></table>- tag that creates the table,
instructs the browser that a table is being
made.
• <tr></tr> - tag that sets off each row in a
table.
• <td></td> - tag that sets off each cell
Table Heading

Table heading can be defined using <th> tag..


Normally you will put your top row as table
heading as shown below, otherwise you can use
<th> element in any row. Headings, which are
defined in <th> tag are centered and bold by
default.

By default, the text in <td> elements are regular


and left-aligned.
Creating a Table
To set the width of your table, you can use
the width attribute for the <table> tag.

For example, you can set the width like:


<table width=“75%”>, this will instruct the
browser to set the table width to 75% percent
of the screen.
You can also set the width through pixel, like
<table width=“1000”>
Attributes for
<table></table>Tags
Attribute Name Definition
align Indicates the horizontal alignment of the table
(left, right, center)
Ex. <table align=“center”></table>
background Indicates the background image of the table
Ex. <table background=“redflower.jpg”></table>
bgcolor Indicates the background color of the table
Ex. <table bgcolor=“red”></table>
Attributes for
<table></table>Tags
Attribute Name Definition
border Indicates the thickness of the border in pixels
Ex. <table border=“2”></table>
bordercolor Indicates the color of the border
Ex. <table bordercolor=“red”></table>
width Indicates the width of the table in pixels or percent
of the width displayed by the web browser.
Ex. <table width=“800”></table>
Attributes for
<table></table>Tags
Attribute Name Definition
cellpadding Indicates the distance (in pixels) between the
contents of the cells and the border around it.
Ex. <table cellpadding=“2”></table>
cellspacing Indicates the distance between the cells in pixels
Ex. <table cellspacing=“2”></table>
height Indicates the height of the table in pixels or
percent of the height displayed by the web
browser.
Ex. <table height=“800”></table>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Example of Table tag code
Modifying Table Rows
<tr></tr>
Specifically, rows appearance can be changed as
well and can be done through their attributes. By
default, the contents of table rows are aligned
vertically.
Attribute Name Definition
align Indicates the horizontal alignment of the contents of
the row. (left, center, right)
Ex. <tr align=“center”></tr>

valign Indicates the vertical alignment of the contents of


the row. (top, middle, bottom)
Ex. <tr valign=“middle”></tr>

height Indicates the height of the row in pixels


Ex. <tr height=“200”></tr>

bgcolor Indicates the background color of the row.


Ex. <tr bgcolor=“red”></tr>
Modifying Table Data
<td></td>
The appearance of <td></td> data on each cell
can be changed through their attributes

Attribute Name Definition


align Indicates the horizontal alignment of the contents of
the cell (left, center, right)
Ex. <td align=“center”></td>

valign Indicates the vertical alignment of the contents of


the cell. (top, middle, bottom)
Ex. <td valign=“middle”></td>

height Indicates the height of the cell in pixels


Ex. <td height=“200”></td>

bgcolor Indicates the background color of the cell.


Ex. <td bgcolor=“red”></td>
CELLPADDING AND CELLSPACING
ATTRIBUTES
There are two attributes called cellpadding and
cellspacing which you will use to adjust the white
space in your table cells.
The cellspacing attribute defines space
between table cells.
Cellpadding represents the distance between
cell borders and the content within a cell.
Example
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing
= "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
Cont..

<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr> </table>
</body> </html>
COLSPAN AND ROWSPAN ATTRIBUTES

We will use colspan attribute if we want to


merge two or more columns into a single column.
Similar way we will use rowspan if you want to
merge two or more rows.
Example

<html> <head>
<title>HTML Table Colspan/Rowspan</title>
</head> <body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
Cont..
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
 </body>
</html>
Table Header, Body, and Footer:
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.

To add a caption to a table, use the <caption> tag:


<body> <table border = "1" width = "100%"> <caption>This is the
caption</caption>

Table Height and Width


<table border = "1" width = "400" height = "150">
HTML <caption> Tag

Definition and Usage

The <caption> tag defines a table caption.


The <caption> tag must be inserted immediately
after the <table> tag.
By default, a table caption will be center-aligned
above a table.
Example
A table with a caption:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML <thead> Tag
The <thead> tag is used to group header content in an
HTML table.

The <thead> element is used in conjunction with the <


tbody> and <tfoot> elements to specify each part of a
table (header, body, footer).

Browsers can use these elements to enable scrolling of


the table body independently of the header and footer.
Also, when printing a large table that spans multiple
pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page.
The <thead> element must have one or more <tr> tags
inside.
Example
An HTML table with a <thead>, <tbody>, and a <tfoot>
element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
CONT..
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
HTML <tbody> Tag
Definition and Usage
The <tbody> tag is used to group the body content in an
HTML table.

The <tbody> element is used in conjunction with the <


thead> and <tfoot>
elements to specify each part of a table (body, header,
footer).

Browsers can use these elements to enable scrolling of


the table body independently of the header and footer.
Also, when printing a large table that spans multiple
pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page.
Example
The <tbody> element must have one or more <tr> tags inside.
An HTML table with a <thead>, <tbody>, and a <tfoot> element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
CONT..

</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
HTML <tfoot> Tag
Definition and Usage
The <tfoot> tag is used to group footer content in an
HTML table.

The <tfoot> element is used in conjunction with the <


thead> and <tbody> elements to specify each part of a
table (footer, header, body).

Browsers can use these elements to enable scrolling of


the table body independently of the header and footer.
Also, when printing a large table that spans multiple
pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page.
The <tfoot> element must have one or more <tr> tags
inside.
Example
An HTML table with a <thead>, <tbody>,
and a <tfoot> element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
CONT..

<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

You might also like