Table
Definition of table
In html, the beginning of a table is marked by the <table> tag and end is marked by the </table>
tag.
A table places information inside the cells formed by dividing a rectangle into rows and columns. Most cells contain data, some cells usually on the table's top or side.
Using one or more rows <tr> </tr>.
Each row contains cells holding a heading <th> </th>.
Each row contains cells holding a data <td> </td>.
Attributes:
1. Caption
The table might also have a caption enclosed within <caption> .......</caption>.
Contents generally are rendered above or below the table, indicating what the table contains.
2. Border
If we want a border for our table, we must give the beginning tag as <table border>.
We can also give numbers to represent the size of the border <table border=5>.
3. Align
Align attribute is used to place the table in the form left, right, center being the default.
4. Width
The width attribute for the table element specifies the width of a table in pixel, or as a percentage value %.
5. Bgcolor
The table element also can be assigned background colors using the bgcolor attribute.
Bgcolor valid for <table>, <tr>, <th>, <td>.
6. cellpadding
Give space between content and border that controlled by the cellpadding attribute.
7. cellspacing
Give space between cells in a table is controlled by the cell spacing attribute.
Value as pixels, percentage.
8. Row span
The process of combining vertically, one or more adjacent cells into one in know as row span.
9. Colspan
The process of combining horizontally, one or more adjacent cells into one in know as colspan.
Simple Example:
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="5">
<th>name</th>
<th>place</th>
<tr>
<td>Divya</td>
<td>india</td>
</tr>
<tr>
<td>john</td>
<td>usa</td>
</tr>
</table>
</body>
</html>
<head>
<title> Table </title>
</head>
<body>
<table border="5">
<th>name</th>
<th>place</th>
<tr>
<td>Divya</td>
<td>india</td>
</tr>
<tr>
<td>john</td>
<td>usa</td>
</tr>
</table>
</body>
</html>
output:
Example of Rowspan and colspan attribute:
Rowspan example:
<html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td rowspan="2">admi</td>
<td>john</td>
</tr>
<tr>
<td>raj</td>
</tr>
</table>
</body>
</html>
Output:
Colspan example:
<html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td colspan="3">admi</td>
</tr>
<td>john</td>
<td>raj</td>
<td>mach</td>
</tr>
</table>
</body>
</html>
Output:
<html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td rowspan="2">admi</td>
<td>john</td>
</tr>
<tr>
<td>raj</td>
</tr>
</table>
</body>
</html>
Output:
Colspan example:
<html>
<body>
<table border="4">
<caption>Rowspan</caption>
<tr>
<td colspan="3">admi</td>
</tr>
<td>john</td>
<td>raj</td>
<td>mach</td>
</tr>
</table>
</body>
</html>
Output:
Example of Cellspacing and cellpadding:
<html>
<body>
<table border="1" cellspacing="30" cellpadding="40">
<caption>Cellspacing and cellpadding</caption>
<tr>
<td>fruit</td>
<td>vegitable</td>
<td>sweets</td>
</tr>
</table>
</body>
</html>
<body>
<table border="1" cellspacing="30" cellpadding="40">
<caption>Cellspacing and cellpadding</caption>
<tr>
<td>fruit</td>
<td>vegitable</td>
<td>sweets</td>
</tr>
</table>
</body>
</html>
Output:
Example of Alignment:
<html>
<body>
<table border="1" cellspacing="10" cellpadding="10" width="100%">
<caption>Alignment</caption>
<tr>
<td align="center">fruit</td>
<td align="left">vegitable</td>
<td align="right">sweets</td>
</tr>
<tr>
<td valign="top" height="100">orange</td>
<td valign="middle">onion</td>
<td valign="bottom">laddu</td>
</tr>
</table>
</body>
</html>
<body>
<table border="1" cellspacing="10" cellpadding="10" width="100%">
<caption>Alignment</caption>
<tr>
<td align="center">fruit</td>
<td align="left">vegitable</td>
<td align="right">sweets</td>
</tr>
<tr>
<td valign="top" height="100">orange</td>
<td valign="middle">onion</td>
<td valign="bottom">laddu</td>
</tr>
</table>
</body>
</html>
Output:
Color for table and cell:
<html>
<body>
<table border="1" cellspacing="10" cellpadding="10" bgcolor="green">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html>
<body>
<table border="1" cellspacing="10" cellpadding="10" bgcolor="green">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html>
Output:
Background image in Table:
<html>
<body bgcolor="green">
<table border="1" cellspacing="10" cellpadding="30" background="E:\lavanya\image\nature image\cascate - Copy.gif">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html>
<body bgcolor="green">
<table border="1" cellspacing="10" cellpadding="30" background="E:\lavanya\image\nature image\cascate - Copy.gif">
<caption>color</caption>
<tr>
<td bgcolor="lightblue">color1</td>
<td bgcolor="pink">color2</td>
<td bgcolor="orange">color3</td>
</tr>
</table>
</body>
</html>
Output:
No comments:
Post a Comment