Html Chapter -4

Table:To represent  data in tabular format we use <table> </table> tag. To make a table we basically use four tags.
(a)<table></table>:This tag is used to tell the browser “this is a table” along with some attributes like size, border, width and few other things.
(b)<tr></tr>: The table row ( <tr> </tr> ) tag define the row of a table.
(c)<th></th>:This tag specifies heading for the table.
(d)<td></td>:This tag specifies individual block or cell in a table.

Example:
<table>

                  <tr>                           <th> Name </th>    <th> Roll No. </th>                </tr>

                  <tr>                           <td> aaa </td>         <td> 111 </td>                         </tr>

                  <tr>                           <td> bbb </td>        <td> 222 </td>                          </tr>

</table>

Attributes of table tag:
(a) align: This attribute specifies alignment for the table. Values for this attribute center, right, left.
ex:          <table align=”right”> </table>

(b) background: This attribute specifies background image for the table.
ex:         <table background=”logo.gif”> </table>

(c) bgcolor: This attribute specifies background color for the table.
ex:         <table bgcolor=”pink”>  </table>

(d) border: This attribute is used to change the color of the border.

(e) bordercolor: This attribute is used to change the color of the border.
ex:        <table border=”5” bordercolor=”pink”> </table>

(f) cellpadding: This attribute specifies distance between cell border and content (data) of the cell. Its default value is 0(zero).

(g) cellspacing: This attribute specifies distance between the cells. Its default value is 0.
ex:       <table cellpadding=”5” cellspacing=”5”>

(h) height/width:- These attributes specify height and width of table.
ex:         <table height=”600” width=”600”>  </table>

(i)rules:- This attribute specifies border patterns for the table.

Values	Effect
Cols
rows
none
all

Ex:    <table border=”5” rule=”rows”>

Attributes of <tr> </tr> tag:
(a) align:- This attribute specifies alignment for the contents of row.(center, left, right)

(b) bgcolor:- this attribute specifies background color for table row.

(c) bordercolor: This attribute defines the color for the cell border for that row.

(d) height: This attribute specifies height for that row.
Example:
              <table border="5" bordercolor="#CCFFCC" cellspacing="10" width="400">

                                    <tr align="right" bordercolor="#ff0000" height="100"> <td> aaa </td> </tr>

                                    <tr align="right" bordercolor="#0000ff"> <td> bbb </td> </tr>

                  </table>

Attributes of <th></th> and <td> </td>:
(a). align: This attribute specify alignment for cell data.

(b) background: This attribute specifies background image for that cell.

(c) bgcolor: This attribute specifies background color for that cell.

(d) bordercolor: This attribute specifies color of border for that cell.

(e) colspan: This attribute specifies number of columns current cell will occupy.

(f) rowspan: This attribute specifies number of rows current cell will occupy.

(g) width/height: These attributes specify height and width of cell.

(h) valign: This attribute specifies vertical alignment for cell data. Possible values for this attribute are bottom, middle, top.
Example:
                  <table border="1" width="600" rules="cols">

                                    <tr bordercolor="#FF0000">

                                                      <th>First Name</th>

                                                      <th>Last Name</th>

                                                      <th>Father Name</th>

                                    <tr>

                                    <tr align="center">

                                                      <td>Jonh</td>

                                                      <td>Rick</td>

                                                      <td>Tomy Rick</td>

                                    </tr>

                                    <tr align="center">

                                                      <td>Lance</td>

                                                      <td>Anderson</td>

                                                      <td>James Anderson</td>

                                    </tr>

                  </table>  

Example:

<table width="400" border="1" bordercolor="#0033CC"> <tr> <td colspan="2" rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td rowspan="2">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2">&nbsp;</td> <td>&nbsp;</td> </tr> </table>

Nested Tables:Table within a table is called nested table. Nested tables can be created by nesting of <table></table> tags.

<table width="50%" height="50%" border="1" bordercolor="black"> <tr> <td rowspan="4"> <table width="100%" height="100%" border="1" bordercolor="black"> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table> </td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table>

Previous Chapter                                                                                                                     Next Chapter