search

Gộp cột trong HTML

Ngày đăng: 27/12/2022
Trả lời: 0
Lượt xem: 188

Bảng biểu (table) trong HTML để trình bày dữ liệu gồm có các dòng (row), các ô bảng (cell), phần tiêu đề bảng (heading). Một ô bảng được chỉ ra gồm có dòng và cột - tại đó để hiện thị dữ liệu, bạn có thể mở rộng một ô bảng tương ứng với nhiều dòng, nhiều cột (nhóm nhiều ô bảng thành một ô bảng) để hiện thị dữ liệu. Ví dụ đây là bảng:

Show
cellcellcellcellcell = gộp 2 cộtcell = 2 cột + 2 dòngcellcell

Tạo bảng biểu với thẻBảng là cấu trúc phức tạp, toàn bộ nội dung của bảng được đặt vào thẻTrong thẻcó thuộc tính border để thiết lập độ rộng của các dòng kẻ của bảng (hiện giờ nên dùng CSS). Độ rộng tính bằng pixel - nếu bằng không thì bảng không có các đường kẻ. Ví dụ - có các đường kẻ lưới rộng 1px

Thẻ

Trong nội dung bảng, phần tử nhỏ nhất để chứa dữ liệu là (table data), ví dụ có ba ô bảng (cell), hiện thị dữ liệu:


    
C1
    C2
    C3
    Abc1
    Abc2
    Abc3
    Abc4
    Abc5
    Abc6
C1C2C3Abc1Abc2Abc3Abc4Abc5Abc6

Các ô bảng này khi hiện thị sẽ xuất hiện liền kề nhau theo chiều ngang trên cùng một dòng.

Thẻ là nơi chứa dữ liệu của bảng, nó có thể chứa các thẻ HTML khác như văn bản, hình ảnh, danh sách thậm chí chứa một bảng khác.

Thẻ

Để nhóm các phần tử thuộc về một dòng, thì dùng thẻ , ví dụ 9 phần tử phía trên sẽ nhóm thành ba dòng thì như sau:


    

        C1
        C2
        C3
    

    

        Abc1
        Abc2
        Abc3
    

    

        Abc4
        Abc5
        Abc6

Kết quả là bảng có ba dòng như sau:

C1C2C3Abc1Abc2Abc3Abc4Abc5Abc6

Thuộc tính colspan, rowspan của

colspan trong có thể gán một giá trị số nguyên dương (mặc định là 1),

rowspan trong có thể gán một giá trị số nguyên dương (mặc định là 1), cho biết cell (ô bảng) đó tương đương bao nhiêu dòng.

Ví dụ:


    

        C1
        C2
        C3
    

    

        Abc1
        Abc2
        Abc3
    

    

        Abc4
        Abc5
        Abc6
C1C2C3Abc1Abc2Abc3Abc4Abc5Abc6

Ô bảng Abc2 tương đương 2 cột, ô bảng Abc3 chiếm 2 dòng

Thẻ

Thẻ tương tự như thẻ (nằm trong thẻ ) được dùng để đánh dấu tiêu đề của một nhóm ô bảng (cell)


    

        
        Cột 1
        Cột 2
        Cột 3
    


    

        Dòng 1
        C1
        C2
        C3
    

    

        Dòng 2
        Abc1
        Abc2
        Abc3
    

    

        Dòng 3
        Abc4
        Abc5
        Abc6
Cột 1Cột 2Cột 3Dòng 1C1C2C3Dòng 2Abc1Abc2Abc3Dòng 3Abc4Abc5Abc6

Thẻ

Thẻ thường tạo ngay sau khi mở thẻ để thiết lập tiêu đề của bảng. Vị trí tiêu đề có thể thiết lập bằng CSS với thuộc tính caption-side bằng top hoặc bottom
BẢNG DỮ LIỆUC1C2C3Abc1Abc2Abc3Abc4Abc5Abc6BẢNG DỮ LIỆUC1C2C3Abc1Abc2Abc3Abc4Abc5Abc6

Thẻ

Nếu muốn nhóm các dòng đánh dấu là phần đầu của các cột thì dùng thẻ , ý nghĩa tương tứ nhóm dòng là phần cuối của cột dùng thẻ

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về cấu trúc và cách tạo bảng bằng thẻ HTML cho trang web của mình. Bây giờ hãy cùng nhau tìm hiểu nhé!

1) Bảng trong HTML:

Đầu tiên mình xin nói sơ qua một tí về bảng. Bảng được tạo thành bằng cách sắp xếp dữ liệu theo hàng và cột giúp chúng ta tra cứu giá trị một cách nhanh chóng hoặc so sánh giá trị của nhiều dạng dữ liệu khác nhau... Để làm rõ hơn các bạn hãy xem ví dụ minh họa của mình về bảng :

Như các bạn thấy thì mình có thể dễ dàng tìm ra những người trong lớp thích môn thể thao nào một cách nhanh chóng thông qua bảng số liệu này. Các bạn cũng cần lưu ý là tên của bảng phải khái quát được chức năng và dữ liệu của bảng mang lại cho người dùng. Vậy cách tạo bảng trong HTML như thế nào?
Bảng được tạo bởi thẻ

trong HTML với dữ liệu dòng được tạo bởi thẻ , dữ liệu trong ô được tạo bởi thẻ : Đây là từ viết tắt của table row có nghĩa là dòng trong bảng
  • Thẻ
    • và ô tiêu đề được tạo bởi thẻ . Ở đây mình lưu ý đến những từ viết tắt tiếng anh trong tên thẻ của bảng giúp các bạn dễ nhớ hơn:

    • Thẻ
    : Đây là từ viết tắt của table data có nghĩa là dữ liệu trong bảng
  • Thẻ
    		• : Đây là từ viết tắt của table headers có nghĩa là tiêu đề trong bảng

    Các bạn xem ví dụ minh họa của mình về cấu trúc của bảng nhé:

    Như các bạn thấy thì bên trong thẻ

    thì sẽ chứa thẻ con là là để hiện thị số hàng có trong bảng và
    hiển thị số ô có trong một dòng. Để cho do hiểu thì chúng mình hãy cùng nhau đi vào chi tiết cấu trúc một bảng nhé:

    Mã Code HTML

















     
     Tên học sinh Môn thể thao 
     
     Nguyễn Văn A Đá banh 
     
     Nguyễn Văn B Cầu lông 
     
     Nguyễn Văn C Bóng chuyền

    Hiện thị trên Web
    Tên học sinhMôn thể thaoNguyễn Văn AĐá banhNguyễn Văn BCầu lôngNguyễn Văn CBóng chuyền

    Các bạn có thể thấy một bảng trong HTML khá là đơn giản và rất khó nhìn vì vậy bây giờ chúng ta sẽ đi vào các thuộc tính trong bảng giúp cho nó sinh động và hữu ích hơn.

    Thuộc tính style trong bảng:

    Giá trị thuộc tính border trong thuộc tính style giúp chúng ta có thể tạo đường viền xung quanh bảng giúp cho nó dễ nhìn hơn. Chúng ta đã học thuộc tính style trong bài đoạn văn với cấu trúc như sau:

    Nội dung

    Thì các bạn thấy là thuộc tính này được đặt trực tiếp vào thẻ HTML. Nhiều khi có quá nhiều giá trị thuộc tính CSS trong thuộc tính style sẽ làm cho chúng ta sau này nhìn vào code dễ bị rối và khó khăn trong việc sữa lỗi. Vậy nên chúng ta có một cách nữa là đặt thẻ này nằm ở trong thẻ . Cũng với ví dụ thẻ

    nhưng mình sẽ đặt thuộc tính style nằm trong thẻ :


     
     
     
     
     
     
    Nội Dung

    Ta có thể thấy là ở trong thẻ thì thuộc tính style đã được chuyển sang thẻ



















    Tên học sinh Môn thể thao
    Nguyễn Văn A Đá banh
    Nguyễn Văn B Cầu lông
    Nguyễn Văn C Bóng chuyền



    Hiện thị trên Web
    Tên học sinhMôn thể thaoNguyễn Văn AĐá banhNguyễn Văn BCầu lôngNguyễn Văn CBóng chuyền

    Như các bạn thấy thì mình đã có đường viền cho bảng. Còn các giá trị thuộc tính CSS trong thẻ style này thì mình sẽ nói rõ hơn trong khi học CSS nhé. Sẽ có vài bạn học qua thì sẽ nói tại sao mình phải làm rắc rối như vậy vì thẻ

    cũng có thuộc tính border cho phép tạo ra đường viền như ví dụ sau đây:

    Mã Code HTML

















    Tên học sinhMôn thể thao
    Nguyễn Văn AĐá banh
    Nguyễn Văn BCầu lông
    Nguyễn Văn CBóng chuyền

    Hiện thị trên Web
    Tên học sinhMôn thể thaoNguyễn Văn AĐá banhNguyễn Văn BCầu lôngNguyễn Văn CBóng chuyền

    Các thuộc tính như vậy trong bảng HTML thì không khuyến khích sử dụng vì bây giờ thì nó không được hỗ trợ trong HTML5. Nên chúng ta phải dùng giá trị thuộc tính CSS để xét đường viền cho bảng. Cũng có các thuộc tính khác mà cũng không được sử dụng trong bảng nữa là align, bgcolor, cellpadding, cellspacing, width... Các thuộc tính này nếu các bạn muốn tìm hiểu để đọc và hiểu các thuộc tính bảng trong HTML cũ thì có thế truy cập vào đây xem nhé Thuộc tính cũ trong table.

    Cách gộp cột trong bảng HTML:
    Trong bảng có thuộc tính cho phép chúng ta gộp cột có tên là colspan được sử dụng trong hai thẻ là     		và . Như tên gọi thì chức năng của nó giúp chúng ta gộp hai hay nhiều ô theo chiều từ trái sang phải lại với nhau. Bây giờ thì chúng ta hãy cùng nhau đi tìm hiểu thông qua ví dụ sau đây nhé:

    Mã Code HTML


















     
      7h đến 8h 8h đến 9h 9h đến 10h 
     
     Thứ hai Toán Văn Anh 
     
     Thứ ba Thể Dục Lịch Sử

    Hiện thị trên Web
    7h đến 8h8h đến 9h9h đến 10hThứ haiToánVănAnhThứ baThể DụcLịch Sử

    Ở đây thì các bạn thấy ở ô thể dục thì mình đã gộp hai cột với nhau bằng thuộc tính là colspan="2". Bằng cách thay đổi giá trị thuộc tính này thì có thể gộp được hai hay nhiều cột như colspan="3",colspan="4"... Nhưng các bạn phải để ý là giá trị thuộc tính gộp cột lúc nào cũng nhỏ hơn so với số cột có trong bảng nhé. Một lưu ý nhỏ nữa là mình ghi trực tiếp thuộc tính style vào các thẻ th, td để các bạn dễ nhìn và đỡ mất công phải ghi thêm một file HTML để cài đặt thẻ