|
Hướng dẫn sử dụng BBCode: TABLE - từ cơ bản đến nâng cao !!!
Table là một công cụ không thể thiếu của 1 BBcoder (một thuật ngữ chỉ những người yêu thích, hăng say, luôn tìm tòi sáng tạo và thừa kiên nhẫn để ngồi hàng giờ, có khi cả ngày chỉ để edit 1 bài  ) phân môn ra thì có Typesetter, Limiter và Tabler. Bài viết này sẽ chỉ cho bạn con đường để trở thành 1 Tabler đích thực.
Lưu ý trước khi đọc: Nếu bạn muốn làm table ở 1 cấp độ nào đó, thì phải chắc chắn rằng bạn đã xem qua và luyện tập thuần thục các cấp trước, thì cấp sau đó sẽ cảm thấy dễ và đỡ rắc rối hơn đấy. 
~~~~~~~~~~~~~~
Cách cấu thành 1 bảng table:- Đương nhiên là phải có [table] và [/table] đặt ở đầu và cuối rồi.
- Phải xác định rõ là sẽ có mấy cột và mấy hàng.
Ví dụ: Nếu bạn muốn làm 1 table có 2 hàng và 3 cột thì:- Mỗi hàng phải có 3 ô, mỗi ô cách nhau bằng dấu |
- 2 hàng table phân biệt nhau bằng phím enter xuống hàng
View: | Text | Text | Text | | Text | Text | Text |
PHP Code:
[table]Text | Text | Text
Text | Text | Text[/table]
Lưu ý: - Độ dài ngắn của table sẽ tùy thuộc vào text, text càng dài thì table càng dài ra.
- Trong mỗi ô text, bạn có thể sử dụng bất cứ 1 bbcode nào như url, img, color, center.... để trang trí cho đẹp hơn đều dc cả.
Ví dụ: | Text | Text Text | Text Text Text | | Text | Text | Text Text Text Text Text Text |
PHP Code:
[table][COLOR="Blue"][B]Text[/B][/COLOR] | [COLOR="Blue"][B]Text Text[/B][/COLOR] | [COLOR="Blue"][B][CENTER]Text Text Text[/CENTER][/B][/COLOR]
Text | [CENTER]Text[/CENTER] | Text Text Text Text Text Text [/table]
Đặc biệt lưu ý: Khi bạn bọc bên ngoài table bằng center để canh table ngay giữa thì sẽ có 2 trường hợp xảy ra: - Đối với IE: mọi ô trong table, các text đều được canh giữa hết.
- Đối với FF và Chr: các text trong mỗi ô vẫn mặc định là left.
Chính vì thế, nếu bạn muốn canh giữa text hết mỗi ô thì tốt nhất là center từng ô.  Còn ngược lại, khi bọc center ngoài table nhưng muốn text trong ô vẫn ở lề trái thì phải thêm code left vào mỗi ô. (mục đích là để đồng bộ hóa giữa IE với FF và Chr). Ví dụ: với 1 đoạn code thế này:
PHP Code:
[CENTER][table]Text | Text Text | Text Text Text
Text | Text | Text Text Text Text Text Text [/table][/CENTER]
Còn trên FF và Chr sẽ là:
View: | Text | Text Text | Text Text Text | | Text | Text | Text Text Text Text Text Text |
Một vài thí dụ cụ để cho 1 cái table "sơ cấp": http://vnsharing.net/forum/showthread.php?t=128880
http://vnsharing.net/forum/showthread.php?t=125527
http://vnsharing.net/forum/showthread.php?t=157064 Thế là chúng ta đã học xong những bước cơ bản, giờ qua cấp tiếp theo nào 
Ở cấp này, chúng ta sẽ bắt đầu sử dụng các option được tích hợp sẵn trong code [table] 
Option 1: thưởng thì hàng đầu của table sẽ là nơi ghi chủ đề từng cột, cho nên phải làm sao cho nó "nổi" lên 1 chút chứ phải ko  , lúc này option "head" sẽ được dùng.
Ví dụ:| Title | Title Title | Title Title Title |
|---|
| Text | Text | Text Text Text Text Text Text |
PHP Code:
[table="head"][B]Title[/B] | [B]Title Title[/B] | [B][CENTER]Title Title Title[/CENTER][/B]
Text | [CENTER]Text[/CENTER] | Text Text Text Text Text Text [/table]
Tuy nhiên, có một bất lợi với cái option này là ở skin GIN thì nó có màu green --> làm nổi được hàng đầu, nhưng ở skin CS thì hầu như chẳng làm nổi được bao nhiêu cả. 
Ví dụ: như cái table trên thì:
Nhưng ở skin CS sẽ là:
Và chính vì thế, nên option này hầu như đã bị "tuyệt chủng" ở box FF  Thay vào đó sẽ có cái khác hay hơn, sẽ được hướng dẫn ở các cấp tiếp theo.
Option 2: trường hợp nếu bạn muốn độ rộng của table là cố định, ko cho nó chạy tới chạy lui theo độ dài text nữa, lúc này option "width=???px" được dùng.
Ví dụ: dù text có dài hay ngắn thì table vẫn ko thay đổi chiều rộng:
| Title | Title Title | Title Title Title | | Text | Text | Text Text Text Text Text Text |
PHP Code:
[table="width=300px"][B]Title[/B] | [B]Title Title[/B] | [B][CENTER]Title Title Title[/CENTER][/B]
Text | [CENTER]Text[/CENTER] | Text Text Text Text Text Text [/table]
Title | Title Title | Title Title Title | Text Text Text Text Text | Text Text Text Text | Text Text Text Text Text Text Text Text Text |
PHP Code:
[table="width=300px"][B][CENTER]Title[/CENTER][/B] | [B]Title Title[/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text Text Text Text Text Text[/CENTER] [/table]
Tuy nhiên, cái option này cũng có 1 bất lợi là nhiều khi mình muốn từng cột trong table có độ rộng cố định riêng, để làm được điều này thì phải kết hợp với code khác, sẽ được hướng dẫn ở các cấp tiếp theo.
Option 3: khi bạn muốn cột đầu sẽ là cột có số thứ tự từ 1, 2, 3. Thì bạn có thể làm thủ công như bình thường (tạo thêm 1 cột bên trái nữa) nhưng có cách nhanh hơn, lúc này option "autonum=1" (hoặc "autonum=a") và "autonumtitle='???'" sẽ được dùng, nhưng phải kết hợp với option "head".
Ví dụ:| STT | Title | Title Title | Title Title Title |
|---|
| 1 | Text Text Text Text Text | Text Text Text Text | Text Text Text Text Text Text Text Text Text | | 2 | Text Text Text Text Text | Text Text Text Text | Text Text Text Text Text Text Text Text Text |
PHP Code:
[table="head;autonum=1;autonumtitle='STT'"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text Text Text Text Text Text
Text Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text[/CENTER] | [CENTER]Text Text Text Text Text Text Text Text Text[/CENTER] [/table]
Option 4: Cái này biết chơi cho vui thôi chứ ít dùng lắm,  . Đó là sắp xếp theo thứ tự của 1 cột nào đó theo chiều tăng dần (hoặc giảm dần) như mình muốn, lúc này option "sort=??" sẽ được dùng.
Ví dụ: 1 cái table bình thường:
| 3 | 5 | 12 | 4 | 34 | 5 | | 23 | 7 | 8 | 54 | 25 | 57 | | 8 | 1 | 70 | 62 | 2 | 38 |
PHP Code:
[table="width=300px"]3|5|12|4|34|5
23|7|8|54|25|57
8|1|70|62|2|38[/table]
Khi muốn sắp xếp cột thứ 3 theo chiều tăng dần, thêm "sort=3".
| 23 | 7 | 8 | 54 | 25 | 57 | | 3 | 5 | 12 | 4 | 34 | 5 | | 8 | 1 | 70 | 62 | 2 | 38 |
PHP Code:
[table="width=300px;sort=3"]3|5|12|4|34|5
23|7|8|54|25|57
8|1|70|62|2|38[/table]
Khi muốn sắp xếp cột thứ 3 theo chiều giảm dần, thêm "sort=3d".
| 8 | 1 | 70 | 62 | 2 | 38 | | 3 | 5 | 12 | 4 | 34 | 5 | | 23 | 7 | 8 | 54 | 25 | 57 |
PHP Code:
[table="width=300px;sort=3d"]3|5|12|4|34|5
23|7|8|54|25|57
8|1|70|62|2|38[/table]
Tương tự cho mấy cột khác. Lưu ý: các bạn để ý sẽ thấy rằng, khi một ô trong cột thay đổi vị trí do mình xài sort, thì tất nhiên nguyên 1 hàng đó sẽ thay đổi vị trí luôn.
Thế là xong hết những phần cơ bản của table, chuẩn bị sang kỷ nguyên mới nào.
Bước sang cấp độ này, bạn bắt đầu sử dụng kết hợp với các BBcode khác để cái table được hoàn thiện hơn  (tất nhiên mình ko nói đến mấy cái code trang trí text như ở trên).
Kết hợp với code [limit]: ở trên mình có nói đến sự bất lợi của option "width=???px" (click xem lại), và với sự kết hợp với limit, chúng ta có thể khắc phục được chuyện này.
Cách làm: Ở mỗi cột, chỉ cần limit 1 ô đại diện thôi, thưởng là ô đầu tiên.
Ví dụ:| | | |
|---|
Text | Text | Text Text Text Text Text Text |
PHP Code:
[table="head"][limit=100][B][CENTER]Title[/CENTER][/B][/limit] | [limit=200][B][CENTER]Title Title[/CENTER][/B][/limit] | [limit=300][B][CENTER]Title Title Title[/CENTER][/B][/limit]
[CENTER]Text[/CENTER] | [CENTER]Text[/CENTER] | [CENTER]Text Text Text Text Text Text[/CENTER] [/table]
Tuy nhiên, nếu trong 1 cột, có 1 ô nào đó ở dưới có chiều dài text vượt quá con số được limit của cột đó, thì bạn phải limit ô đó (lúc này có thể bỏ limit ở ô trên).
Ví dụ:| | | Title Title Title |
|---|
Text | Text | Text Text Text Text Text Text Text Text Text Text Text Text Text Text |
PHP Code:
[table="head"][limit=100][B][CENTER]Title[/CENTER][/B][/limit] | [limit=200][B][CENTER]Title Title[/CENTER][/B][/limit] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text[/CENTER] | [CENTER]Text[/CENTER] | [limit=300][CENTER]Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/CENTER][/limit] [/table]
Vì thế cách tốt nhất là nhớ 1 nguyên tắc sau: ở mỗi cột, limit ô nào có text dài nhất. Kết hợp với code [list]: chắc đến đây thì bạn đã nắm rõ cách cấu thành 1 bảng table rồi chứ  (click xem lại), để ý chỗ:
Trích:
|
2 hàng table phân biệt nhau bằng phím enter xuống hàng
|
Thế những ô table mà lại có text chia thành nhiều đoạn thì sao?  Làm sao để "enter xuống hàng" mà vẫn còn nằm trong ô table đó? Cách giải quyết đó là list.
Cách làm: bọc text nào có nhiều đoạn lại bằng code [list]
Ví dụ:
Title | Title Title | Title Title Title |
|---|
Text Text | Text | - Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1
- Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2
|
PHP Code:
[table="head"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text[/CENTER] | [CENTER]Text[/CENTER] |[LIST][*]Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1[*]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2[/LIST][/table]
Lưu ý: như đã nói ở trên (click xem lại) trong trưởng hợp bạn bọc table bằng center để canh giữa, thì ở IE, đoạn text có list sẽ bị canh giữa luôn, và như thế thì rất xấu (đối với mình là thế, trừ khi bạn thấy đẹp =) ):
Trích:
- Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1
- Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2
|
Vì thế, khi sử dụng list mà có center bọc table bên ngoài thì hãy canh trái đoạn text có list bằng code [left].
Ví dụ:Title | Title Title | Title Title Title |
|---|
Text Text | Text | - Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1
- Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2
|
PHP Code:
[CENTER][table="head"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text[/CENTER] | [CENTER]Text[/CENTER] |[LEFT][LIST][*]Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1[*]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2[/LIST][/LEFT][/table][/CENTER]
Một thí dụ cho việc kết hợp với code List (khoan hãy để ý cái màu nền =) ): http://vnsharing.net/forum/showthread.php?t=148881 Thế trong trường hợp cái đoạn text của mình có nhiều đoạn, nhưng lại không thích hợp để cho List vào thì sao? (như lyrics, bài thơ...) thì làm sao để "xuống hàng" được? Ko sao, đã có cách giải quyết:
Kết hợp với code [clear]: Chắc ai cũng biết mục đích ban đầu khi code này được sinh ra là: click để xem. Nhưng vô tình nó lại có một ứng dụng rất quan trọng khác  Đó là "xuống hàng mà không cần enter".
Cách làm: giữa 2 đoạn text, chỉ cần chêm [clear][/clear] vào.
Ví dụ:
Title | Title Title | Title Title Title |
|---|
Text Text | Text | Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 |
PHP Code:
[table="head"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text[/CENTER] | [CENTER]Text[/CENTER] | Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1[clear][/clear]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 [/table]
Thế trong trường hợp mình muốn giữa 2 đoạn text nó cách nhau 1 hàng trắng thì sao? - Đối với List: từng đoạn text, bạn bọc bằng 1 code [list][/list] riêng.
- Đối với Clear: cái này thì phải chơi chiêu thôi
 Type thêm 1 dấu chấm ".", và để color trùng với màu nền. Dấu "." này sẽ có tác dụng làm đoạn thứ 3 chêm giữa 2 đoạn kia, và chính vì nó trùng với màu nền, nên khi nhìn sẽ thấy 2 đoạn cách nhau bởi một hàng "ko có gì cả".
Ví dụ:
Dùng List:
Title | Title Title | Title Title Title |
|---|
Text Text | Text | - Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1
- Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2
|
Dùng Clear:
Title | Title Title | Title Title Title |
|---|
Text Text | Text | Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 . Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 |
PHP Code:
[table="head"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text[/CENTER] | [CENTER]Text[/CENTER] |[LIST][*]Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1[/LIST][LIST][*]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2[/LIST][/table]
PHP Code:
[table="head"][B][CENTER]Title[/CENTER][/B] | [B][CENTER]Title Title[/CENTER][/B] | [B][CENTER]Title Title Title[/CENTER][/B]
[CENTER]Text Text[/CENTER] | [CENTER]Text[/CENTER] | Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1[clear][/clear][COLOR="White"].[/COLOR][clear][/clear]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 [/table]
Một thí dụ cho việc kết hợp với code Clear có cách 1 hàng trống (khoan để ý cái màu nền =) ): http://vnsharing.net/forum/showthrea...53598#huongdan Trước khi qua cấp này, bạn hãy chắc chắn rằng mình đã thuần thục các cấp trên, sẵn sàng bước lên 1 tầm cao mới.
Có thể bạn đang rất nóng lòng đến cấp này, bởi vì bạn thấy table ở box FFFC có màu nền quá đẹp, và mong muốn mình cũng tạo được 1 cái table như thế . Một vài thí dụ điển hình:
http://vnsharing.net/forum/showthread.php?t=157857
http://vnsharing.net/forum/showthread.php?t=162228
http://vnsharing.net/forum/showthread.php?t=154242 Ngoài ra còn rất nhiều bài khác (hầu như bào nào cũng có) nằm trong subbox Wiki, hãy vào chữ ký của tớ mà xem. 
Cách làm: phải kết hợp cả 3 code: limit, bgcolor và szflash.- Về limit: ko có gì để nói, hẳn bạn đã thuần thục nó rồi.
- Về bgcolor: nếu mình nhớ ko lầm thì khi ẹc add chỉ thông báo trong box ẩn, ít người biết, vì thế trước tiên mình xin nói sơ qua cái code này đã.
Bgcolor là một code cho phép đổ màu nền cho phần text, cũng tương tự như code Color đổ màu cho text vậy:
Text Text
PHP Code:
[bgcolor=yellow]Text Text[/bgcolor]
Lưu ý: độ rộng của màu nền phụ thuộc vào chiều dài của text và kích cỡ chữ:
Text Text Text Text Text
Vậy làm sao có thể cho màu nền trải rộng ra, và text nhỏ ở giữa như table của box FFFC được? Đó là lý do cần phải kết hợp thêm Limit và Szflash, sẽ được nói sau đây
- Về szflash: mục đích ban đầu khi nó được tạo ra là để sử dụng những font mà mình thích trên forum (tham khảo thêm tại đây). Tuy nhiên, khi áp dụng vào cái này, thì mình chỉ lấy 2 cái [szflash=?|?][/szflash] và thêm chữ "a" (chữ gì cũng dc) vào giữa thôi, bỏ hết mấy cái râu ria bên trong.
Cách kết hợp:- Mục đích của Limit: kéo dài chiều rộng của màu nền ra, và center text lại cho đẹp hơn nếu thích. (chú ý: phải đề code [limit] ở bên trong code [bgcolor] thì mới có tác dụng)
PHP Code:
[bgcolor=yellow][limit=300][CENTER]Text Text[/CENTER][/limit][/bgcolor]
- Mục đích của Szflash: kéo dài chiều cao của màu nền ra. (chú ý: cũng phải để bên trong code [bgcolor], và số bên trái lúc nào cũng là 0)
Nếu để trước text: (center text hay ko cũng dc)
Text Text Nếu để sau text: (buộc phải center text lại, nếu ko sẽ bị lỗi)
PHP Code:
[bgcolor=yellow][szflash=0|50]a[/szflash]Text Text[/bgcolor]
PHP Code:
[bgcolor=yellow][CENTER]Text Text[/CENTER][szflash=0|50]a[/szflash][/bgcolor]
PHP Code:
[bgcolor=yellow][szflash=0|50]a[/szflash][CENTER]Text Text[/CENTER][szflash=0|50]a[/szflash][/bgcolor]
- Khi kết hợp vừa Limit vừa Szflash: chúng ta sẽ được nhiều trưởng hợp như sau:
- Tùy thuộc vào việc để Szflash trước, hay sau, hay cả 2 bên text
- Tùy thuộc và các code căn lề text: Left, Center, và Right
- Chú ý: một khi kết hợp vừa Limit vừa Szflash, thì bạn phải để theo tứ tự code là [bgcolor][limit][szflash]...[/szflash][/limit][/bgcolor] và buộc dùng 1 trong 3 code căn lề text (Left cũng phải dùng), nếu ko sẽ sinh ra nhiều lỗi vớ vẩn.
Thứ tự code từ trái sang phải, từ trên xuống dưới: (lưu ý: hàng ở giữa mình đã chỉnh [szflash=0|25] để chia đều ra 2 bên, thay vì 50 như 2 hàng còn lại)
PHP Code:
[bgcolor=yellow][limit=300][LEFT]Text Text[/LEFT][szflash=0|50]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][CENTER]Text Text[/CENTER][szflash=0|50]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][RIGHT]Text Text[/RIGHT][szflash=0|50]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|25]a[/szflash][LEFT]Text Text[/LEFT][szflash=0|25]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|25]a[/szflash][CENTER]Text Text[/CENTER][szflash=0|25]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|25]a[/szflash][RIGHT]Text Text[/RIGHT][szflash=0|25]a[/szflash][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|50]a[/szflash][LEFT]Text Text[/LEFT][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|50]a[/szflash][CENTER]Text Text[/CENTER][/limit][/bgcolor]
PHP Code:
[bgcolor=yellow][limit=300][szflash=0|50]a[/szflash][RIGHT]Text Text[/RIGHT][/limit][/bgcolor]
Trong đống trên thì cái ở giữa là cái mà box FFFC hay dùng nhất, còn bạn thấy cái nào đẹp, tùy bạn sử dụng.
Ví dụ: Khi áp dụng vô table:- Lưu ý: trong trưởng hợp trong table có ô xài List, thì sẽ có khác biệt giữa IE và FF (Chr). Như một đoạn code thế này:
PHP Code:
[TABLE][bgcolor=MediumTurquoise][limit=100][szflash=0|7]a[/szflash][CENTER]Text Text[/CENTER][szflash=0|7]a[/szflash][/limit][/bgcolor] | [bgcolor=yellow][limit=300][szflash=0|7]a[/szflash][CENTER]Text Text[/CENTER][szflash=0|7]a[/szflash][/limit][/bgcolor]
[bgcolor=MediumTurquoise][limit=100][szflash=0|27]a[/szflash][CENTER]Text Text[/CENTER][szflash=0|27]a[/szflash][/limit][/bgcolor] | [bgcolor=yellow][limit=300][szflash=0|7]a[/szflash][LEFT][LIST][*]Đoạn 1 Đoạn 1 Đoạn 1[*]Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2[/LIST][/LEFT][szflash=0|7]a[/szflash][/limit][/bgcolor][/TABLE]
Ở FF và Chr thì ok:
View: | | | | | - Đoạn 1 Đoạn 1 Đoạn 1
- Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2
|
Và khi mình chỉnh lại cho hợp với IE thì ở FF và Chr lại bị lỗi  Chính vì thế, với tình hình đa số đều xài FF và Chr, còn ở ngoài tiệm thì hiện nay cũng đã có luôn FF và Chr bên cạnh IE, nên cũng đừng quan tâm tới nó, tẩy chay IE đi.
Không những thế, khi bạn canh giữa table (bằng cách bọc center lại) thì IE lại xảy ra thêm 1 lỗi nữa. Cũng với code trên nhưng khi canh giữa table thì ở IE nó sẽ hiện:
1 đường sọc trắng, nhìn rất ư là... 
Tuy nhiên, có 1 cách giải quyết đường sọc này, có điều nó sẽ làm cho code rối hơn rất nhiều, và thấy tác dụng không bằng công sức bỏ ra (chỉ trên 1 số ít người dùng IE). Nên mình ko đưa nói vô đây, ai cần thì pm mình.  - Lưu ý: đối với việc chia đoạn trong table bằng Clear cũng vậy, vẫn xuất hiện lỗi trên IE y chang việc dùng List.
Thế là lại xong thêm 1 cấp độ, hãy chuẩn bị sẵn sàng tinh thần để bước vào:
Nghe cái tên là đủ biết trình độ của cấp này ra sao rồi . Đến đây, bạn có thấy rằng qua những gì mình đã học, chung quy lại thì cái table vẫn theo quy tắc cũ: 1 hàng 1 cột, 1 hàng 1 cột thôi không? Nhưng mà trên đời thì có biết bao là loại table phức tạp, thậm chí còn có những loại "ko giống ai"  . Ví dụ 1 cái tương đối cho các bạn:
Nhìn thấy cái table này, bạn sẽ nghĩ ngay rằng là code [table] trên forum sẽ không bao giờ có thể làm được 1 cái table như thế này. Bạn nghĩ đúng đấy , nhưng đó là trường hợp 1 table riêng rẽ, nếu kết hợp nhiều table với nhau, thì cái table này sẽ ko thành vấn đề.
Cách phân tích bảng table trên:- Nguyên tắc: Phân tích từ ngoài vào trong.
- Table thứ nhất sẽ có 2 hàng và 1 cột:
À bắt đầu từ đây thì những cái đơn giản thế này mình ko đưa code nữa nhé, vì đến đây thì bạn đã thừa sức làm được mấy cái này rồi phải ko.
- Table thứ hai sẽ có 1 hàng và 2 cột, rồi thế vào ô "123" (của table thứ nhất)
 | 456 |
| | | 456 |
|
- Table thứ ba sẽ có 1 hàng và 4 cột, rồi thế vào ô "456" của table thứ hai.
- Table thứ tư sẽ có 2 hàng và 2 cột, cũng thế vào ô "456" của table thứ hai, ở dưới table thứ ba, thế là ta được cái table hoàn chỉnh giống trên.
| | Coin Count Echo | | Thắng từ người chơi Bevelle Core Sphere ở Luca Stadium. |
| | | | | Coin Count Echo | | Thắng từ người chơi Bevelle Core Sphere ở Luca Stadium. |
|
|
- Hoặc tách cái table thứ tư ra làm 2 table, để khi ghép vào thì độ dày đường kẻ nó sẽ đều hơn, đẹp hơn.
| Thắng từ người chơi Bevelle Core Sphere ở Luca Stadium. |
| | | | Thắng từ người chơi Bevelle Core Sphere ở Luca Stadium. |
|
|
PHP Code:
[TABLE][bgcolor=#f268f3][limit=588][szflash=0|7]a[/szflash][B][SIZE=3][LEFT]Yuna Coin[/LEFT][/SIZE][/B][szflash=0|8]a[/szflash][/limit][/bgcolor]
[TABLE][IMG]http://img88.imageshack.us/img88/5010/ffx2coin57yunafront.gif[/IMG] | [TABLE][bgcolor=#5271eb][LIMIT=70][szflash=0|7]a[/szflash][B][LEFT]Số[/LEFT]
[/B][szflash=0|7]a[/szflash][/LIMIT][/bgcolor] | [LIMIT=136]57[/LIMIT] |[bgcolor=#5271eb][LIMIT=70][szflash=0|7]a[/szflash][B][LEFT]Giá trị[/LEFT]
[/B][szflash=0|7]a[/szflash][/LIMIT][/bgcolor] | [LIMIT=136]9[/LIMIT][/TABLE]
[TABLE][bgcolor=#5271eb][LIMIT=70][szflash=0|10]a[/szflash][B][LEFT]Đặc Tính[/LEFT][/B][szflash=0|10]a[/szflash][/LIMIT][/bgcolor] | [LIMIT=350]Coin Count Echo[/LIMIT][/TABLE]
[TABLE][bgcolor=#5271eb][LIMIT=70][szflash=0|26]a[/szflash][B][LEFT]Địa điểm[/LEFT][/B][szflash=0|26]a[/szflash][/LIMIT][/bgcolor]| [LIMIT=350][LEFT]Thắng từ người chơi Bevelle Core Sphere ở Luca Stadium.[/LEFT][/LIMIT][/TABLE][/TABLE][/TABLE]
Nhìn qua, bạn nghĩ cũng không khó mấy, cũng đơn giản nhưng cái quan trọng nhất khi làm table kết hợp là việc canh limit từng cột, phải limit sao cho khi ghép vào là nó vừa khít, các đường kẻ khít nhau, và để limit được thì bạn phải thử từng số, rồi "coi lại bài" xem hợp chưa, có khi bạn phải thử từng pixel một cơ đấy.
Còn ở đây mình làm nhanh là do đã làm sẵn tại đây rồi: http://vnsharing.net/forum/showthrea...57857#huongdan
Hoặc một cái table khác tương tự: http://vnsharing.net/forum/showthrea...61320#huongdan Ở một ví dụ khác, dưới đây là một cái table "ko giống ai", đã từng khiến mình phải đau đầu suy nghĩ, thử tới thử lui nhiều lần để tìm cách code nó:
 Phân tích bảng table trên:- Quá dễ dàng, áp dụng theo ví dụ trên: 1 cái table bự với 2 hàng và 1 cột (2 ô: đỏ và xám).
- Ô xám ở dưới thì ko có gì để nói phải ko, hẳn bạn đã dư sức làm được ô này.
- Cái khó là ô đỏ ở trên:
- Nhìn vào bạn sẽ thấy 3 phần: tựa đề, tấm ảnh và 1 table con.
- Hiển nhiên, nguyên tắc để 3 phần cách biệt trong cùng 1 ô table là chêm giữa chúng bằng [clear][/clear] (ở đây dùng list ko được). (Mình đang hướng dẫn bạn hình dung công việc sẽ làm)
- Phần 1: quá dễ, chỉ cần xài bgcolor, limit và szflash là xong.
- Phần 2: 1 tấm ảnh, ko có gì để nói.
- Phần 3: 1 cái table con, bạn dư sức làm nó.
Tất cả đều dễ, nhưng vấn đề là làm sao để các phần ấy cách nhau một khoảng "đỏ", cách lề một khoảng "đỏ" như tấm hình đây? Rất may là code [indent] ngoài việc thục lùi hàng vào, nó còn có tác dụng đẩy ra một khoảng trống ở trên và dưới đoạn text được bọc indent nữa.
Ví dụ: (indent riêng từng đoạn)Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 1 Đoạn 2 Đoạn 2 Đoạn 2 Đoạn 2 Thế là cái tựa đề và tấm hình đã giải quyết xong, còn lại cái table, nó chỉ thụt vô có 1 ít nên ko xài indent được, làm sao đây? Lại phải tiếp tục chơi chiêu Đó là thêm 1 dấu chấm "." (cho màu giống nền), và để dưới tấm hình, rồi limit dấu chấm đó 1 khoảng ~ 10 px. Sau đó là để cái table con vào, tự ắt nó sẽ thụt vô 1 tí thôi .
Mission 1: In Search Of The Eternal
. Mục tiêu: - Tìm kiếm Penelo, Balthier và Fran
- Vaan phải sống
| Summoning Gates: Không có | Độ khó: Thật khó để có thể nói cho bạn biết làm thế nào bạn thực hiện được điều đó nếu bạn xử lý tình huống kém |
| Chiến lược: . Bạn bắt đầu bước vào bên trong đống đổ nát. Khi vừa bước vào bạn được con Red Flan “chào đón”. Điều quan trọng là phải lắng nghe những gì người đàn ông cố gắng nói. Để tấn công kẻ thù, phải gõ nhẹ vào Vaan, sau đó gõ vào con quái và liên tiếp tấn công vào nó cho tới khi nó chết. Bây giờ là lúc tìm kiếm Penelo nhưng để làm được điều đó cần đến điều mà người đàn ông bí ẩn nói cách đánh, Quả thật khó chịu khi phải mong đợi tới lần thứ hai. Tiến lên phía trước, lại gặp một con Red Flan khác, lại tấn công nó như lần trước và bạn sẽ giết được nó thôi. Khi tiêu diệt được nó bạn sẽ tới chỗ Penelo và sẽ tự động nói chuyện với cô ấy. Penelo là một người trị thương và là một người có ích. Người đàn ông bí ẩn đó lại nói chuyện với bạn và lần này bạn có thể đoán ra ông ta là ai. JIMI HENDRIX!!! Dù sao đi nữa, bạn cũng sẽ gặp 3 con Red Flan khác như Vaan đã từng. Penelo có thể trị thương ở khoảng cách xa vì thế bạn không gặp trở ngại gì và trước khi bạn nhận biết thì bạn đã bước sang nhiệm vụ tiếp theo. Hiện bạn đang ở cấp độ 2. Xuất sắc!!! |
Phân tích code: (chỉ phần màu đỏ thôi, phàn xám dễ mà)
Trích:
[TABLE][bgcolor=red][clear][/clear][INDENT][bgcolor=#fff0bd][limit=700][szflash=0|5]a[/szflash][SIZE="4"][B][COLOR="Blue"][CENTER]Mission 1: In Search Of The Eternal[/CENTER][/COLOR][/B][/SIZE][szflash=0|5]a[/szflash][/limit][/bgcolor][/INDENT][clear][/clear][LEFT][INDENT][IMG]http://img188.imageshack.us/img188/2545/mapglabadosruins1rw.png[/IMG][/INDENT][/LEFT][clear][/clear][limit=10][COLOR="red"].[/COLOR][/limit][LEFT][TABLE="width=400"][bgcolor=#fff0bd][limit=400][szflash=0|25]a[/szflash][COLOR="blue"][B]Mục tiêu:[/B][/COLOR] [LIST][*]Tìm kiếm Penelo, Balthier và Fran[*]Vaan phải sống[/LIST][szflash=0|5]a[/szflash][/limit][/bgcolor]
[bgcolor=#fff0bd][limit=400][COLOR="blue"][B]Summoning Gates:[/B][/COLOR] Không có[/limit][/bgcolor]
[bgcolor=#fff0bd][limit=400][COLOR="blue"][B]Độ khó:[/B][/COLOR] Thật khó để có thể nói cho bạn biết làm thế nào bạn thực hiện được điều đó nếu bạn xử lý tình huống kém[/limit][/bgcolor][/TABLE][/LEFT][/bgcolor]
Phần xám ở dưới[/TABLE]
|
- Code đỏ: là cái table bự bên ngoài.
- Code xanh lá đậm: là tiêu đề.
- Code tím: là tấm ảnh.
- Code xám: là chỗ limit dấu chấm "." để cho table con thụt vô.
- Code xanh lá nhạt: là cái table con.
- Code xanh dương: là clear giữa 2 phần nhằm mục đích "xuống hàng mà ko cần enter". Riêng cái clear đầu tiên là cho tựa đề nó thụt xuống 1 chút.
Đây là topic sử dụng toàn bộ bằng bảng table này: http://vnsharing.net/forum/showthread.php?t=157883 (do màu đỏ chói nên mình đã sửa lại thành màu xanh =) )
Hoặc có thể xem qua 1 table cũng phức tạp không kém ở đây: http://vnsharing.net/forum/showpost....17&postcount=5
Vâng, đúng như cái tên gọi của nó ở cấp này, trình độ tabler của bạn đã đạt đến mức thượng thừa, khó ai có thể tưởng tượng ra được.
Cũng như trong võ công, "vô chiêu đánh thắng hữu chiêu", còn ở đây là "vô table đánh thắng có table".
Tức là sao? Tức là ở cấp độ này, bạn sẽ tạo ra những bảng table mà không cần code [table].
Làm sao tạo được? Ý tưởng bắt nguồn từ 2 code limit và szflash.
Tạo một đường kẻ ngang:
PHP Code:
[bgcolor=#AAA][limit=460][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor]
Tạo một đường kẻ dọc:
PHP Code:
[bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor]
Cách kết hợp:- Nguyên tắc: làm từ trái sang phải, từ trên xuống dưới,
- Đầu tiên là đường kẻ ngang
- [clear][/clear] để xuống hàng
- Rồi đường kẻ dọc
- Đến nội dung text, với text được bọc Limit có độ rộng bằng độ rộng đường kẻ ngang trừ 2 (do 2 đường dọc mỗi đường có độ rộng bằng 1 rồi)
- Thêm 1 đường kẻ dọc nữa
- [clear][/clear] để xuống hàng
- Rồi đường kẻ ngang thứ 2
Text Text
Phần tích code:
Trích:
|
[bgcolor=#AAA][limit=460][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][limit=458]Text Text[/limit][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=460][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor]
|
- Code đỏ: là đường kẻ ngang
- Code xanh lá đậm: là đường kẻ dọc
- Code xám: là nội dung text (có thể cải tiến hơn như định vị trí, đổ màu nền, cứ áp dụng y chang như bạn đã được học ở cấp 5)
- Code xanh dương: là clear để xuống hàng
Lưy ý: nếu bạn muốn text thụt vào một khoảng so với viền của table thì một là dùng indent, còn muốn thụt với khoảng cách tùy ý thì phải chơi chiêu tiếp - Tạo dấu chấm "." trùng với màu nền, với một limit nhất định tùy bạn
- Làm 2 cái như thế
- Rồi để 2 bên text
- Chú ý: limit dấu chấm đầu + (limit text + 2) + limit dấu chấm cuối = limit đường kẻ ngang
Code mẫu: (lấy ví dụ trên, limit đường kẻ ngang là 460)
PHP Code:
[limit=20][COLOR="White"].[/COLOR][/limit][limit=418]Text Text[/limit][limit=20][COLOR="White"].[/COLOR][/limit]
Lấy code này thế vào các code trên (cụ thể là thế vào chỗ code màu xám):
. Text Text .
Một ví dụ khác nữa cho thấy đổ màu nền cho text bên trong:
PHP Code:
[bgcolor=#AAA][limit=460][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][bgcolor=yellow][limit=458][szFLASH=0|42]a[/szFLASH][CENTER]Text Text[/CENTER][szFLASH=0|42]a[/szFLASH][/limit][/bgcolor][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=460][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor]
Lưu ý chỗ này: 2 cái flash để 2 bên text nó sẽ có tổng chiều cao nhỏ hơn chiều cao của đường kẻ dọc (do có cái text chiếm chỗ nữa), và nhỏ hơn bao nhiêu là tùy thuộc và độ lớn nhỏ, dài ngắn của text, bạn phải thử từng số rồi "coi lại bài" mới biết được.
Thêm một ví dụ nữa về bảng table có 2 hàng 2 cột:
Ô text 1 Ô text 2 Ô text 3 Ô text 4
PHP Code:
[bgcolor=#AAA][limit=803][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][limit=400]Ô text 1[/limit][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][limit=400]Ô text 2[/limit][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=803][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][limit=400]Ô text 3[/limit][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][limit=400]Ô text 4[/limit][bgcolor=#AAA][limit=1][szFLASH=0|100]a[/szFLASH][/limit][/bgcolor][clear][/clear][bgcolor=#AAA][limit=803][szFLASH=0|1]a[/szFLASH][/limit][/bgcolor]
Lưu ý: dù cho có mấy hàng mấy cột đi chăng nữa thì cũng tuân theo một nguyên tắc: đi từ trái sang phải, từ trên xuống dưới.
Như cái bảng table trên thì đi theo thứ tự: đường ngang trên --> clear xuống hàng --> đường dọc trái trên--> ô text 1 --> đường dọc giữa trên --> ô text 2 --> đường dọc phải trên --> clear xuống hàng --> đường ngang giữa --> clear xuống hàng --> đường dọc trái dưới --> ô text 3 --> đường dọc giữa dưới --> ô text 4 --> đường dọc phải dưới --> clear xuống hàng --> đường ngang dưới.
Tại sao mình lại hướng dẫn cho bạn làm cái này? Vì thực chất, nó đã có tool làm rồi (click vào đây)
Nhưng cái tool đó chỉ làm được có 1 ô table thôi vì thế mình hướng dẫn cho bạn cái này để bạn hiểu cách thành lập nó thế nào. Để bạn có thể kết hợp nhiều ô lại để tạo thành 1 cái table có nhiều hàng, nhiều cột hơn.
Lợi ích của việc dùng table mà ko cần code [table]:
- Có thể thay màu viền table được (chỉ cần thay bgcolor của đường kẻ)
- Làm những table phức tạp ở trên (click xem lại) mà ko cần kết hợp nhiều [table] để sinh ra chuyện các đường kẻ chồng chéo lên nhau
- Giải quyết vấn đề SEO trên google (muốn biết SEO là gì thì pm người này)
Đương nhiên có lợi thì phải có hại rồi:
- Code rẩt phức tạp (nhất là khi áp dụng hầu hết những gì đã viết trong bài này) --> Nhức đầu sẽ là điều hiển nhiên.
- Rồi bạn sẽ có ngày mờ mắt, kiệt sức trên bàn phím.
- Nghe đâu trên IE6 vẫn còn bị vỡ hình khi làm cái này =).
Bài hướng dẫn của mình đến đây là hết, cám ơn các bạn đã quan tâm theo dõi để đọc đến dòng này  Có gì thắc mắc thì cứ pm mình.
Cuối cùng, chúc bạn sớm thành công trên con đường trở thành 1 BBcoder nói chung, và 1 Tabler nói riêng đích thực. 
|
thay đổi nội dung bởi: skyderline, 18-06-2010 lúc 07:48
|
|
29-05-2010, 20:14
Chế độ bình thường
