What Is HTML Table Tag?
HTML Table Tag – You have created a table in MS Word. And will my data be decorated in Tabular Format? And this is also shameful. Because creating a table in MS Word is very easy.
Like Word Document, Data and Information is also presented in Tabular Format in Webpages. For which the HTML Table is used. Creating HTML Table from HTML is a very simple task.
In this blog post, we will give you complete information on how to create a table in the HTML document. You will know how the table is made in HTML? Which HTML Element is used to create Table in HTML?
To simplify the HTML Table Concept, we divided this blog post into smaller parts. Below is the list of these sections:
1. Introduction to HTML Table
Table is defined by the Table Element in the HTML document. A table is started by opening <table> tag. The table is closed by closing and </ table> tag.
By table we represent the data in Tabular Format. This data includes the types of text, images, videos, links, etc. We can show any type of data in the table according to our needs.
2. Structure of an HTML Table
You can know by looking at the above photo that there is a table with rows, columns and cells. These three Elements are the basis of a table.
- Columns – Eating table of a table is called Column. You can add and remove Columns according to your need in a Table. A column is formed from two vertical lines.
- Rows – Table, made from half-rings, is called Row. Rows are exactly the opposite of a column. A row is formed from two horizontal lines. Row is defined by the <tr> element in the HTML Table.
- Cell – Cell is produced by Rows and Columns. When columns and rows collide together. Then a cell is formed. In the HTML Table, Actual Data is defined in the Cells only. <td> Element is defined by table data.
3. Name and usage of some important tags related to the HTML Table
The HTML table is defined by the Table Element. But, the only Table Element can not create a table. Therefore, some other tags are also used to create a complete table. Which are being described below:
- <table> – This Element defines the HTML Table.
- <tr> – The full name of this element is Table Row. Table Rows is defined from the Table Row Element.
- <td> – The full name of this element is Table Data. It is also known as Cell Data. Table Data is defined by table data in a table.
- <th> – The full name of this element is Table Heading. It is used to define Headings in the Use Table.
- <caption> – This element is used to define Table Title.
4. Creating HTML Table
Copy the HTML code below to your Notepad, or by typing this code with your hands, save the file by htmltable.html. And open it.
 |
| Creating HTML Table |
When you open your browser by saving the above code, you will get some kind of result.
 |
| HTML Table Tag |
Understand the example
From the above code we have created a simple HTML Table. In which 2 Rows and 4 Columns have been defined. <Tr> tag has been used to define table rows. And <td> tag has been used to define Data Cells in Table Rows.
Note: You want to define as many Columns in a row. You have to define as much as <td> tag.
5. Give Title in HTML Table
To define the title of the HTML Table, the <caption> element is used. Giving title to a table will keep the table easy to identify. You can give different types of Tables different titles.
Try it
 |
| Give Title in HTML Table |
The code above will give you this type of result:
 |
| Give Title in HTML Table Example |
Understand the example
In the HTML table above, we have defined the title. For this, we have used <caption> tag. We have given this table the title of My First HTML Table. You can give anything title according to you. To give a title, define <caption> tag after the <table> tag immediately.
6. Creating Heading in the Table
<Th> Tag is used to create heading in the HTML Table. The complete name of this element is Table Heading. In Heading in the table, we give each column a different name. This makes it easy to identify the data available in that column. Table Heading By Default Bold and Center is Aligned. You can also override this setting by CSS.
Table Heading is most commonly defined in the first row of the table. You can name the headings according to your Table Data.
Try it
 |
|
Creating Heading in the Table
|
The code above will give you this type of result:
 |
| create heading in the HTML Table |
7. Setting Border in the HTML Table
Border Attribute is used to make the border around the table. If you want to show the border in the table, keep the value “1”. And if you do not want to show a border, keep the value “0”.
In addition to applying a border, you can also set Border Color. The bordercolor attribute is used to set Border Color. You can set the color of your choice.
Note: You can also use Color to set Color or Hex Code of that color special. The choice is yours. We will ask you to use Hex Code.
Try it
 |
| Setting Border in the Table |
| The code above will give you this type of result:
|
| Setting Border in the Table Example |
8. Setting the Height and Width of the HTML Table
Height and width attributes are used to set the height and width of the table. You can create the height and width of the table according to your need.
Try it
 |
| Setting the Height and Width of the HTML Table |
The code above will give you this type of result:
 |
| Setting the Height and Width of the HTML Table Example |
9. Change Background of HTML Table
Two sets of attributes are used to set the background in the table.
bgcolor – With this attribute you can change the background color of the entire table or any particular cell.
background – You can also define Table Background with this Attribute. But, by this you can use any image as a table background.
Try it
 |
| Change Background of HTML Table |
The code above will give you this type of result:
 |
| Change Background of HTML Table Example |
10. Using Cell padding and Cell spacing Attributes
Cell padding and cell spacing attributes are used to adjust the white space between the Table Cells and Texts.
Cell padding is defined by the distance between the cell border and the content. And the distance between cells from cell spacing is defined.
Try it
 |
| Using Cell padding and Cell spacing Attributes |
11. Using Colspan and Rowspan Attributes of HTML Table
When we want to write data in more than one row and columns in the table, we have to use colspan and rowspan attributes for it.
Colspan attribute creates a column by merge two or more columns. And the Rowspan attribute makes a row by merge two or more rows.
Try it
 |
| Using Colspan and Rowspan Attributes of HTML Table |
What have you learned?
In this blog post we have given you complete information about the HTML Table. You know that the HTML Table is defined by the Table Element. Apart from this, you also have to know about some important attributes. We hope this lesson will prove useful to you.