Hello friends… I am back with
my fresh post…previously what we discussed about was HTML IMG tag. Now, in this
post we will be discussing about the HTML table tag in detail. So, in this post
you will be learning to create table in the web pages so as to arrange the
specific data in the web page.
HTML TABLE TAG
The HTML table allow web
authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.
The HTML tables are created
using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells.
·
Tables are
defined with the <table> tag.
·
Tables are divided
into table rows with the <tr> tag.
·
Table rows are
divided into table data with the <td> tag.
·
A table row can
also be divided into table headings with the <th tag.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Row 1, Column
1</td>
<td>Row 1, Column
2</td>
</tr>
<tr>
<td>Row
2, Column 1</td>
<td>Row
2, Column 2</td>
</tr>
</table>
</body>
</html>
Table headings
Table heading can be defined
using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally you will put your top row as table
heading as shown below otherwise you can use <th> element in any row.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table header</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>sid</td>
<td>80000</td>
</tr>
<tr>
<td>jishnu</td>
<td>5000</td>
</tr>
</table>
</body>
</html>
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 the width of the border, while cellpadding represents the
distance between cell borders and the contents within a cell.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table cellpadding</title>
</head>
<body>
<table border=”1” cellpadding=”5” cellspacing=”5”>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>sid</td>
<td>80000</td>
</tr>
<tr>
<td>jishnu</td>
<td>5000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan
attribute if you want to merge two or more columns into a single column. Similar
way you will use rowspan if you want to merge two or more rows.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table colspanrowspan</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>column 3</th>
</tr>
<tr>
<td rowspan=”2”>Row 1 cell</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>
Tables backgrounds
You can set table background
using one of the following two ways:
·
Bgcolor attribute
·
Background attribute
Example:
<table border=”1”
bordercolor=”green” bgcolor=”yellow”>
</table>
<table
border=”1” bordercolor=”green”
background=”/images /test . png”>
</table>
Table Header, Body, and Footer
Tables can be divided into
three portions: a header, a body, and a foot. The head and foot are rather
similar to headers and footers in a word processed document that remain the
same for every page, while the body is the main content holder of the table.
The three elements for separating
the head, body, and foot of a table are:
a)
<thead>
b)
<tbody>
c)
<tfoot>
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table </title>
</head>
<body>
<table border=”1” width=”100%”>
<thead>
<tr>
<td colspan=”4”>this is
the head of the table </td>
</td>
</tr>
</thead>
<t foot>
<tr>
</tr>
</t foot>
<tbody
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</t body>
</table>
</body>
</html>
So, friends this was all for
today…keep on reading my posts as well as the posts of my mates who are in this
team….if you have any queries you can ask them in the comment box. I will give you the reply as soon as possible..thank you…
To Like Our Facebook Page > NewAgeInformers
Comments
Post a Comment