HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .
HTML Table Tags :
| Tag | Description |
|---|---|
| <table> | It defines a table. |
| <tr> | It defines a row in a table. |
| <th> | It defines a header cell in a table. |
| <td> | It defines a cell in a table. |
| <caption> | It defines the table caption. |
| <colgroup> | It specifies a group of one or more columns in a table for formatting. |
| <col> | It is used with <colgroup> element to specify column properties for each column. |
| <tbody> | It is used to group the body content in a table. |
| <thead> | It is used to group the header content in a table. |
| <tfooter> | It is used to group the footer content in a table. |
HTML Table Example
Let's see the example of HTML table tag.
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Akash</td><td>b</td><td>60</td></tr>
<tr><td>Uday</td><td>P</td><td>80</td></tr>
<tr><td>Ram</td><td>m</td><td>82</td></tr>
<tr><td>Akhil</td><td>j</td><td>72</td></tr>
</table>
Output:
First_Name Last_Name Marks
| Akash b | 60 |
| Uday P | 80 |
| Ram m | 82 |
| Akhil J | 72 |
HTML Table with Border
There are two ways to specify border for HTML tables.
By border attribute of table in HTML
By border property in CSS
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Akash</td><td>b</td><td>60</td></tr>
<tr><td>Uday</td><td>p</td><td>80</td></tr>
<tr><td>Ram</td><td>m</td><td>82</td></tr>
<tr><td>Akhil</td><td>j</td><td>72</td></tr>
</table>
Output :
| rst_Name | Last_Name | Marks |
|---|---|---|
| Akash | B | 60 |
| Uady | P | 80 |
| Ram | M | 82 |
| Akhil | J | 72 |
2) CSS Border property
It is now recommended to use border property of CSS to specify border in table.
<style>
table, th, td {
border: 1px solid black;
}
</style>
HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.
We can adjust our table width as per our requirement
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <table> tag:
| Tag | Description |
|---|---|
| 1.border | used to set the border size of the table. ex: border="2" |
| 2.height | used to set height of the table. ex: height="300" |
| 3.Width | to set width of the table. ex: width="300" |
| 4.bgcolor | to set background color of the table. ex: bgcolor="red" |
| 5.background | to set an image as the table background. ex: background="c:/document/leo.jpg" |
| 6.align | to set the alignment of the table. ex:align="center" |
| 7.cellpadding | to set distance between cell border and cell contents. |
| 8.cellspacing | to set spacing between the cells. ex: cellspacing="10" |
| 9.bordercolor | to set the bordercolor of the table. ex:bordercolor="green" |
| 10.rowspan 11.colspan | to make the cell span for morethan one cell. Ex rowspan="2" to make the cell span for morethan on column .Ex colspan ="3" |
<caption>.......</caption >--->this tag is used to given title to the table
0 comments:
Post a Comment