Study the table (table) in HTML

In HTML, tables are identified by tags table. Refer to the following article of Taimienphi.vn to learn details of tables in HTML.

Table in HTML

1. Table (table) in HTML

As mentioned above, tables in HTML are identified by tags table.
Each row in the table is identified by a tag tr. Table titles are identified by tags th. By default, table headings are in bold and centered; the table’s data / cells are identified by tags td.
For example: The following example illustrates the table in HTML:

The result will look like this:

Note: Elements td are elements that contain table data. These elements can contain all kinds of HTML elements, text, images, lists, etc.

2. Add borders to the table in the HTML

To set the borders of a table in HTML, we use properties border in CSS.
For example: In the example below we will add borders to the table in HTML:

The results returned after applying borders to the table look like this:

Note: We must apply borders to both the table and the table cells.

3. The border-collapse property

If we want to remove the borders, leaving only a single border in the table, we use the attribute border-collapse in CSS.
For example: In the example below we will use the border-collapse property to remove borders, leaving a single line for the table in HTML:

The result returned after applying the border-collapse property to the table looks like this:

4. Add Cell Padding to tables in HTML

Cell Padding specifies the distance between the content in the cell and the border. If we do not specify padding, the cells in the table will not display padding.
To specify padding for the table in HTML, we use the padding property in CSS:
For example: In the example below we will use the padding attribute to specify padding for the table in HTML:

The result returned after applying padding attribute to the table in HTML looks like this:

5. Text-align attribute

The default table title is in bolded and centered text.
To align the table header to the left, we use the attribute text-align in CSS.
For example: Refer to the example illustrating aligning table heading in HTML to the left below:

The result returned after applying the text-align attribute to align the table headers in HTML looks like this:

6. Border-spacing attribute

To set the distance between the borders of the table (table) in HTML we use the attribute border-spacing.
For example: The following example illustrates how to use the border-spacing property border-spacing to set the distance between the borders of the table:

The result returned after applying the border-spacing attribute to set the distance between the borders of the table in HTML looks like the following:

Note: If the table has only one border, we do not use border-spacing.

7. The colspan attribute in HTML

To determine how many columns a cell expands in a table, we use the attribute colspan.
For example: The following example illustrates how to use the colspan attribute to determine how many columns a cell in a table expands.

The result returned after applying the colspan attribute to determine how many columns the cell in an expanded table looks like:

8. The rowspan attribute in HTML

Properties rowspan in HTML to determine how many rows a table in a table will expand.
For example: In the following example, we will use the rowspan property to determine how many rows in a table expand.

The results returned after applying the rowspan attribute to determine how many rows a table in the expanded table look like:

9. Add captions to the table in HTML

To add comments to tables in HTML, we use tags caption.
For example: In the example below we will use the tag caption To add a caption to the table:

Results returned after applying the tag caption Look like this:

Note: Tags caption must be inserted the day after the tag table.

10. Add Style to the table

To determine the special style for the table, we add properties id for tables.
For example: The following example illustrates how to use the id attribute to define the style for tables in HTML:

Now you can adjust the special styles for the table:

The result will look like this:

Add other styles:

11. Summary

– Using element table in HTML to specify a table.
– Using element tr in HTML to specify rows in the table.
– Using element td in HTML to specify data in the table.
– Using element th in HTML to specify the table title.
– Using element caption to specify a comment for the table.
– Use properties border in CSS to add borders to the table.
– Use properties border-collapse in CSS to remove, only a single border for the table.
– Use properties padding in CSS to add padding to table cells.
– Use properties text-align in CSS to left justify the text in a cell.
– Use properties colspan To determine how many columns a cell in an extended table adds.
– Use properties rowspan to determine how many rows a cell in an extended table adds.
– Use properties id to create a special style for the board.

https://thuthuat.taimienphi.vn/bang-table-trong-html-50614n.aspx
The above article Taimienphi.vn has just introduced you to tables (tables) in HTML. In addition, if you have any questions or questions, you can leave your comments to learn HTML better, please comment below the article. In the next articles, Taimienphi.vn will introduce you further List in HTML Please.