Hướng dẫn border table html

Border cho table

Mặc định của table là các khoảng cách giữa các hàng và cột.
Chúng ta có thể sử dụng border trong css để điều chỉnh cho đẹp và dễ nhìn hơn.

Table – với border none

Đây là cách tận dụng các khoảng cách của các phần tử table để tạo border, khi này phần nền bên dưới sẽ là border cho table.

Html viết:

    

        
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 border 1px

Tạo một border duy nhất bao quanh table, phần khoảng cách còn lại được xem như là phần viền ngăn cách các phần tử.

Html viết:

    

        
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:

Border cho các phần tử của table (table cell)

Mỗi phần tử sẽ được bao bằng một border riêng biệt, tạo sự tách biệt giữa các phần tử.

Html viết:

    

        
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: