Latest topics
Today at 8:27 am
3/6/2020, 4:07 pm
30/5/2020, 10:05 am
30/5/2020, 10:02 am
24/5/2020, 8:44 pm
20/5/2020, 4:20 pm
20/5/2020, 4:19 pm
20/5/2020, 4:18 pm

BBCode tạo bảng

Waifu
mr.equal
mr.equal
Administrator
Xem lý lịch thành viên

Waifu Order : FA
. :
Online
Offline

Posts : 4924
Power : 10137
Faith : 2478
Ngày tham gia : 07/11/2014
Địa điểm : SDM

BBCode tạo bảng Empty BBCode tạo bảng

Bài gửi by mr.equal on 13/6/2015, 7:26 am

[indent]BBCode tạo bảng[/indent]

Giới thiệu về BBCode table, tr và td.

[hs1]BBCode table, tr và td[/hs1]
[box="border: 5px double black; float: left; margin-right: 5px; padding: 5px; background-color: #fff"]
Mục lục
[toc][/box][hs2]table[/hs2]: Tạo bảng
[indent][cbox][ob]table[cb]{Nội dung}[ob]/table[cb][/cbox]
BBCode table chỉ đơn giản là tạo ra không gian chứa nội dung của bảng, chưa tạo ra bảng thực sự.
Nội dung của bảng chỉ bao gồm các dòng, các phần khác không phải là dòng của bảng đều sẽ bị đẩy lên trên table.
[/indent]

[hs2]tr[/hs2]: Tạo dòng trong bảng
[indent][cbox][ob]tr[cb]{Nội dung}[ob]/tr[cb][/cbox]
BBCode tr chỉ đơn giản là tạo ra không gian chứa các ô của nó, chưa tạo ra một dòng thực sự.
Nội dung của dòng chỉ bao gồm các ô, các phần khác không phải là ô đều sẽ bị đẩy lên trên table.
[/indent]

[hs2]td[/hs2]: Tạo ô trong bảng
[indent][cbox][ob]td[cb]{Nội dung}[ob]/td[cb][/cbox]
BBCode td tạo ra các ô của bảng, đây chính là thành phần thực sự tạo nên các bảng.

Ô 1 dòng 1Ô 2 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
[ob]table[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 1[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 1[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 2[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 2[ob]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]

[/indent]

[hs1]Các thuộc tính của table, tr, td[/hs1]
[hs2]Thuộc tính chung cho cả table, tr, td[/hs2]
[indent][hs3]style[/hs3]: Quyết định bề ngoài của bảng/dòng/cột
Thuộc tính này nhận các thông số css.
Dòng 1
Dòng 2
[ob]table[cb]
[space][ob]tr[cb]
[space][space][ob]td style="border: 4px solid #00dd00; border-radius: 10px"[cb]
Dòng 1[ob]/td[cb]
[space][ob]/tr[cb]

[space][ob]tr[cb]
[space][space][ob]td style="border: 4px solid #00dd00; border-radius: 10px"[cb]
Dòng 2[ob]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]


[hs3]class[/hs3]: Đặt class cho bảng/dòng/cột
Thuộc tính này sẽ đưa các thông số css chứa trong class tương ứng vào bảng/dòng/cột.
Ô 1 dòng 1Ô 2 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
Trong class tên là "custom" đã bao gồm các thông số chỉnh màu nền, viền, độ dài và khoảng cách trong, thay vì điền css lặp lại với từng ô thì dùng class nhanh chóng hơn nhiều.
[ob]table class="custom"[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 1[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 1[ob]/td[cb]
[space][ob]/tr[cb]

[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 2[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 2[ob]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]

[/indent]

[hs2]Thuộc tính chỉ riêng có cho td[/hs2]
[indent][hs3]colspan[/hs3]: Nhập nhiều cột lại với nhau
Ô mang thuộc tính này sẽ nối với các ô khác bên phải nó để tạo thành một ô duy nhất.
Ô 1 dòng 1
Ô 1 dòng 2
Ô 2 dòng 2
Ô 1 dòng 3
[ob]table class="none"[cb]
[space][ob]tr[cb]
[space][space][ob]td colspan="2"[cb]
Ô 1 dòng 1[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 2[cb]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 2[cb]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td colspan="2"[cb]
Ô 1 dòng 3[cb]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]


[hs3]rowspan[/hs3]: Nhập nhiều hàng lại với nhau
Ô mang thuộc tính này sẽ nối với các ô khác ở bên dưới nó để tạo thành một ô duy nhất.
Ô 1 dòng 1Ô 2 dòng 1Ô 3 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
Ô 1 dòng 3Ô 2 dòng 3
[ob]table class="none"[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 1[ob]/td[cb]
[space][space][ob]td rowspan="3"[cb]
Ô 2 dòng 1[ob]/td[cb]
[space][space][ob]td[cb]
Ô 3 dòng 1[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 2[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 2[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 3[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 3[ob]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]

[/indent]

Ví dụ phức tạp hơn.
Ô 1 dòng 1
Ô 1 dòng 2Ô 2 dòng 2Ô 3 dòng 2
Ô 1 dòng 3Ô 2 dòng 3
Ô 1 dòng 4Ô 2 dòng 4Ô 3 dòng 4
Ô 1 dòng 5Ô 2 dòng 5Ô 3 dòng 5
[ob]table class="none"[cb]
[space][ob]tr[cb]
[space][space][ob]td colspan="4"[cb]
Ô 1 dòng 1[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 2[ob]/td[cb]
[space][space][ob]td colspan="2" rowspan="2"[cb]
Ô 2 dòng 2[ob]/td[cb]
[space][space][ob]td[cb]
Ô 3 dòng 2[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td rowspan="3"[cb]
Ô 1 dòng 3[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 3[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 4[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 4[ob]/td[cb]
[space][space][ob]td[cb]
Ô 3 dòng 4[ob]/td[cb]
[space][ob]/tr[cb]
[space][ob]tr[cb]
[space][space][ob]td[cb]
Ô 1 dòng 5[ob]/td[cb]
[space][space][ob]td[cb]
Ô 2 dòng 5[ob]/td[cb]
[space][space][ob]td[cb]
Ô 3 dòng 5[ob]/td[cb]
[space][ob]/tr[cb]
[ob]/table[cb]


[hs1]FAQ[/hs1]
[indent]Q: Tại sao mình code thử nhưng cái "bảng" nó chẳng có viền nối gì hết vậy...
A: Đặt thuộc tính class cho table là "normal"
[cbox][ob]table class="normal"[cb]{Nội dung bên trong}[ob]/table[cb][/cbox]
Q: Còn class nào mà mình có thể sử dụng?
A: Về lý thuyết bạn tự tạo ra class để sử dụng, sẽ giới thiệu trong BBCode tablestyle.
Q: Có thông số nào loại bỏ đi khoảng trắng ở giữa mấy cái ô không nhỉ.
A: border-collapse: collapse
Ô 1 dòng 1Ô 2 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
Q: Tại sao mình đặt border cho tr nhưng lại không thấy hiện ra nhỉ?
A: Bạn phải đặt border-collapse: collapse cho table trước đã.
Ô 1 dòng 1Ô 2 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
Q: Tại sao mình lại không đặt được border cho table của cái bảng ở trên nhỉ...
A: Vì border của tr đè lên border của table rồi
Ô 1 dòng 1Ô 2 dòng 1
Ô 1 dòng 2Ô 2 dòng 2
Mình đặt border cho table là border màu đỏ, còn border cho tr thứ 2 là màu hồng, bạn có thể thấy border của tr đã đè lên border của table.
[/indent]


[metabox][tablestyle="none"]width: 100%[/tablestyle]
[tablestyle="none td"]border: 1px solid black; padding: 2px; background-color: #eeeedd!important; font-family: arial!important; width: 50%[/tablestyle]
[tablestyle="custom td"]border: 2px dashed #ff0000; padding: 3px; background-color: #ffbbbb!important; font-family: arial!important; width: 150px!important[/tablestyle][/metabox]

Về Đầu Trang Go down

Waifu

conmeodien
Xem lý lịch thành viên

Waifu Order : Waifu
. :
Online
Offline

Posts : 3
Power : 3
Faith : 0
Ngày tham gia : 22/09/2016

BBCode tạo bảng Empty Re: BBCode tạo bảng

Bài gửi by conmeodien on 22/9/2016, 2:15 am

Admin cho mình hỏi là khi tao xong các bảng hay thẻ BBcode thì có đặc điểm là khoảng cách giữa các bảng cách nhau rất xa hoặc k kiểm soát đc bạn à, trong BBcode thi sát, k thêm ký tự hay khoảng trống nào.. mà save 1 cái thì xa ngàn dặm @@..

Về Đầu Trang Go down

Waifu
mr.equal
mr.equal
Administrator
Xem lý lịch thành viên

Waifu Order : FA
. :
Online
Offline

Posts : 4924
Power : 10137
Faith : 2478
Ngày tham gia : 07/11/2014
Địa điểm : SDM

BBCode tạo bảng Empty Re: BBCode tạo bảng

Bài gửi by mr.equal on 22/9/2016, 5:34 am

Bạn chụp màn hình cho mình coi code được không?

Về Đầu Trang Go down

Waifu

conmeodien
Xem lý lịch thành viên

Waifu Order : Waifu
. :
Online
Offline

Posts : 3
Power : 3
Faith : 0
Ngày tham gia : 22/09/2016

BBCode tạo bảng Empty Re: BBCode tạo bảng

Bài gửi by conmeodien on 22/9/2016, 12:10 pm

BBCode tạo bảng 1gU7Iju

Về Đầu Trang Go down

Waifu

conmeodien
Xem lý lịch thành viên

Waifu Order : Waifu
. :
Online
Offline

Posts : 3
Power : 3
Faith : 0
Ngày tham gia : 22/09/2016

BBCode tạo bảng Empty Re: BBCode tạo bảng

Bài gửi by conmeodien on 22/9/2016, 12:13 pm

Mình thấy không biết thế nào cả, gõ tiếng anh cũng k thấy đáp án, cài thẻ BBcode h2 cho SEO ý, cũng y rứa, khoảng cách chúng xa quá, k ổn định...
Mà admin sài table BBcode nào vậy? bản của mình k chia phức tạp đc như ad, chỉ chia đơn thuần như dạng 1 thôi, mấy dạng khác k làm đc @@.
Của mình Xenforo.

Về Đầu Trang Go down

Waifu
mr.equal
mr.equal
Administrator
Xem lý lịch thành viên

Waifu Order : FA
. :
Online
Offline

Posts : 4924
Power : 10137
Faith : 2478
Ngày tham gia : 07/11/2014
Địa điểm : SDM

BBCode tạo bảng Empty Re: BBCode tạo bảng

Bài gửi by mr.equal on 22/9/2016, 6:46 pm

Có thể là do những khúc này.
Code:
[tr]<xuống dòng>
[td]a<xuống dòng>
[/td]
[/tr]<xuống dòng>
Theo lý máy phải tự động bỏ chỗ xuống dòng, nhưng đằng này nó tính luôn là dòng mới, vậy nên mới sinh ra khoảng trắng lớn phía trên (những dòng mới này bị đẩy lên khỏi table). Hẳn phải có chức năng để xử lý cái này, nhưng mình không xài Xenforo nên không biết.

Editor hiện tại của forum mình là SCEditor ( http://www.sceditor.com/ ), còn những loại BBCode này là do mình tự viết ra đó bạn.

Về Đầu Trang Go down