Hướng dẫn table background color html - bảng màu html

Background cho table

Để cho table dễ nhìn hơn, dễ phân biệt đâu là tiêu đề, đâu là nội dung, đâu là khu vực được đánh dấu, … chúng ta sử dụng nhiều cách khác nhau, một trong cách đó là background cho các thành phần table.

Table – có background với nằm ngang nằm ngang

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}




        th01
        th02
        th03
        th04
        th05
    

    

    

        
td01
        
td02
        
td03
        
td04
        
td05
    
    

        
td11
        
td12
        
td13
        
td14
        
td15
    
    

        
td21
        
td22
        
td23
        
td24
        
td25
    
    

        
td31
        
td32
        
td33
        
td34
        
td35
    
    

        
td41
        
td42
        
td43
        
td44
        
td45
    
  

Hiển thị trình duyệt:

Download file để thực hành

Table với background odd, evenodd, even

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}




        th01
        th02
        th03
        th04
        th05
    

    

    

        
td01
        
td02
        
td03
        
td04
        
td05
    
    

        
td11
        
td12
        
td13
        
td14
        
td15
    
    

        
td21
        
td22
        
td23
        
td24
        
td25
    
    

        
td31
        
td32
        
td33
        
td34
        
td35
    
    

        
td41
        
td42
        
td43
        
td44
        
td45
    

Hiển thị trình duyệt:

Download file để thực hànhodd, even theo chiều từ trái sang phải.

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle tr th.even {
    background-color: #9cadde;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr td.even {
    background-color: #e1d6c7;
}




        th01
        th02
        th03
        th04
        th05
    

    

    

        
td01
        
td02
        
td03
        
td04
        
td05
    
    

        
td11
        
td12
        
td13
        
td14
        
td15
    
    

        
td21
        
td22
        
td23
        
td24
        
td25
    
    

        
td31
        
td32
        
td33
        
td34
        
td35
    
    

        
td41
        
td42
        
td43
        
td44
        
td45
    

Hiển thị trình duyệt:

Download file để thực hành nằm dọc

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}




        th01
        
        th02
        
        th03
        
        th04
        
        th05
        

    
td01
        
td02
        
td03
        
td04
        
td05
    
    
td11
        
td12
        
td13
        
td14
        
td15
    
    
td21
        
td22
        
td23
        
td24
        
td25
    
    
td31
        
td32
        
td3
        
td34
        
td35
    
    
td41
        
td42
        
td4
        
td44
        
td45
    

Hiển thị trình duyệt:

Table với background odd, evenodd, even

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}




        th01
        
        th02
        
        th03
        
        th04
        
        th05
        

    
td01
        
td02
        
td03
        
td04
        
td05
    
    
td11
        
td12
        
td13
        
td14
        
td15
    
    
td21
        
td22
        
td23
        
td24
        
td25
    
    
td31
        
td32
        
td3
        
td34
        
td35
    
    
td41
        
td42
        
td43
        
td44
        
td45
    

Hiển thị trình duyệt:

Download file để thực hànhodd, even của cả và

Html viết:

Học Web Chuẩn

* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th {
    background-color: #cad8fa;
    padding: 5px;
}
.tableStyle tr.even th {
    background-color: #9cadde;
}
.tableStyle td {
    background-color: #f0e7da;
    padding: 5px;
}
.tableStyle tr.even td {
    background-color: #e1d6c7;
}




        th01
        
        th02
        
        th03
        
        th04
        
        th05
        

    
td01
        
td02
        
td03
        
td04
        
td05
    
    
td11
        
td12
        
td13
        
td14
        
td15
    
    
td21
        
td22
        
td23
        
td24
        
td25
    
    
td31
        
td32
        
td3
        
td34
        
td35
    
    
td41
        
td42
        
td43
        
td44
        
td45
    

Hiển thị trình duyệt: