Sẽ thật là thiếu sót nếu bạn chỉ sử dụng mã CSS của VG34 trong việc đóng khung các topic trong trang của bạn. Hệ thống mã html có nhiều kiểu mẫu khác nhau cho TAB tuy rằng những khung của TAB trong html là đơn giản thôi chứ không được nhiều chi tiết và tạo nên hiệu ứng 3D như của VG34. Nhưng bạn phải hiểu biết sự hình thành và cú pháp của nó để sử dụng. Khi đã quen thuộc với nó rồi bạn cũng có thể tô điểm thêm những chi tiết mong muốn theo ý bạn, đó chính là cách mà VG34 đã dùng để tạo nên bộ mã CSS riêng của VG34 mang tính chất hiệu ứng 3D.

Trước nhất VG34 xin giới thiệu mã nguồn đơn giản như sau:

Cặp TAG <table></table> tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều dòng và mỗi dòng lại có thể chứa nhiều ô. Mỗi cặp TAG <tr></tr> tạo ra một dòng, trong dòng ấy bạn có thể sử dụng nhiều cặp TAG <td></td> để có nhiều ô. Cũng như <p>, <tr> và <td> thực ra là một TAG đơn, không cần đến </tr> và </td> nhưng nếu cẩn thận, ta vẫn nên dùng nó như một cặp TAG. 

<table border="1" bordercolor="red" width="80%" align="center" cellpadding="10" cellspacing="5" bgcolor="gray"> <tr> <td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 1</td> <td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 2</td> <td width="34%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 3</td> </tr> <tr> <td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 1</td> <td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 2</td> <td width="34%" bgcolor="#feedd1" align="left">Dòng 2 - ô 3</td> </tr></table><table width="100%">

nếu bạn sử dụng bộ mã trong khung copy trên bạn sẽ có trên trang của bạn bộ TAB như sau:

Dòng 1 - ô 1	Dòng 1 - ô 2	Dòng 1 - ô 3
Dòng 2 - ô 1	Dòng 2 - ô 2	Dòng 2 - ô 3

như thế bạn có tất cả là 6 ô. (3 ô ở dòng 1 và 3 ô ở dòng 2). Bạn có thể vào khung mã để thay thế các địa chỉ trang mà theo nhu cầu bạn sẽ đặt nó. VG34 cũng đang sử dụng TAB này cho phần đầu trang (_header) nhưng có sửa đổi chút ít về màu khung và độ dầy của khung, các bạn đã thấy và hiểu rõ chưa?

Nếu bạn đã hiểu rõ, bạn có thể làm thử, Khi đã làm được rồi mời các bạn xem một kiểu TAB khác như sau:

<table border="1" cellpadding="10" bordercolor="#FF0000" width="100%" cellspacing="5"> <tr> <td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 1</td> <td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 2</td> <td width="34%" valign="top" bgcolor="#feedd1" rowspan="2"> <table width="100%" cellpadding="5" cellspacing="5" border="0" bgcolor="white"> <tr> <td width="50%" bgcolor="#e8e8e8">Text</td> <td width="50%" bgcolor="#e8e8e8">Text</td> </tr> <tr> <td width="50%" bgcolor="#e8e8e8">Text</td> <td width="50%" bgcolor="#e8e8e8">Text</td> </tr> </table> </td> </tr> <tr> <td width="66%" valign="top" bgcolor="#ffcc99" colspan="2">Dòng 2 - 1 ô</td> </tr> </table>

Sử dụng khung mã trên bạn sẽ có bộ TAB như sau:

Dòng 1 - ô 1	Dòng 1 - ô 2	Text Text Text Text
Dòng 2 - 1 ô

Cũng không có gì khó đâu các bạn, gà như VG34 vẫn còn làm được thì thông minh xuất chúng như các bạn có thể nói nhìn là hiểu ngay, làm được ngay thôi. VG34 mong rằng các bạn sẽ áp dụng không có gì trở ngại, vấn đề là có muốn thử hay không mà thôi......

Bây giờ nếu VG34 có đưa ra hàng chục kiểu nữa cũng thừa thôi, vì thông qua hai kiểu này bạn đã có sự hiểu biết về mã TAB, nếu vận dụng nó bạn có thể chế biến TAB theo nhu cầu của bạn tưởng cũng không khó khăn gì đâu. VG34 mong chờ và kỳ vọng ở sự sáng tạo vô cùng mỹ thuật của các bạn. Các bạn hãy tự tin và nên nhớ: "Không có việc gì khó, chỉ sợ tiền không nhiều. Dời núi hay lấp biển, kêu thợ làm thì xong".......he he he......

XEM TIẾP TRANG SAU
THIẾT KẾ BLOG
TRÊN NỀN XTGEM