Study the table (table) in HTML


In the previous article, Taimienphi.vn introduced you to the img tag in HTML. In the following article, Taimienphi.vn will introduce you to tables 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

Table of Contents:
1. Table (table) in HTML
2. Add borders to the table in the HTML
3. The border-collapse property
4. Add Cell Padding to tables in HTML
5. Text-align attribute
6. Border-spacing attribute
7. The colspan attribute in HTML
8. The rowspan attribute in HTML
9. Add captions to the table in HTML
10. Add Style to the table
11. Summary

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:

Bang table in html

The result will look like this:

bang table in html 2

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:

bang table in html 3

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

bang table in html 4

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:

bang table in html 5

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

Bang table in html 6

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:

bang table in html 7

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

bang table in html 8

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:

bang table in html 9

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

bang table in html 10

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:

bang table in html 11

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:

bang table in html 12

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.

bang table in html 13

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

bang table in html 14

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.

bang table in html 15

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

bang table in html 16

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:

bang table in html 17

Results returned after applying the tag caption Look like this:

bang table in html 18

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:

bang table in html 19

Now you can adjust the special styles for the table:

bang table in html 20

The result will look like this:

bang table in html 21

Add other styles:

bang table in html 22

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.

.

Add a Comment

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