HTML Tables
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <caption> | Defines a table caption |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
_____________________________________________
HTML <table> Tag
- The <table> tag defines an HTML table.
- An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
- The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
- A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> element's.
Ex:-
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Output
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left center right | Specifies the alignment of a table according to surrounding text |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color for a table |
| border | 1 0 | Specifies whether or not the table is being used for layout purposes |
| cellpadding | pixels | Specifies the space between the cell wall and the cell content |
| cellspacing | pixels | Specifies the space between cells |
| frame | void above below hsides lhs rhs vsides box border | Specifies which parts of the outside borders that should be visible |
| rules | none groups rows cols all | Specifies which parts of the inside borders that should be visible |
| width | pixels % | Specifies the width of a table |
EX1:- <table align="right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Output:-
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
The align attribute is not supported in HTML5. Use CSS instead.
_________________________________________________________________________________EX2:-
<table bgcolor="#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
OUTPUT
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Note: The bgcolor attribute is not supported in HTML5. Use CSS instead.
__________________________________________________________________________
EX 3:-
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
OUTPUT:-
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
_________________________________________________________________________________
EX 4:-
EX 4:-
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p><b>Note:</b> The cellpadding attribute is not supported in HTML5. Use CSS instead.</p>
OUTPUT:-
Table without cellpadding:
| Month | Savings |
|---|---|
| January | $100 |
Table with cellpadding:
| Month | Savings |
|---|---|
| January | $100 |
Note: The cellpadding attribute is not supported in HTML5. Use CSS instead.
_________________________________________________________________________________
EX 5:-
<p>Table without cellspacing:</p>EX 5:-
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellspacing:</p>
<table cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p><b>Note:</b> The cellspacing attribute is not supported in HTML5.</p>
OUTPUT:-
Table without cellspacing:
| Month | Savings |
|---|---|
| January | $100 |
| Month | Savings |
|---|---|
| January | $100 |
_________________________________________________________________________________
EX 6:-
<p><b>Note:</b> The rules attribute is not supported in HTML5. Use CSS instead.</p>
<p>Table with rules="rows":</p>
<table rules="rows">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with rules="cols":</p>
<table rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with rules="all":</p>
<table rules="all">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
OUTPUT:-
Note: The rules attribute is not supported in HTML5. Use CSS instead.
Table with rules="rows":
| Month | Savings |
|---|---|
| January | $100 |
Table with rules="cols":
| Month | Savings |
|---|---|
| January | $100 |
Table with rules="all":
| Month | Savings |
|---|---|
| January | $100 |
EX 7:-
<p><b>Note:</b> The frame attribute is not supported in HTML5. Use CSS instead.</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
OUTPUT:-
<p><b>Note:</b> The frame attribute is not supported in HTML5. Use CSS instead.</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
OUTPUT:-
Note: The frame attribute is not supported in HTML5. Use CSS instead.
Table with frame="box":
| Month | Savings |
|---|---|
| January | $100 |
Table with frame="above":
| Month | Savings |
|---|---|
| January | $100 |
Table with frame="below":
| Month | Savings |
|---|---|
| January | $100 |
Table with frame="hsides":
| Month | Savings |
|---|---|
| January | $100 |
Table with frame="vsides":
| Month | Savings |
|---|---|
| January | $100 |
__________________________________________________________________________
EX 8:-
<table width="400">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
OUTPUT:-
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Note: The width attribute is not supported in HTML5. Use CSS instead.
_________________________________________________________________________________
HTML <tr> Tag
Definition and Usage
The <tr> tag defines a row in an HTML table.
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | right left center justify char | Aligns the content in a table row |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies a background color for a table row |
| valign | top middle bottom baseline | Vertical aligns the content in a table row |
<body>
<table style="width:100%" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr align="right">
<td>January</td>
<td>$100</td>
</tr>
</table>
<p><b>Note:</b> The align attribute is not supported in HTML5. Use CSS instead.</p>
</body>
OUTPUT:-
| Month | Savings |
|---|---|
| January | $100 |
Note: The align attribute is not supported in HTML5. Use CSS instead.
_________________________________________________________________________________
EX 2:-
<body><table border="1">
<tr bgcolor="#FF0000" >
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>The bgcolor attribute is not supported in HTML5. Use CSS instead.</p>
</body>
OUTPUT:-
| Month | Savings |
|---|---|
| January | $100 |
_________________________________________________________________________________
EX 3:-
<body>
<table style="height:200px" border="1">
<tr valign="top">
<th>Month</th>
<th>Savings</th>
</tr>
<tr valign="bottom">
<td>January</td>
<td>$100</td>
</tr>
<tr valign="middle">
<td>Fabruary</td>
<td>$300</td>
</tr>
<tr valign="bottom">
<td style="font-size:20">April</td>
<td>$200</td>
</tr>
</table>
<p><b>Note:</b> The valign attribute is not supported in HTML5. Use CSS instead.</p>
</body>
OUTPUT:-
| Month | Savings |
|---|---|
| January | $100 |
| Fabruary | $300 |
| April | $200 |
_________________________________________________________________________________
helpfull content
ReplyDelete