Latest topics
25/3/2024, 3:24 am
by 
Amaori Kino
2/3/2024, 9:25 pm
by 
Chinhphuong
30/12/2023, 10:13 am
by 
Akari no Kokoro
6/11/2023, 9:44 am
by 
Akari no Kokoro
5/8/2023, 5:32 pm
by 
Akari no Kokoro
28/4/2023, 8:01 pm
by 
rlaghdtn1998
4/11/2022, 12:17 am
by 
gigajet
14/8/2022, 3:28 pm
by 
Akari no Kokoro
12/7/2022, 10:21 am
by 
RedTheHalf-Demon
13/5/2022, 4:52 pm
by 
Getsuga Bankai Tenshou
1/2/2022, 12:00 am
by 
Akari no Kokoro
19/12/2021, 1:13 am
by 
Akari no Kokoro
15/12/2021, 8:28 am
by 
sucirpa
15/11/2021, 12:34 am
by 
feint101
1/11/2021, 4:00 pm
by 
Akari no Kokoro
30/10/2021, 9:31 am
by 
Akari no Kokoro
12/10/2021, 1:06 am
by 
Getsuga Bankai Tenshou
8/10/2021, 1:14 am
by 
forestofsecrets
18/9/2021, 6:32 pm
by 
caytretramdot
1/9/2021, 5:56 pm
by 
kirito-123
16/8/2021, 11:56 pm
by 
Hisurin Rain
15/8/2021, 1:18 am
by 
cỉno
9/8/2021, 10:39 pm
by 
RedTheHalf-Demon
24/7/2021, 9:51 pm
by 
Katsuragi Rin
9/7/2021, 11:27 am
by 
P2772
2/7/2021, 8:54 am
by 
worstapple
1/7/2021, 11:37 am
by 
Yuri Masumi
24/6/2021, 7:03 pm
by 
corecombat

BBCode tạo bảng

Waifu
mr.equal
mr.equal
Administrator

Waifu Order : FA
. :
Online
Offline

Posts : 4931
Power : 10170
Faith : 2498
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 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

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 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

Waifu Order : FA
. :
Online
Offline

Posts : 4931
Power : 10170
Faith : 2498
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 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

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 22/9/2016, 12:10 pm

BBCode tạo bảng 1gU7Iju

Về Đầu Trang Go down

Waifu

conmeodien

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 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

Waifu Order : FA
. :
Online
Offline

Posts : 4931
Power : 10170
Faith : 2498
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 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

Waifu

Sponsored content


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

Bài gửi by Sponsored content

Về Đầu Trang Go down

- Similar topics