HTML tables , colspan, rowspan , caption and much more

Tables are one of the best element came with html5. We use tables almost everywhere, from school homework to presentations, tables always have been of great importance. Tables can be created in html document using table tag 

HTML

<table border="2">
 <tr>
  <td width="100">cell</td>
  <td width="100">cell</td>
  <td width="100">cell</td>
 </tr>
</table>

As you can see we added the container element table and in that we just coded another tag <tr> which means row. These tags add a table row in our table. 
The <td> element adds table data in the row. We added the attribute named border in the table tag so to differentiate the table from other elements. We also added the attribute width to each table data element to make its width equal to 100px
The above code will output this 

cell

cell

cell

A table header is defined with th tag. By default, table headings are bold and centered.

Note:

---

td are data containers for tables , they can contain any html element like images, lists ,another table etc.

ColSpan

---

In a table every table row don't have same no. of data , so we can increase the width of a td by adding a attribute colspan to a table cell.

HTML

<td colspan="2">2x width<td>

With the following example you can understand the role of colspan. In the following example the gap between Hydrogen and Helium is filled by a table cell with colspan value raised to 16.
 

RowSpan

---

As done above for colspan similar is rowspan but the difference is that it spands vertically in rows.

HTML

<table style="width:100%">
  <tr>
    <th colspan="2">Name:John Doe</th>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55558888</td>
  </tr>
  <tr>
    <td>55557777</td>
  </tr>
</table>

It will produce

Name:John Doe
Telephone:	55558888
	5557777

The caption tag

---

Add a caption in a table by caption tag.

Caption tag must come after the table tag

HTML

<table>
 <caption>The caption here</caption>
  ••• etc code here •••
</table>

An example below shows the caption

---

Price of fruits (per kg)

Fruit	Price
Mango	$2
Apple	$2.5
Pomegranate	$1.5