In this article, I will show you how to create a table in HTML, through which you will know the table's properties such as: colspan , rowspan , cellpadding and cellspacing .

HTML table is used to display data in tabular form. Each table will be divided into two components, which are columns and rows . They are made up of the tags table , tr , td , tbody , thead , tfoot .

In web applications, tables are rarely used, only data management applications are used often. The reason may be that the structure of the table looks very heavy, it is difficult to combine with CSS to create complex interface templates. However, with the display of table data, the table is still the number 1 priority.

What is the table tag in HTML?

The table tag in HTML is a special tag, used to display tabular data in the browser. Each table will have a defined number of rows and columns. You can also merge two adjacent cells into one cell just like in Word. See the picture below to understand more about this card.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td>Hàng 1 cột 1</td> <td>Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

In which :

• The border="1" property is to declare the border of the table
• The cellspacing="0" attribute declares the distance between the top and bottom borders of the border
• The cellpadding="5" attribute declares the distance between the content in the cell and the border
• If you want to add a column just add a td
• If you want to add a row, just add one more tr

Please manually change the number of tr and td tags to observe, this will help you better understand the table.

Colspan in HTML

Colspan html is an attribute of the table tag, it is used to merge cells together on the same row. For example, if you want to merge 2 cells together, declare the value for it as 2, merge 3 cells, declare 3.

When declaring colspan , the number of td tags of the current row will be reduced compared to other rows.

As in the example below, the first tr tag has only two td tags, and the second tr tag has up to 3 td tags. The reason is that in the first tr tag there is a td tag with colspan = 2 .

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Rowspan in HTML

Similar to colspan, rowspan is used to merge two cells together. However, it will aggregate by column, not by row. How many cells you want to merge, enter the number for it.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td rowspan="2">Hàng 1 cột 1</td> <td>Hàng 1 cột 3</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Tag group thead – tbody – tfoot

In the article to learn what HTML is, I gave a brief introduction to the layout of the website, including components such as header , content , footer , the table is similar. People will divide the table into three main components, which are header , body and footer with thead , tbody and tfoot tags respectively.

 <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tbody> <tr> <td> mitrun </td> <td> mitrun1001@gmail.com </td> </tr> <tr> <td> web888 </td> <td> web888.vn@gmail.com </td> </tr> </tbody> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Run it up, the result is that the interface is still the same as the usual way. However, if we now change the position of the tbody group and thead see what happens.

Example : Change position of thead, tbody and tfoot . tags

 <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <td> TheHalfheart </td> <td> TheHalfHeart@gmail.com </td> </tr> <tr> <td> Freetuts </td> <td> Freetuts.net@gmail.com </td> </tr> </tbody> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Running up the interface is still normal. According to the rules of compilation, the tbody should be on top because it's on top, but it's right in the middle. This means that if we use these groups, no matter where they are placed, the display will still follow thead – tbody – tfoot rule.

The most commonly used HTML table attributes

Here, I would like to summarize the 4 attributes of the table tag in HTML, save them for later use.

• border : Used to declare the border size of the table.
• cellspacing : Declare the width of the border.
• cellpadding : Declare the distance between the border and the data in the cell.
• width : Declare the width of the columns ( in the tr tag ).

Frequently asked questions about HTML tables

How to create table without border in HTML?

To create a table without borders, we will set the border="0" property.

 <table border="0"> </table>

How to create space between letters and border of cells in table

We use the cellpadding property to create space between the data and the border of the table. Input units are in pixels.

 1 2 3 <table celpadding="10"> </table>

How to set the length of the columns in the table

We set the width property in the tr tags to set the length of the columns.

 <table celpadding="10"> <tr width="20%"> </tr> <tr width="80%"> </tr> </table>

So in this article, I introduced the HTML tags related to the table. The first thing to note in this article is how to combine multiple cells with two tags colspan and rowspan . The second is to understand the thead , tbody and tfoot tag groups to assemble the correct position for it. This article I will stop here, thank you for following this series.