
DESCRIPTION
A table is an arrangement of data in rows and columns, or possibly in a more complex structure. 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 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. |
Note – The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML table Example
An Example of HTML table tag –
<table> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Bruce</td><td>Lee</td><td>100</td></tr> <tr><td>Jackie</td><td>Chan</td><td>95</td></tr> <tr><td>Vidyut</td><td>Jamwal</td><td>90</td></tr> <tr><td>Scott</td><td>Adkins</td><td>85</td></tr> </table>
This Code will produce the following result on your webpage –
First_Name | Last_Name | Marks |
---|---|---|
Bruce | Lee | 100 |
Jackie | Chan | 95 |
Vidyut | Jamwal | 90 |
Scott | Adkins | 85 |
Adding border to table
We have 2 ways to add border to our HTML table –
- Using border attribute of table in HTML
- Using CSS property
Here , we will see HOW TO ADD BORDER USING BORDER ATTRIBUTE.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Bruce</td><td>Lee</td><td>100</td></tr>
<tr><td>Jackie</td><td>Chan</td><td>95</td></tr>
<tr><td>Vidyut</td><td>Jamwal</td><td>90</td></tr>
<tr><td>Scott</td><td>Adkins</td><td>85</td></tr>
</table>
This Code will produce the following result on your webpage –
First_Name | Last_Name | Marks |
---|---|---|
Sonoo | Jaiswal | 60 |
James | William | 80 |
Swati | Sironi | 82 |
Chetna | Singh | 72 |
NOTE – To add collapsed border in your table , use this property in head tag.
<style>
table, th, td
{ border: 1px solid black; border-collapse: collapse; }
</style>
Next topic – Lists in HTML
Previous topic – Images in HTML