Table in HTML

This guide covers table in HTML with practical context and easy-to-follow details. Use it to understand the subject and apply the information confidently.

The table is a fairly popular piece of content on websites. Using tables helps make site layout more beautiful, content is more intuitive and easier to track for users.

Table definition in HTML

HTML tables are defined by tags. Each row is defined by a tag, title defined by. By default the title will be bold and in the middle. Cells in the table defined by tags.

Tên H? Tu?i Lan Nguy?n 20 Hoa Phan 24

NameFullNameLan Nguyen 20 Hoa Phan 24

Note: Element is the place to store data of the table. They can include all elements of HTML such as text, images, lists, other tables.

Add borders to HTML tables

If not specified, the table will have no borders. Table borders are defined by theborderProperties of CSS.

table, th, td {
 border: 1px solid black;
}

Remember to define borders for both tables and cells in the table.

Border Collapse

If you want the space between the borders to be removed, use the property CSSborder-collapse.

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}

Cell Padding

Cell Padding is used to determine the distance between the contents of the cell and the border. If not specified, the cell to the border will have no spaces. To set this distance, use thepadding.CSS propertypadding.

th, td {
 padding: 15px;
}

Headline left By default the table title will be bold and centered. To align left, use CSStext-align.Propertiestext-align.

th {
 text-align: left;
}

Border Spacing

Border Spacing determines the distance between table cells, using the CSSborder-spacingTo determine.

table {
 border-spacing: 5px;
}

Note: If the table usesborder-collapse,border-spacingWill not work.

The umbrella spreads over many columns

To make a cell span multiple columns, use thecolspan.Attributecolspan.

Tên
?i?n tho?i


 V? An
 123456789
 123456788

The umbrella spreads over many rows

To make a cell span multiple columns, use therowspan.Attributerowspan.

Tên:
 La La


?i?n tho?i:
 987654321


 987654322

Add a description for the table

To add a description for the table, use the tag

Ti?n ti?t ki?m hàng tháng

Tháng
S? ti?n


 Sáu
 $120


 B?y
 $150

Note: CardMust be placed immediately after the card.

Add special styles to the table

To add a style to the table, use theid.Attributeid.

 Tên
H?
 Tu?i


 Lan
 Phan
 24


 Hoa 
 Ph?m 
 25 

Now define this style.

table#t01 {
 width: 100%;
 background-color: #f1f1c1;
}

Add other styles:

table#t01 tr:nth-child(even) {
 background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
 color: white;
 background-color: black;
}

With the above code, even rows will have #eee background color, odd number rows will have #fff background color, black background color title.

Previous article: Images in HTML

The following article: List in HTML