[Hướng dẫn] Sử dụng BBcode Table

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 sẽ có đoạn mã như sau: [ic]

Nội dung

[/ic]

Trong đó:

• [ic][td][/td][/ic] là cột của bảng
  
• [ic][tr][/tr][/ic] là hàng của bảng
  
• [ic][/ic] là 1 bảng

Ví dụ: Muốn có 5 cột ta làm như sau
[ic][td]Cột 1[/td][td]Cột 2[/td][td]Cột 3[/td][td]Cột 4[/td][td]Cột 5[/td][/ic]

Và đưa nó vào 1 hàng của bảng chỉ việc thêm [ic][tr][/ic]
[ic][tr][td]Cột 1[/td][td]Cột 2[/td][td]Cột 3[/td][td]Cột 4[/td][td]Cột 5[/td][/tr][/ic]

Cứ tạo hàng như vậy ta có được đoạn mã sau:

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]

Và kết quả:

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 [ic]bgcolor= "mã màu"[/ic] ( Lấy tại http://www.vn-icefox.net/h16-color ) 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 [ic]bgcolor= "mã màu"[/ic] 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 [ic]bgcolor= "mã màu"[/ic] 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 [ic]bgcolor= "#0ABCE2"[/ic] 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ả có được:

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

Tạo bảng nâng cao:
1. Dàn ô nhiều cột

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

Đầu tiên, các bạn có một bảng cơ bản dư là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 align="center"][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]

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ẻ [ic][tr][/ic] đầu tiên. Sau đó viết thêm [ic]colspan="5"[/ic] (Số 5 = với số cột của bảng) vào thẻ [ic][tr][/ic] mới tạo, thêm màu nền, màu chữ cho hàng. 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 ô nhiều hàng

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

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ừ 1 bảng table ta viết thêm vào thẻ [ic][td][/ic] ban đầu [ic]rowspan="2"[/ic]

Ta có 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)

Cellspacing trong Table

Như các bạn thấy ví dụ ở trên Table sẽ có những đường viền "khó chịu"
Đừng lo vì đã có cellspacing
cellspacing - Xóa khoảng cách của border

Ví dụ:

Test	cellspacing
Ta có mã:	Code: [table border="1px" cellspacing="10"][tr][td]Test[/td][td]cellspacing[/td][/tr] [tr][td]cellspacing[/td][td]Test[/td][/tr][/table]

Ví dụ cellspacing về 1:

Test	cellspacing
Ta có mã:	Code: [table border="1px" cellspacing="1"][tr][td]Test[/td][td]cellspacing[/td][/tr] [tr][td]cellspacing[/td][td]Test[/td][/tr][/table]

Hỗ trợ post bài:

Code:

[table width="100%"][tr][td width="30%"]
Ảnh
[/td][td width="70%" style="padding-left: 10px"]
Nội dung giới thiệu
[/td][/tr][/table]