Administrator
Page 1 of 1
Administrator
Header |
Table text |
ForuMotion end copyright text |
Last edited by Administrator on Sat Nov 08, 2014 6:57 am; edited 5 times in total
Re: Administrator
LƯU Ý: đây là bbcode cũ,
hiện forum đã có code mới TABLE3 ưu việt hơn.
topic này chủ yếu dành để tham khảo các html và style tag.
các bạn mới học bbcode nên làm quen với table3 đơn giản
nếu vẫn muốn dùng table2, đọc kỹ mục 6 ngay bên dưới trước
~~~ thay đổi nội dung bởi: Kaldorei, lý do: thông báo bbcode mới
hiện forum đã có code mới TABLE3 ưu việt hơn.
topic này chủ yếu dành để tham khảo các html và style tag.
các bạn mới học bbcode nên làm quen với table3 đơn giản
nếu vẫn muốn dùng table2, đọc kỹ mục 6 ngay bên dưới trước
~~~ thay đổi nội dung bởi: Kaldorei, lý do: thông báo bbcode mới
Sau tổng cộng 18 cái mess pm kịch liệt (9 send 9 nhận), cuối cùng bbcode [table2] đã được add .
Trích:
6. Nhược điểm của bbcode mới này: Vì lý do hệ thống của forum, mỗi khi xuống hàng là nó auto thêm html tag <br/> vào (view source mới thấy). Cho nên giữa [table2] và [tr], giữa [tr] và [td], cũng như giữa 2 [td] với nhau đều bị chèn thêm <br/>. ==> Xuống hàng nhiều lần, như vd trên là xuống tới 13 hàng --> tới 13 cái <br/> --> tạo một khoảng trống lớn giữa text ở phía trên table và table. Để khắc phục điều này, một là khi code bạn không xuống hàng gì cả giữa [table2][tr][td], nhưng như vậy thì hơi bị khó nhìn code, hoặc cách hai là thêm một html tag của style vào table. Đó chính là margin-top:-...px. Tag này có nghĩa là khoảng cách từ viền trên của table đến đoạn text bên trên table. Khi dùng với số âm, thì tức là nó "tràn vào" luôn vị trí bên trên. Trong trường hợp này chính là "tràn vào vị trí khoảng trắng lớn" --> thu hẹp khoảng cách. Những đoạn code vd mình để trong [php] ở trên là đã bỏ đi tag marin-top, chứ thực chất cái kết quả hiện ra ở dưới là có xài =). Xuống hàng trong nội dung ô table thì ko bị ảnh hưởng. Ngoài ra còn cách thứ 3 tiện lợi hơn đó là dùng [table3]. |
PHP Code:
[table2=option1|option2]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
- Table sẽ mở đầu bằng [table2] và kết thúc bằng [/table2]
- Một hàng table sẽ mở đầu bằng [tr] và kết thúc bằng [/tr]
- Một ô table sẽ mở đầu bằng [td] và kết thúc bằng [/td], nội dung trong ô table có thể xuống dòng thoải mái.
- Option1 là những html tag của table (sẽ dc liệt kê bên dưới), còn Option2 chính là những html tag của style (mà thời gian qua các bạn đã làm quen với cái tên gọi bb-like-html code với những topic hướng dẫn ngoài kia). Option2 của table sẽ set style cho toàn bộ table (vd: màu chữ, canh lề, size, font....)
- Giữa 2 option có sự khác biệt, ở option1 thì 2 tag phân biệt nhau bằng khoảng trắng, giữa tên tag và giá trị là dấu bằng, còn ở option2 thì 2 tag phân biệt nhau bằng dấu chấm phẩy, giữa tên tag và giá trị là dấu hai chấm.
2. Các html tag của table
Tên Tag | Tác dụng | Giá trị |
BORDER | bề rộng viền table | 1,2,3... |
BORDERCOLOR | màu viền table | mã màu |
CELLPADDING | khoảng cách 4 hướng giữa viền table và nội dung trong ô | 1,2,3... |
CELLSPACING | khoảng cách giữa những viền của ô table | 1,2,3... |
WIDTH | chiều rộng của table | px/em/% |
HEIGHT | chiều cao của table | px/em/% |
BGCOLOR | màu nền của table | mã màu |
BACKGROUND | ảnh nền của table | link ảnh |
ALIGN | canh lề cho khung table | left/center/right |
RULES | chỉ định những phần nào của viền table bên trong được hiện ra | none: Không có viền nào bên trong |
rows: Viền giữa các hàng | ||
cols: Viền giữa các cột | ||
all: Viền giữa các hàng và cột | ||
FRAME | chỉ định những phần nào của viền table bên ngoài được hiện ra | void: Tất cả viền bên ngoài sẽ ẩn đi |
above: Chỉ có viền bên trên hiện ra | ||
below: Chỉ có viền bên dưới hiện ra | ||
lhs : Chỉ có viền bên trái hiện ra | ||
rhs: Chỉ có viền bên phải hiện ra | ||
hsides: Chỉ có 2 viền trên và dưới hiện ra | ||
vsides: Chỉ có 2 viền trái và phải hiện ra |
Một vài ví dụ:
PHP Code:
[table2= align=center border=2 bordercolor=blue cellspacing=2 cellpadding=5 width=500px bgcolor=#abcdef|text-align:center]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 |
PHP Code:
[table2= align=center border=2 bordercolor=blue rules=rows frame=hsides cellspacing=0 cellpadding=5 width=500px|text-align:center]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 |
PHP Code:
[table2= align=center border=2 bordercolor=blue rules=cols frame=vsides cellspacing=0 cellpadding=5 width=500px|text-align:center]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 |
PHP Code:
[table2= align=center border=2 bordercolor=blue rules=all frame=void cellspacing=0 cellpadding=5 width=500px|text-align:center]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 |
PHP Code:
[table2= align=center border=2 bordercolor=blue rules=none cellspacing=0 cellpadding=5 width=500px|text-align:center]
[tr]
[td]cột 1 hàng 1[/td]
[td]cột 2 hàng 1[/td]
[/tr]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 |
3. Các html tag của tr, td:
Khi bạn muốn sử dụng html tag cho tr và td, thì bạn phải chuyển sang code [tr2] và [td2].
PHP Code:
[tr2=option1|option2].....[/tr2]
[td2=option1|option2].....[/td2]
- Option1 là những html tag của tr và td, sẽ được liệt kê sau đây.
- Option2 cũng là html tag của style, nhiều khi bạn ko muốn set 1 style nào đó cho toàn table, mà chỉ muốn set cho 1 hàng/ô nào đó thì sử dụng cái này. Hoặc bạn cũng có thể set style cho toàn table xong, rồi lại có 1 hàng/ô nào đó muốn set style khác, thì cũng ok.
- Lưu ý: chỗ nào xài tr2/td2 thì khi kết thúc code cũng phải là tr2/td2.
- Lưu ý 2: khi xài tr2/td2 thì không được quên dấu | ngăn cách giữa 2 option (dù chỉ xài 1 option cũng phải có |)
- Lưu ý 3: option2 của [tr2] không nhận dc các style về border.
Tên Tag | Tác dụng | Giá trị |
Dành cho [tr2] | ||
ALIGN | canh lề nội dung theo chiều ngang | left/center/right |
VALIGN | canh lề nội dung theo chiều dọc | top/middle/bottom/baseline |
BGCOLOR | giống [table2] | |
BACKGROUND | giống [table2] | |
Dành cho [td2] | ||
ALIGN | giống [tr2] | |
VALIGN | giống [tr2] | |
WIDTH | chiều rộng của ô | px/em/% |
HEIGHT | chiều cao của ô | px/em/% |
BGCOLOR | giống [table2] | |
BACKGROUND | giống [table2] | |
COLSPAN | ghép cột lại với nhau | 2,3,4... |
ROWSPAN | ghép hàng lại với nhau | 2,3,4... |
NOWRAP | đảm bảo không xuống dòng (khi nội dung trong ô dài hơn width dc set - sẽ dãn width ra) |
Một vài ví dụ:
PHP Code:
[table2= align=center border=2 bordercolor=red cellpadding=5 cellspacing=0 width=500px|text-align:center]
[tr2= bgcolor=pink|]
[td2= width=50%|][b]cột 1 hàng 1[/b][/td2]
[td2= width=25%|][b]cột 2 hàng 1[/b][/td2]
[td2= width=25%|][b]cột 3 hàng 1[/b][/td2]
[/tr2]
[tr]
[td2=valign=top|]cột 1 hàng 2[/td2]
[td2=valign=bottom|]cột 2 hàng 2[/td2]
[td]cột 3 hàng 2
cột 3 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 | cột 3 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 | cột 3 hàng 2 cột 3 hàng 2 |
PHP Code:
[table2= align=center border=2 bordercolor=red cellpadding=5 cellspacing=0 width=500px|text-align:center]
[tr2= bgcolor=pink|]
[td2= rowspan=2|][b]cột 1 hàng 1 và 2[/b][/td2]
[td2= colspan=2|][b]cột 2 và 3 hàng 1[/b][/td2]
[/tr2]
[tr]
[td]cột 2 hàng 2[/td]
[td]cột 3 hàng 2
cột 3 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 và 2 | cột 2 và 3 hàng 1 | |
cột 2 hàng 2 | cột 3 hàng 2 cột 3 hàng 2 |
4. Một vài class mặc định cho table:
Khi muốn sử dụng class cho table, đầu tiên bạn phải type [tablestyle][/tablestyle] vào bài viết. Theo nguyên tắc thì chỉ cần 1 page 1 code [tablestyle] thôi là đủ dùng cho mọi post trong page đó. Tuy nhiên nhiều khi người ta chỉ view cái link của 1 post thì lại mất tác dụng --> tốt nhất là mỗi post 1 code =).
Hiện chúng ta chỉ có 4 class (sau này sẽ add thêm, có thể sẽ là những event thiết kế class đẹp cho table, được nhiều người vote ) - tất nhiên event thiết kế class chỉ dành cho những ai biết css
Hiện 4 class này chỉ là bổ sung thêm khi xài html tag phức tạp hay ko thể xài bằng html tag dc.
a. Class "radius"
Tạo cung tròn cho 4 góc của table, lưu ý là 4 ô table ở 4 góc table phải được add lần lượt các class: radiusa, radiusb, radiusc, radiusd theo thứ tự: trên trái, trên phải, dưới trái, dưới phải.
PHP Code:
[table2= class=radius align=center border=2 bordercolor=green cellpadding=5 cellspacing=0 width=500px|text-align:center]
[tr2= bgcolor=palegreen|]
[td2= class=radiusa|][b]cột 1 hàng 1[/b][/td2]
[td][b]cột 2 hàng 1[/b][/td]
[td2= class=radiusb|][b]cột 3 hàng 1[/b][/td2]
[/tr2]
[tr]
[td2= class=radiusc|]cột 1 hàng 2[/td2]
[td]cột 2 hàng 2[/td]
[td2= class=radiusd|]cột 3 hàng 2[/td2]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 | cột 3 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 | cột 3 hàng 2 |
a. Class "radius2"
Tạo cung tròn cho 4 góc lẫn tất cả các ô table.
PHP Code:
[table2= class=radius2 align=center border=2 bordercolor=green cellpadding=5 cellspacing=0 width=500px|text-align:center]
[tr2= bgcolor=palegreen|]
[td][b]cột 1 hàng 1[/b][/td]
[td][b]cột 2 hàng 1[/b][/td]
[td][b]cột 3 hàng 1[/b][/td]
[/tr2]
[tr]
[td]cột 1 hàng 2[/td]
[td]cột 2 hàng 2[/td]
[td]cột 3 hàng 2[/td]
[/tr]
[/table2]
cột 1 hàng 1 | cột 2 hàng 1 | cột 3 hàng 1 |
cột 1 hàng 2 | cột 2 hàng 2 | cột 3 hàng 2 |
c. Class "hover"
Tạo màu nền cho hàng table khi di chuyển chuột vào.
PHP Code:
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum