Đường viền bảng html

Để tạo bảng trong HTML, chúng ta sử dụng bảng thẻ. Bảng được tạo bởi các dòng (hàng) và các cột (cột). Để tạo hàng chúng ta sử dụng thẻ tr và để tạo bảng chúng ta sử dụng thẻ td

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

Nếu như chúng ta không muốn có đường viền trong bảng thì chúng ta thiết lập thuộc tính border = 0
2. bảng tiêu đề
Chúng ta tạo tiêu đề cho bảng bằng cách sử dụng thẻ thứ như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


   
      HTML Table Header
   
   
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
         
            Shabbir Hussein
            7000
         
      
   
   

3. Khoảng cách dòng và cột
Chúng ta có thể thiết lập khoảng cách giữa các ô trong bảng bằng cách sử dụng 2 thuộc tính cellpadding và cellspacing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


   
      HTML Table Cellpadding
   
   
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
            Shabbir Hussein
            7000
         
      
   
   

4. Sắp xếp các dòng và cột
Chúng ta có thể hợp nhất các dòng và cột bằng cách sử dụng thuộc tính colspan và rowspan như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


   
      HTML Table Colspan/Rowspan
   
   
   
      
         
            Column 1
            Column 2
            Column 3
         
         
            Row 1 Cell 1
            Row 1 Cell 2
            Row 1 Cell 3
         
         
            Row 2 Cell 2
            Row 2 Cell 3
         
         
            Row 3 Cell 1
         
      
   
   

5. Thiết lập chiều cao và chiều dài cho bảng
Chúng ta sử dụng thuộc tính chiều rộng và chiều cao để xác định chiều cao và chiều rộng cho bảng



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


   
      HTML Table Width/Height
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
   
   

6. Tiêu đề cho bảng
Chúng ta có thể thêm tiêu đề cho bảng bằng thuộc tính chú thích như sau


   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

0


   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

1
Chúng ta sử dụng thead để tạo tiêu đề trong bảng, tbody để chỉ nội dung bên trong bảng và tfoot để tạo chân trang
 
Các bảng HTML cho phép lập trình viên sắp xếp các dữ liệu như văn bản, hình ảnh, đường liên kết… vào các ô trong bảng
Bảng HTML được tạo ra bằng cách sử dụng thẻ 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
0 là thuộc tính của thẻ 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
1
Bảng tiêu đề trong HTML
Bảng tiêu đề có thể được xác định bằng thẻ

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
2

    
        Vi du tieu de bang
    
    
        
. Thẻ này để thay thế cho thẻ, được sử dụng để đại diện cho các ô dữ liệu. Thông thường, bạn sẽ đặt hàng đầu tiên của bảng là tiêu đề như hình bên dưới, ngoài ra bạn có thể sử dụng phần tử trong bất kỳ hàng nào. Ten nhan vienLuongMinh Chinh5000Duy Manh7000

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
3

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
4

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
5 xác định độ rộng của Border, trong khi thuộc tính 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
6 thay cho khoảng cách giữa Border ô và nội dung trong một ô



Ví dụ

    
        Vi du the cellpadding va cellspacing trong HTML
    
    
        
            
                Ten nhan vien
                Luong
            
            
                Minh Chinh
                5000
            
            
                Duy Manh
                7000
            
        
    
Kết quả như sau
Thuộc tính colspan và rowspan trong HTML
Bạn sử dụng thuộc tính 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
7 để nhập hai hoặc nhiều cột vào một cột. Tương tự là thuộc tính 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
8 để nhập hai hoặc nhiều hàng vào một hàng
Ví dụ

    
        Vi du the colspan va rowspan trong HTML
    
    
        
            
                Column 1
                Column 2
                Column 3
            
            Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
            Row 2 Cell 2Row 2 Cell 3
            Row 3 Cell 1
        
    
Kết quả hiển thị là
Xác định nền cho bảng trong HTML
Bạn có thể sử dụng một trong hai cách sau để thiết lập nền tảng của bảng
Thuộc tính 

    
        Vi du bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
9 - Bạn sử dụng để thiết lập màu nền cho cả bảng hoặc chỉ cho một ô
Thuộc tính 

    
        Vi du tieu de bang
    
    
        
0 - Bạn sử dụng để thiết lập ảnh nền cho cả bảng hoặc chỉ cho một ô
Bên cạnh đó, bạn có thể thiết lập màu cho Border bằng cách sử dụng thuộc tính 

    
        Vi du tieu de bang
    
    
        
1
Ví dụ

    
        Vi du tao background cho bang trong HTML
    
    
        
            
                Column 1
                Column 2
                Column 3
            
            Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
            Row 2 Cell 2Row 2 Cell 3
            Row 3 Cell 1
        
    
Nó sẽ tạo ra kết quả sau



Dưới đây là một ví dụ về việc sử dụng thuộc tính 

    
        Vi du tieu de bang
    
    
        
0. Tại đây, tôi sử dụng một hình có trong thư mục ảnh

    
        Vi du tao background cho bang trong HTML
    
    
        
            
                Column 1
                Column 2
                Column 3
            
            Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
            Row 2 Cell 2Row 2 Cell 3
            Row 3 Cell 1
        
    
Kết quả hiển thị là. Ở đây ảnh nền không áp dụng cho bảng Tiêu đề
Chiều cao và chiều rộng của bảng trong HTML
Bạn sử dụng các thuộc tính 

    
        Vi du tieu de bang
    
    
        
3 và 

    
        Vi du tieu de bang
    
    
        
4 để thiết lập độ rộng và chiều cao của bảng. Bạn có thể thiết lập nó bằng Pixel hoặc phần trăm của vùng đặt cấu hình
Ví dụ

    
        Chieu cao va do rong bang trong HTML
    
    
        
            
                Row 1, Column 1
                Row 1, Column 2
            
            
                Row 2, Column 1
                Row 2, Column 2
            
        
    
Nó sẽ tạo ra kết quả sau
Bảng tiêu đề phụ trong HTML
Thẻ 

    
        Vi du tieu de bang
    
    
        
5 được sử dụng để lưu giữ một tiêu đề hoặc lời giải thích cho bảng và nó được hiển thị trên đầu của bảng. Thẻ này là thẻ cũ trong các phiên bản mới của HTML/XHTML
Ví dụ

    
        Vi du phu de bang trong HTML
    
    
        
            Vi du phu de bang
            
                row 1, column 1row 1, columnn 2
            
            
                row 2, column 1row 2, columnn 2
            
        
    
Đoạn mã này sẽ tạo ra kết quả sau
Đầu, thân và bảng trong HTML
Table can be chia làm 3 phần. một tiêu đề, phần thân chứa dữ liệu và một bảng cuối bảng chứa dòng tổng kết. Đầu và chân bảng thì tương tự như đầu trang và chân trang trong các tài liệu văn bản, trong khi phần thân là nội dung chính được hiển thị trong bảng