Tables in HTML | Learn Basic HTML

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 –

1. Using border attribute of table in HTML
2. 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

---