The <tbody> tag is used to add a body to an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).The <tbody> tag have one or more<tr> and <td> tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes for <tbody> tag :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <tbody> tag by a simple example:-
Optional Attributes for <tbody> tag :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <tbody> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of tbody tag</title>
</head>
<body>
<table border="1" width="100%" align="center">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<td colspan="3">footer1</td>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body> </html>
Result:-
Cell1-cell6 includes in table body,Header1-header6 includes table header and footer1 is include in table footer.In table footer we use colspan that is use to merge columns.
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of tbody tag</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr> <tH>Weekday</tH> <tH>date</tH>
<tH>Manager</tH> </tr>
</thead>
<tbody>
<tr> <td>Monday</td> <td>04/06/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/07/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/08/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/09/2015</td> <td>Sunil</td> </tr>
<tr> <td>Friday</td> <td>04/10/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/11/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/12/2015</td> <td>Suman</td> </tr>
</tbody>
</table>
</body>
</html>
Result:-
<!DOCTYPE html>
<html>
<head>
<title>use of tbody tag</title>
</head>
<body>
<table border="1" width="100%" align="center">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<td colspan="3">footer1</td>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body> </html>
Result:-
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| footer1 | ||
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of tbody tag</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr> <tH>Weekday</tH> <tH>date</tH>
<tH>Manager</tH> </tr>
</thead>
<tbody>
<tr> <td>Monday</td> <td>04/06/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/07/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/08/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/09/2015</td> <td>Sunil</td> </tr>
<tr> <td>Friday</td> <td>04/10/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/11/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/12/2015</td> <td>Suman</td> </tr>
</tbody>
</table>
</body>
</html>
Result:-
| Weekday | date | Manager |
|---|---|---|
| Monday | 04/06/2015 | Amit |
| tuesday | 04/07/2015 | rina |
| Wednesday | 04/08/2015 | Akshay |
| thursday | 04/09/2015 | Sunil |
| Friday | 04/10/2015 | rahul |
| Saturday | 04/11/2015 | Lokesh |
| Sunday | 04/12/2015 | Suman |
Conclusion:--
So the <tbody> tag is used to add a body to an HTML table.tr and td tags are child tag for tbody tag.It is important section for designing a table in a webpage.
0 comments:
Post a Comment