The <table> tag is used to add an HTML table in webpage.
The <table> tag is used in conjunction with the <tbody>,<thead> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).
The <table> tag have one or more <tr> and <td> tags inside <tbody>,<thead> and <tfoot> tags.It is an HTML5 tag.It has also opening and closing tags.It has boder attribute to define border of table.Two attribiutes cellpadding and cellspacing which can use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding specifies the distance between cell borders and the content within. (valid in blogger.)
Optional Attributes for <table> tag :- align|width|summary|sortable|rules|frame|cellpadding|border|bgcolor
These attributes are not supported in HTML5 but valid in older version.
You can understand use of <table> tag by a simple example:-
The <table> tag have one or more <tr> and <td> tags inside <tbody>,<thead> and <tfoot> tags.It is an HTML5 tag.It has also opening and closing tags.It has boder attribute to define border of table.Two attribiutes cellpadding and cellspacing which can use to adjust the white space in your table cell. Cellspacing defines the width of the border, while cellpadding specifies the distance between cell borders and the content within. (valid in blogger.)
Optional Attributes for <table> tag :- align|width|summary|sortable|rules|frame|cellpadding|border|bgcolor
These attributes are not supported in HTML5 but valid in older version.
You can understand use of <table> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of Table tag</title>
</head>
<body>
<table border="1">
<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 Table tag</title>
</head>
<body>
<table border="1">
<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 Table tag</title>
</head>
<body>
<table border="1">
<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 Table tag</title>
</head>
<body>
<table border="1">
<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 <table> tag is used to add an HTML table.It is important tag that used for arranging data in rows and columns in a webpage.
0 comments:
Post a Comment