Interesting Knowledge About Creating A Table in HTML

INTRODUCTION

Table in html element represents tabular data, which means information represented in two dimensional tables comprises of rows and columns of cells containing data. Html tables allow web developers to arrange data in row and columns.

The table box establishes formatting context. Element inside the <table> generate rectangular boxes. When the <table> element is being used, there is a visual layout of the table contents.

Following element is part of the table structure:

<caption>
<thead>
<colgroup>
<col>
<th>
<tbody>
<tr>
<td>
<tfoot>

Tags used to create a table in HTML

Tags	Description
<table>	Defines a table.
<caption>	Defines a table caption.
<thead>	It helps to group the header content in a table.
<colgroup>	Specifies a group or more columns in the table formatting.
<col>	Specifies columns properties for each of columns within the <colgroup> element.
<th>	Defines the table heading.
<tbody>	It groups the body content in table.
<tr>	Defines the rows in a table.
<td>	Defines the table data.
<tfoot>	It groups the footer content in a table

EXAMPLE

This is the html code for the table in HTML element.

Result

This is the result of the written code above.

NOTE:
By default, the text in <th> element are bold and centered, but can be changed with CSS.
A table cell can contain all sorts of html elements: text, image, list, other tables, etc.

COLSPAN AND ROWSPAN

Colspan:

Html table can have cells that span over multiple rows or columns. To make a cell span over multiple columns, use the colspan attributes.

EXAMPLE

Before the colspan attribute was added

Result

When the colspan attribute is been added

Result

Note:
After the colspan attribute as been added, the two names are now under the name.
The value of the colspan attribute represents the number of columns to span.

Rowspan:

Html table can have cells that span over multiple rows or columns. To make a cell span over multiple rows, use the rowspan attributes. This let space occupy across multiple rows of the table.