Table in HTML

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.

So what do we need to create a table in HTML? Is it complicated? Want to add color to the table border, how to add the background color to the text in the table? In this article TipsMake.com will answer those questions and guide you to basic operations with tables on HTML, in addition to "promotion" to add alternating color schemes for rows in the HTML table. Invite you to follow along.

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
 

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 the border properties 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 CSS border-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 the padding. CSS property padding.

 th, td { 
  padding: 15px; 
 } 

Headline left

By default the table title will be bold and centered. To align left, use CSS text-align. properties text-align.

 th { 
  text-align: left; 
 } 

Border Spacing

Border Spacing determines the distance between table cells, using the CSS border-spacing to determine.

 table { 
  border-spacing: 5px; 
 } 

Note: If the table uses border-collapse , border-spacing will not work.

The umbrella spreads over many columns

To make a cell span multiple columns, use the colspan. attribute colspan.

 
 Tên 
 Điện thoại 
  
 
  Vũ An 
  123456789 
  123456788 
  

The umbrella spreads over many rows

To make a cell span multiple columns, use the rowspan. attribute rowspan.

 
 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: Card   must be placed immediately after the card .

Add special styles to the table

To add a style to the table, use the id. attribute id.

 
  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