Điều hướng diễn đàn
Đóng
Liên kết tổng quan
Danh sách Forum

    [Hướng dẫn] Sử dụng BBcode Table

    Share
    avatar

    Tổng số bài gửi : 829

    Danh vọng : 258

    IceGold : 5652

    Ngày tham gia : 30/04/2013

    [Hướng dẫn] Sử dụng BBcode Table


    Tạo bảng đơn giản:
    bấm nút Insert table trên thanh công cụ soạn thảo, ta có :


    Ta sẽ có đoạn mã như sau: [ic]
    Nội dung
    [/ic]

    Trong đó:
    • [ic][td][/td][/ic] là cột của bảng
    • [ic][tr][/tr][/ic] là hàng của bảng
    • [ic]
      [/ic] là 1 bảng


    Ví dụ: Muốn có 5 cột ta làm như sau
    [ic][td]Cột 1[/td][td]Cột 2[/td][td]Cột 3[/td][td]Cột 4[/td][td]Cột 5[/td][/ic]

    Và đưa nó vào 1 hàng của bảng chỉ việc thêm [ic][tr][/ic]
    [ic][tr][td]Cột 1[/td][td]Cột 2[/td][td]Cột 3[/td][td]Cột 4[/td][td]Cột 5[/td][/tr][/ic]

    Cứ tạo hàng như vậy ta có được đoạn mã sau:
    Code:
    [table border="1"][tr][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td][/tr]
    [tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td][/tr]
    [tr][td]text 11[/td][td]text 12[/td][td]text 13[/td][td]text 14[/td][td]text 15[/td][/tr][/table]
    Và kết quả:
    text 1text 2text 3text 4text 5
    text 6text 7text 8text 9text 10
    text 11text 12text 13text 14text 15

    Muốn có màu nền cho cả bảng thì ta viết thêm [ic]bgcolor= "mã màu"[/ic] ( Lấy tại http://www.vn-icefox.net/h16-color ) vào trong thẻ table đầu tiên, muốn có màu nền cho một hàng nào đó thì ta viết thêm [ic]bgcolor= "mã màu"[/ic] vào trong thẻ tr của hàng đó, muốn có màu nền cho một ô nào đó thì ta viết thêm [ic]bgcolor= "mã màu"[/ic] vào trong thẻ td của ô đó. Ví dụ trong bảng trên vì muốn lấy hàng thứ nhất làm tiêu đề cho các cột nên ta cho màu xanh lam vào hàng đó, ta chỉ cần thêm [ic]bgcolor= "#0ABCE2"[/ic] Vào trong thẻ tr của hàng thứ nhất:

    Code:
    [table border="1"][tr bgcolor="#0ABCE2"][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td][/tr]
    [tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td][/tr]
    [tr][td]text 11[/td][td]text 12[/td][td]text 13[/td][td]text 14[/td][td]text 15[/td][/tr][/table]
    Kết quả có được:
    text 1text 2text 3text 4text 5
    text 6text 7text 8text 9text 10
    text 11text 12text 13text 14text 15

    Tạo bảng nâng cao:
    1. Dàn ô nhiều cột

    Mẫu:
    Ô qua nhiều cột
    text 1text 2text 3text 4text 5
    text 6text 7text 8text 9text 10
    text 11text 12text 13text 14text 15

    Đầu tiên, các bạn có một bảng cơ bản dư lày:
    text 1text 2text 3text 4text 5
    text 6text 7text 8text 9text 10
    text 11text 12text 13text 14text 15

    Code:
    [table align="center"][tr][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td][/tr][tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td][/tr][tr][td]text 11[/td][td]text 12[/td][td]text 13[/td][td]text 14[/td][td]text 15[/td][/tr][/table]
    Sau đó ta tạo thêm một hàng nữa bên trên các hàng đã có bằng cách: viết nội dung của hàng cần thêm vào ngay bên trên thẻ [ic][tr][/ic] đầu tiên. Sau đó viết thêm [ic]colspan="5"[/ic] (Số 5 = với số cột của bảng) vào thẻ [ic][tr][/ic] mới tạo, thêm màu nền, màu chữ cho hàng. Kết quả ta được thêm code của hàng trên cùng như sau:
    Code:
    [tr bgcolor="#0000A0"][td colspan=5][color=white][center][b]Ô qua nhiều cột[/b][/center][/color][/td][/tr]
    2. Dàn ô nhiều hàng
    STTtext 1text 2text 3text 4text 5
    A1
    text 6text 7text 8text 9text 10
    text 11text 12text 13text 14text 15

    So với mẫu cơ bản thì trong mẫu này có thêm một cột nữa ở bên trái. Cột này khác với 5 cột kia là nó chỉ có 2 ô, trong đó có một ô A1 dàn xuống bao cả hai hàng của các cột khác.

    Cách làm:
    Từ 1 bảng table ta viết thêm vào thẻ [ic][td][/ic] ban đầu [ic]rowspan="2"[/ic]

    Ta có bảng như sau:
    text 1text 2text 3Ghi chú
    text 4text 5text 6
    Nội dung
    text 7text 8text 9
    "Học, học nữa, học mãi"
    (Vladimia Ilis Lenin)

    avatar

    Tổng số bài gửi : 829

    Danh vọng : 258

    IceGold : 5652

    Ngày tham gia : 30/04/2013

    Cellspacing trong Table

    Như các bạn thấy ví dụ ở trên Table sẽ có những đường viền "khó chịu"
    Đừng lo vì đã có cellspacing
    cellspacing - Xóa khoảng cách của border

    Ví dụ:
    Testcellspacing
    Ta có mã:
    Code:
    [table border="1px" cellspacing="10"][tr][td]Test[/td][td]cellspacing[/td][/tr]
    [tr][td]cellspacing[/td][td]Test[/td][/tr][/table]

    Ví dụ cellspacing về 1:
    Testcellspacing
    Ta có mã:
    Code:
    [table border="1px" cellspacing="1"][tr][td]Test[/td][td]cellspacing[/td][/tr]
    [tr][td]cellspacing[/td][td]Test[/td][/tr][/table]

    avatar

    Tổng số bài gửi : 829

    Danh vọng : 258

    IceGold : 5652

    Ngày tham gia : 30/04/2013

    Hỗ trợ post bài:

    Kirigaya Kazuto
    Founter VnIceFox
    Đẹp trai nhất forum
    Đùa tý! Test thôi

    Code:
    [table width="100%"][tr][td width="30%"]
    Ảnh
    [/td][td width="70%" style="padding-left: 10px"]
    Nội dung giới thiệu
    [/td][/tr][/table]


    ________________________
    Nội quy diễn đàn - Báo lỗi trên diễn đàn! - Góp ý

    Sponsored content

      Hôm nay: Wed Sep 20, 2017 4:25 pm

      Skin [VnIF] ver7.1.3
      © [VnIF] IceFox 2013 - 2014
      Design by: K.
      Ghi rõ nguồn VnIceFox khi sử dụng các bài viết từ forum
      Diễn đàn hiển thị tốt nhất ở Độ Phân dải: 1280x1024 trở lên