HTML TUTORIAL PART-5 : HTML Table

HTML TUTORIAL PART-5 : HTML Table

What is a table in HTML?

Image

One of the ways to present different types of data on a web page in the form of statistics reports is to use tables. The table tag <table> is used to create tables. The <tr> tag is used to represent the number of rows in a table. tr means “table row”. The <td> tag is used to indicate how many data cells are divided in each row. td means “table data.” The job of the data cell is to store the content. A <td> tag saves text, links, images, lists, forms, other tables, etc.

What do you need to know to create a table in HTML?

To work with tables in HTML, you need to know the details of the table tags and their attributes. Let’s find out more about the tags in the table.

Tag Description of the tag
<table>Used to create tables.
<th>Used to create table headers.
<tr>Used to create rows of tables.
<td>Used to create table cells or data.
<caption>Used to set table captions.
<colgroup>Used to group more than one column.
<col>Used to set column properties in the <colgroup> element.
<thead>Used to set table headers.
<tbody>Used to set the body of the table.
<tfoot>Used to set the footer of the table.

Let us first create a simple table:

Image

Output

Image

What is cellpadding and cellspacing in HTML Table?

In HTML Table, cellpadding is used to determine the distance of the content of a cell from its border. And cellspacing is used to determine the distance from one cell to another. Let’s get a better idea with a few examples:

HTML Table without using cellpadding:

Image

Output

Image

Explanation: Notice that the text in the cell is attached to the left side of the border.

HTML Table with cellpadding:

Image

Output

Image

Explanation: Notice that the text in the cell is located at a distance of 10 pixels from the border.

HTML table without the use of cellspacing:

Image

Output

Image

Explanation: Notice that the cells are attached to each other, because we did not use the cellspacing attribute.

HTML Table with cellsapcing:

Image

Output

Image

Explanation: Notice that each cell is 10 pixels away from the other, because we have given 10 pixels as the distance in the cellspacing attribute.

What is the function of rowspan and colspan in HTML table?

The HTML table uses rowspan to convert or merge multiple rows into a single cell and colspan attribute to convert or merge multiple cells into a single cell.

Let’s first look at an example of a colspan:

Image

Explanation: Notice in line 9, here we have used colspan = 3 to convert or merge three cells into one cell.

Output

Image

Let’s look at an example of a rowspan:

Image

Explanation: Notice in line 13, here we have used rowpan = 4 to convert or merge three rows into one cell.

Output

Image

How to add caption to html table?

You need to use <caption> </caption> to add a caption to the html table.

 Let’s understand with an example:

Image

Output

Image

How to determine header, body and footer area in html table?

The html table uses the <thead> </thead> tag to define the header area, the <tbody> </tbody> tag to define the body area, and the <tfoot> </tfoot> to define the footer area.

Let’s understand with an example:

Image
Image

Leave a Reply

Your email address will not be published. Required fields are marked *