Tables gives us Information in a more precise and concise manner. The fundamental building block of an HTML table are cells. They can contain data elements or column boards. Cells are grouped into rows and rows are grouped together to form an entire table.
Tables can be defined using container tag <tables> Rows can be defined using container tag <tr> and cells can be defined using <th> and <td>. A header cell is defined using <th> and data cells is defined using <td>
E.g.: <body>
<table border=5 bordercolor=red>
<tr>
<th> Name </th>
<th> Marks </th>
</tr>
<tr>
<td> ABC </td>
<td> 65 </td>
</tr>
<tr>
<td> PQR </td>
<td> 53 </td>
</tr>
</table>
</body>
Attributes of the <table>
1. Border: It controls the border to be placed around the table and the cells. Border thickness must be specified in pixels.
2. Bordercolor: It defines the color of the border to be specified, color name or RGB hexadecimal triplet can be given along with this attribute.
3. Align: It controls the alignment of the table on the webpage. It can be set to left (default setting) right and center.
4. Width: It controls the width of the table in the browse window you can set the width to a specified no. of pixels or to a percentage of available screen width.
` e.g. <table border=5 align=center width=30%>
5. Bgcolor: It controls the background color of the table. It can be set to RGB hexadecimal triplet or a color name.
6. Background: It controls the background image to be displayed for the table. Imagename and its path must be specified along with its attribute.
7. Cellspacing: It controls the spacing between the cells.
8. Cellpadding: It controls the distance between the data in a cell and boundaries of the cell.
e.g <table align=center border=4 cellpadding=20 cellspacing=20>
9. Rules: It controls the tables inner borders. The values for the rules attributes are all, none, rows and cols.
e.g. <table border=4 rules=rows>
10. Frame: It controls the tables outer border. It can be set to values box, 1hsc rhs, hsides, vsides, above, below and void.
11. Colspan: This attribute when placed along with the <th> or <td> spans a number of columns. This attribute must be set to the number of columns which the cell has to occupy.
12. Rowspan: It words in the same way as the colspan attribute the only difference is here a cell spans more than one row.
e.g.
<table>
<tr><th rowspan=2> Name </th>
<th colspan=3> Marks </th>
</tr>
<tr>
<th> C++ </th>
<th> Java </th>
<th> PHP </th>
</tr>
<tr>
<td> ABC </td>
<td> 51 </td>
<td> 62 </td>
<td> 70 </td>
</tr>
<tr>
<td> PQR </td>
<td> 34 </td>
<td> 65 </td>
<td> 77 </td>
</tr>
</table>
13. <caption>: This tag can be used to give heading or a caption to the table. This tag can be placed anywhere between the opening <table> and </table>.
E.g. <caption align=bottom> Marks details </caption>
14. Align: The <caption> determines the placement of the caption. It can be set to values top or bottom.
Q. Design a webpage....
Q. Design a webpage....
Table.html
<body>
<table align=center width=80% bgcolor=odcdcd border=4> <font color=red> <h2> <caption> Time Table and Fare List </caption> </h2> </font>
<tr bgcolor=aqua>
<th rowspan=2> Name of train </th>
<th rowspan=2> Start Station </th>
<th rowspan=2> Destination </th>
<th rowspan=2> Time </th>
<th rowspan=2> Fare </th>
<th rowspan=2> Arrival </th>
<th rowspan=2> Departure </th>
</tr>
<tbody>
<tr>
<td> Rajdhani Express </td>
<td> Mumbai </td>
<td> Delhi </td>
<td> 07:30 </td>
<td> 12:15 </td>
<td> <font color=blue> Rs. 2500 </font></td>
</tr>
<tr>
<td> Konkan Kanya Express </td>
<td> Madgaon </td>
<td> Dadar </td>
<td> 22:30 </td>
<td> 01:15 </td>
<td> <font color=blue> Rs. 1750 </font> </td>
</tr>
<tr>
<td> Latur Express </td>
<td> Mumbai </td>
<td> Latur </td>
<td> 04:30 </td>
<td> 17:45 </td>
<td> <font color=blue> Rs. 1300 </font> </td>
</tr>
</tbody>
</table>
</body>
Q.
<body>
<a name=top></a>
<table align=center border=5 bordercolor=green cellpadding=10 cellspacing=10 rules=rows>
<caption> <font color=orange><h2>Beautiful States of India</h2></font></caption>
<tr>
<td align=center><font color=red><h3> <u><i>Maharashtra</u></i></h3></font>
<img src="maha.jpg" width=250 height=150 border=2>
<a name=maha></a>
</td>
<td align=left><p align=justify> <font size=5 color=blue> Maharashtra is a state in the western region of India… </font></p>
</td>
</tr>
<tr>
<td align=center><font color=red><h3> <u><i>Rajasthan</u></i></h3></font>
<img src="rajas.jpg" width=250 height=150 border=2>
<a name=rajas></a></td>
<td align=left><p align=justify> <font size=5 color=blue> Rajasthan literally, "Land of Kings" is India's... </font>
</p></td>
</tr>
<tr>
<td align=center><font color=red><h3> <u><i>Kerala</u></i></h3></font>
<img src="kerala1.jpg" width=250 height=150 border=2>
<a name=kerala></a></td>
<td align=left><p align=justify> <font size=5 color=blue>Kerala, historically known as Keralam… </font></p></td>
</tr>
<tr>
<td colspan=2 align=center> <a href=#top>TOP</a></td>
</tr>
</table>
</body>
Here, the output is same as given in hyperlink example named as Stateinfo2.html. The difference is only that this html file has used attributes cellpadding=10 and cellspacing=10.
0 Comments