[Hướng dẫn]Tạo bảng bằng BBCode cho mem mới[✔]

[hunghsmn]

1. 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 có 2 cách để tạo bảng:
Cach1: Ta gõ vào 2 ô trống, ô bên trái gõ số dòng ( ví dụ là 3), ô bên phải ta gõ số cột ( ví dụ là 5), sau đó bấm OK ta sẽ được code sau đây:

Code:

[table border="1"]
[tr]
[td] [/td][td] [/td][td] [/td][td] [/td][td] [/td]
[/tr][tr]
[td] [/td][td] [/td][td] [/td][td] [/td][td] [/td]
[/tr][tr]
[td] [/td][td] [/td][td] [/td][td] [/td][td] [/td]
[/tr]
[/table]

Đây là bbcode cơ bản của một bảng , giống như htmlcode chỉ khác trong htmlcode thì dầu ngoặc nhọn ( < > ) còn bbcode thì dấu ngoặc vuông ( [ ] ) Cháu phải tự tìm TL đọc để biết các cặp thẻ tạo bảng, trên diễn đàn bác không thể nói hết vì nó rất dài. Bác chỉ nói nội dung cháu viết vào là ở giữa các cặp thẻ [td] viết vào đây [/td]

Cách 2: Viết nội dung của bảng sau đó dùng các nút 1,2,3 để tạo code. CỤ thể như sau
Ví dụ tạo bảng có 3 hàng và 5 cội như vậy bảng sẽ có tất cả 15 ô. Đẻ tạo ô thứ nhất của hàng 1 ta viết: nội dung ô, bôi đen chon nội dung đã viết, bấm nút 1 ta được

Code:

[td]text 1[/td]

, Làm tương tự với 4 ô còn lại của hàng 1 ta được:

Code:

[td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td]

Sau đó bôi đen toàn bộ rồi bấm nút 2 ta được:

Code:

[tr][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td][/tr]

Vậy là ta đã tạo xong một hàng. Làm tương tự với các hàng khác, sau đó bôi đen toàn bộ rồi bấm nút 3, sau đó viết thêm "border = "1" vào trong thẻ table đầu tiên ta được

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]

Kết quả sẽ như thế này:

text 1	text 2	text 3	text 4	text 5
text 6	text 7	text 8	text 9	text 10
text 11	text 12	text 13	text 14	text 15

Muốn có màu nền cho cả bảng thì ta viết thêm bgcolor = "mã màu" 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 bgcolor = "mã màu" 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 bgcolor = "mã màu" 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 bgcolor = "#0ABCE2" 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ả sẽ hiển thị:

text 1	text 2	text 3	text 4	text 5
text 6	text 7	text 8	text 9	text 10
text 11	text 12	text 13	text 14	text 15

[hunghsmn]

Tự nghiên cứu trước thử hiểu không:

Code:

[table border ="1" align ="center"]
[tr bgcolor ="#0000B0"][td width ="70" rowspan ="4" bgcolor ="#FFE1FF"][center][b][center][color=#99237a]CHƯƠNG


TRÌNH


HÀNH


ĐỘNG[/color][/center][/b][/center][/td]  [td colspan ="5"] [center][color=#ffffff][b]Hướng dẫn tạo bảng biểu[/b][/color][/center] [/td][/tr]

[tr][td][table border ="1"]
[tr bgcolor ="#37BF28"] [td colspan ="7"][center][color=#FFFF00][b]Tiêu đề[/b][/color][/center][/td] [/tr]
[tr bgcolor ="#0ABCE2"]
[td rowspan ="3" bgcolor ="#CAFFFF"]Row 1[/td][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td] [td width ="100"][center]Ghi chú[/center][/td] [/tr]
[tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td] [td bgcolor ="#FFFFFF" rowspan ="2" ][center]Nội dung[/center][/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][/td][/tr]

[tr][td][table border ="1"]
[tr bgcolor ="#37BF28"] [td colspan ="7"][center][color=#FFFF00][b]Tiêu đề[/b][/color][/center][/td] [/tr]
[tr bgcolor ="#0ABCE2"]
[td rowspan ="3" bgcolor ="#CAFFFF"]Row 1[/td][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td] [td width ="100"][center]Ghi chú[/center][/td] [/tr]
[tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td] [td bgcolor ="#FFFFFF" rowspan ="2" ][center]Nội dung[/center][/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][/td][/tr]

[tr][td][table border ="1"]
[tr bgcolor ="#37BF28"] [td colspan ="7"][center][color=#FFFF00][b]Tiêu đề[/b][/color][/center][/td] [/tr]
[tr bgcolor ="#0ABCE2"]
[td rowspan ="3" bgcolor ="#CAFFFF"]Row 1[/td][td]text 1[/td][td]text 2[/td][td]text 3[/td][td]text 4[/td][td]text 5[/td] [td width ="100"][center]Ghi chú[/center][/td] [/tr]
[tr][td]text 6[/td][td]text 7[/td][td]text 8[/td][td]text 9[/td][td]text 10[/td] [td bgcolor ="#FFFFFF" rowspan ="2" ][center]Nội dung[/center][/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][/td][/tr]
[/table]

Kết quả:

CHƯƠNG TRÌNH HÀNH ĐỘNG	Hướng dẫn tạo bảng biểu
	Tiêu đề Row 1 text 1 text 2 text 3 text 4 text 5 Ghi chú text 6 text 7 text 8 text 9 text 10 Nội dung text 11 text 12 text 13 text 14 text 15
	Tiêu đề Row 1 text 1 text 2 text 3 text 4 text 5 Ghi chú text 6 text 7 text 8 text 9 text 10 Nội dung text 11 text 12 text 13 text 14 text 15
	Tiêu đề Row 1 text 1 text 2 text 3 text 4 text 5 Ghi chú text 6 text 7 text 8 text 9 text 10 Nội dung text 11 text 12 text 13 text 14 text 15

Trình bày được một bảng nhue thế này có thể hơi khó với một số bạn, nhưng mình nghĩ, cố gắng sẽ thành công.

[hunghsmn]

Dàn ô qua nhiều cột hay nhiều hàng

1. Dàn ô qua nhiều cột:
Xem mẫu:

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

Coi như ta đã có mẫy cơ bản này

text 1	text 2	text 3	text 4	text 5
text 6	text 7	text 8	text 9	text 10
text 11	text 12	text 13	text 14	text 15

Code:

[table border ="1" align="center"]
[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]

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ẻ [tr ] đầu tiên. Sau đó ta lần lược bôi đen nội dung mới viết rồi lần lược bấm các nút 1, 2 ( xem hình ở bài đầu). Cuối cùng ta viết thêm colspan ="5"vào thẻ [tr ] mới tạo, thêm màu nền , màu chữ cho hàng (xem bài trước). 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 ô qua nhiều hàng:
Mẫu:

STT	text 1	text 2	text 3	text 4	text 5
A1	text 6	text 7	text 8	text 9	text 10
	text 11	text 12	text 13	text 14	text 15

Nhận xét: 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ừ mẫu cơ bản, ta viết tiêu đề cột mới (STT) vào ngay trước thẻ [td ] đầu tiên của hàng thứ nhất, sau đó ta bôi đen để chọn rồi bấm nút 1. Vậy là xong cái tiêu đề của cột mới.
Tiêp theo ta viết nội dung của cột mới vào ngay trước thẻ [td ] của hàng thứ 2. Bôi đen để chon rồi bấm nút 1. Ta viết thêm rowspan ="2"vào thẻ [td ] mới tạo. Vậy là xong, thích thì thêm màu nền cho ô mới ( đã hướng dẫn)

Bài tập: Hãy tạo một bảng như sau:

text 1	text 2	text 3	Ghi chú
text 4	text 5	text 6	Nội dung
text 7	text 8	text 9
"Học, học nữa, học mãi" (Vladimia Ilis Lenin)

[LiBee KS]

Ái chà chà... mỗi lần bác Hùng online là đều có 1 TUT mới

[hunghsmn]

Ái chà chà... mỗi lần bác Hùng online là đều có 1 TUT mới Không phải TUT mới đâu, đây chỉ là chuyện viết bài thôi, tuy nhiên theo chủ quan mình thấy không phải Admin nào cũng viết được chứ đừng nói chi là thành viên. Với ý nghỉ đó (hehe, chủ quan quá) nên mình mới có bài hướng dẫn này. Mục đích của mình là để giúp các admin khi trình bày một bài viết thì admin phải hơn các thành viên khác một cái đầu

[baivong]

FM hạn chế 1 cái là add BBcode mới không được, tuy nhiên với BBcode table, ta có thể giả mạo BBcode và tạo ra nhiều ứng dụng khác
Ví dụ http://diendan.chinhphuc.info/t19554-topic

[Sponsored content]