Chapter – 4 part - 2
CREATING TABLE IN A WEB PAGE :
Qn. What is Table regarding html ?
An. Tables are used on a web page to organize data in the form of horizontal rows
and vertical column. Table is Rectangular in shape.
Each table is made up of a fixed number of rows and column . the rectangular
area formed at the intersection of a row and a column is called as cell
An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements. The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table cell.
Syntax : <table>…………………</table>
SUPPORTING ATTRIBUTES OF <TABLE> TAG:-
1. Align:- Specifies the horizontal position of the table within the web page windows. The
value of this attribute may be left, center, or right.
Example:- <table align=”left”>
2. Width:- Controls the width of the entire table.
Example:- <table width=”100”>
3. Cellspacing:- Adds space between the cells. The spacing between cells is given in pixels.
Example:- <table cellspacing=”10”>
4. Cellpadding:- Adds space around cell contents.
Example:- <table cellpadding=”20”>
5. Valign:- Lets you align the cell contents in the table to the top or to the bottom in the cells.
Example:- <table valign=”top”/”bottom”>
6. Border:- Gives a border to a table. The thickness of the border specified in pixels.
Example:- <table border=”3”>
7. Bordercolor:- Adds a colour to the border of a row or a cell.
Example:- <bordercolor=”navy”>
8. Bgcolor:- Adds a colour to the background of a row or a cell.
Example:- <bgcolor=”yellow”>
THE <TR>,<TH> AND <TD> TAGS:-
I. The <tr> tag:-
The <tr> tag creates a new row in the table. The <tr> is a container tag and
needs to be closed with the </tr> tag. All the tags (<th> and <td>) that are
used to create the data and header cells are enclosed within the <tr>…</tr>
tag.
SYNTAX:- <table border=3><tr>
…. </tr></table>
II. The <th> tag:-
The <th> tag is used within the <tr> tag and creates a header cell of the table.
It is also a container tag and needs to be closed with the </th> tag. It enclosed
the data that is there in a header cell.
SYNTAX:- <tr>
<th> Header cell data for the 1 st column </th>
<th> Header cell data for the 2 nd column</th>
……. </tr>
III. The <td> tag:-
The <td> tag is also used within the <tr> tag and creates a data cell of the
table. It encloses the data that is to appear in a data cell.
SYNTAX:- <tr>
<td> 1st data cell value </td>
<td> 2nd data cell value </td>
…. </tr>
EXAMPLE:-
OUTPUT:-
NOTE:-
You can create a bland cell by coding <td> </td>. The code is an HTML
special character entity for non-breaking space. Use in place of data when the cell is to be
empty.
THE ATTRIBUTES OF <TD> AND <TH> TAGS:-
I. rowspan:-
The ROWSPAN attribute is used to stretch a column vertically across two or
more rows of a table when coding HTML for web pages. The value of this
attribute indicates the number of rows the column will stretch across.
EXAMPLE:-
If ROWSPAN=”3” is used, if will stretch a column vertically across three
rows.
OUTPUT:-
II. colspan:-
Colspan is an attribute of the <th> and <td> tags. It is used when we want to
have a particular table cell span or cross over more than one column.
SYNTAX:- <th colspan=no. of columns> or <td colspan=no. of columns>
EXAMPLE:-
OUTPUT:-
UNDERSTANDING CELLPADDING AND CELLSPACING IN A TABLE:-
1. CELLPADDING:-
Cellpadding refers to the inner free space that each cell of a table has a
its “padded” border. It is a cell border of “white space” inside the individual cells of a
table. It is the white space padding around the cell contents.
2. CELLSPACING:-
Cellspacing refers to the space left between each cell wall in a table. If
you want no spaces at all, you must set CELLSPACING=”0”, otherwise the default setting
is CELLSPACING=”1”, even if you do not even mention the CELLSPACING.
NOTE:- The space between the cells across the rows will only be controlled if you use the
cellspacing attribute in combination with a WIDTH setting for each cell in the first row.
EXAMPLE:-
CELLSPACING
OUTPUT:-
CELLPADDING
Note :
Write the following notes of Chapter -4-part-2 in your assignment file .
The related Vedio lecture will be uploaded later on .
