Bảng trong HTML

Trang trước
Trang sau  

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 link… vào các ô trong bảng.

Bảng HTML được tạo ra bằng cách sử dụng thẻ trong đó: thẻ được sử dụng để tạo các hàng và thẻ
được sử dụng để tạo các ô.

Ví dụ bảng trong HTML




Vi du bang trong HTML






Row 1, Column 1
Row 1, Column 2




Row 2, Column 1
Row 2, Column 2

Chạy đoạn mã trên sẽ tạo bảng sau:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Tại đây border là một thuộc tính của thẻ và được sử dụng để đặt Border (đường viền) dọc tất cả các ô. Nếu bạn không cần Border, bạn có thể sử dụng border="0".

Tiêu đề bảng trong HTML

Tiêu đề bảng có thể được xác định bằng thẻ

- Tạo một tiêu đề bảng riêng biệt.
    • - Chỉ nội dung chính của bảng.
    • - Tạo một phần chân bảng riêng biệt.

    Một bảng có thể chứa nhiều phần tử

    để chỉ các vùng, nhóm của dữ liệu. Tuy nhiên điều lưu ý là các thẻ và sẽ xuất hiện trước các thẻ

    Ví dụ

    


Vi du bang trong HTML
    . Thẻ này để thế chỗ cho thẻ , mà đượ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 dưới, ngoài ra bạn có thể sử dụng phần tử trong bất kỳ hàng nào.

    Ví dụ

    


Vi du tieu de bang



    

    
Ten nhan vien
Luong

    

    
Minh Chinh
5000

    

    
Duy Manh
7000

    Kết quả hiển thị là:

    Ten nhan vien Luong
    Minh Chinh 5000
    Duy Manh 7000

    Hai thuộc tính cellpadding và cellspacing trong HTML

    Hai thuộc tính này bạn sử dụng để điều chỉnh khoảng trống trắng trong các ô bảng. Thuộc tính cellspacing xác định độ rộng của Border, trong khi thuộc tính cellpadding 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:

    Ten nhan vien Luong
    Minh Chinh 5000
    Duy Manh 7000

    Thuộc tính colspan và rowspan trong HTML

    Bạn sử dụng thuộc tính colspan để nhập hai hay nhiều cột vào một cột. Tương tự là thuộc tính rowspan để nhập hai hay 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à:

    Column 1 Column 2 Column 3
    Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
    Row 2 Cell 2Row 2 Cell 3
    Row 3 Cell 1

    Xác định background 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 của bảng:

    • Thuộc tính bgcolor - 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 background - 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 bordercolor.

    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:

    Column 1 Column 2 Column 3
    Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
    Row 2 Cell 2Row 2 Cell 3
    Row 3 Cell 1

    Dưới đây là một ví dụ về sử dụng thuộc tính background. Tại đây chúng 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 Tiêu đề bảng.

    Column 1 Column 2 Column 3
    Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
    Row 2 Cell 2Row 2 Cell 3
    Row 3 Cell 1

    Chiều cao và độ rộng bảng trong HTML

    Bạn sử dụng thuộc tính width và height để 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 khu vực đặt 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:

    Row 1, Column 1 Row 1, Column 2
    Row 2, Column 1 Row 2, Column 2

    Phụ đề bảng trong HTML

    Thẻ caption đượ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:

    Vi du phu de bang
    row 1, column 1row 1, columnn 2
    row 2, column 1row 2, columnn 2

    Đầu, thân và chân bảng trong HTML

    Bảng có thể được chia làm 3 phần: một tiêu đề, phần thân chứa dữ liệu và một phần 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.

    Dưới đây là 3 phần tử riêng rẽ trong một bảng:
    Day la phan tieu de bang
    Day la phan chan bang
    Cell 1 Cell 2 Cell 3 Cell 4

    Kết quả là:

    Day la phan tieu de bang
    Day la phan chan bang
    Cell 1 Cell 2 Cell 3 Cell 4

    Lồng bảng vào trong bảng trong HTML

    Bạn có thể lồng một bảng vào trong một bảng khác. Bạn có thể sử dụng hầu hết tất cả các thẻ bên trong thẻ

    		.

    Ví dụ

    Ví dụ dưới đây sử dụng một bảng khác và các thẻ khác bên trong một ô bảng.

    


Vi du bang trong HTML



    

    

   
    
   
    
   Ten nhan vien
   Luong
   
    
   
    
   Minh Chinh
   5000
   
    
   
    
   Duy Manh
   7000

    Nó sẽ cho kết quả như sau:

    Ten nhan vien Luong
    Minh Chinh 5000
    Duy Manh 7000
    Trang trước
    Trang sau  
    Bài viết liên quan