Wednesday 14 September 2011

HTML Tables and the Border (complete tag)

Table is made-up of rows and column, rows and horizontal lines and columns are vertical lines, where the rows and columns are intersect with code other is called cell.
Table can be created by using the table elements using start and end tag.
<table>………………………………</table>
Table is rewired one set of <tr>…………….</tr> it represent for table row and eves row is required a cell, cell is represented by <td>………………</td>
The structure of table is look like this:
<Table>
<tr>
<td>……..</td>
</tr>
</table>
Sample table and structure:
<table>
<tr>
<td>name</td><td>course</td>
</Tr>
</table>
Output of the table:
Name   course
If you want to show the border of the table it needed to add the border in the table tag like this:
<table border>
Name
Course
Fee
p. No
Abc
Cca
-----
-------

Table border thicknes:
Used to change the border lines of the table in thick
<table border = “2, 3, 4, 5, etc”>
Table cell spacing: used to give space between cells.
<table cellspacing=”1, 2, 3, 4 etc”>
Table cell padding: It is used to give space in the cell or outside area of the text.
<table cellpadding=”1, 2, 3, 4 etc”>
<Table bg color>: this tag can be used to change the back around color of the table.
<table bg color= “color name”>
<Table background>: this tag can be used to insert the image in the background of the table.
<table background=”source of image\image name. Extension”>
<Table width>:- this tag is used of change the width of the table.
Alignment of cell: - it is used to arrange the text in the cell . these are two type of alignment used in table tags.
(1)   Horizontal alignments
(2)   Vertical alignments
Horizontal alignment is used to arrange text horizontally in 4 type.
(a)    Left alignment
<td align=”left”>
(b)   Center alignment
<td align=”center”>
(c)    Right alignment
<td align=”right”>
(d)   Justify alignment
<td align=”justify”>
Vertical alignment is used to arrange the text of cell in vertical .3 type of alignment used in table of vertical.
(1)    Top alignment
<td align=”top”>
(2)    Middle alignment
<td align=”middle”>
(3)    Bottom alignment
<td align=”bottom”>

Colspan:- colspan is used to merge the columns of the table.
This tag is type in td toy.
<td colspan=”number of column”>

Rewspan: - it is used to merge the rows in the table.
The is also type in td tag
<td rowspan=”number rows”>
Color of Cell: - we can change the color of cell in the table with the <td=color name”>