Trong chúng ta tôi giám chắc rằng không còn ít người vẫn còn mặc cảm với những menu dạng tab, không phải vì nó xấu mà luôn nghĩ rằng làm nó khó và cấu trúc của nó rất phức tạp. Chính bản thân tôi trước đây cũng như vậy. Nhưng thực ra có phải như vậy không? để trả lời câu hỏi đó bây giờ chúng ta cùng nhau thử Style cho một kiểu tab đơn giản để xem nó có thực sự khó như chúng ta vẫn thường nghĩ không?.

Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.

Đầu tiên chúng ta sẽ định dạng cho phần khung của tab như sau:

div#wrapper {
margin: 50px;
padding: 0;
}

Chúng ta sẽ dùng định dạng của thẻ <ol> để tạo lên các tab ở phần 1. Về nguyên tắc thì chúng ta có thể dùng một trong ba thẻ <ul>, <ol>, <dl>. Nhưng tại sao tôi lại dùng thẻ <ol>, là bởi vì một lý do nào đó mà trình duyệt của người xem không tải được CSS từ Website của bạn thì họ vẫn hiểu được cấu trúc tab của bạn. Định dạng của phần một như sau

<ol class=”tab”>
<li class=”active”>Trang chủ</li>
<a href=”gioithieu.html” title=”Giới thiệu”>Giới thiệu</a>
<a href=”sanpham.html” title=”Sản phẩm”>Sản phẩm</a>
<a href=”tintuc.html” title=”Tin tức”>Tin tức</a>

<a href=”lienhe.html” title=”Liên hệ”>Liên hệ</a>
</ol>

Bây giờ chúng ta sẽ định dạng sao cho các tab nằm trên cùng một hàng và có hình dáng của tab.

ol.tab {
background: url(../dot.gif) repeat-x left bottom; /* ảnh 1px */
list-style: none;
margin: 0;
padding: 6px 0;
position: relative;
}

ol.tab li {
background: #F2F5FA;
border: 1px solid #D3DDED;
display: inline; /* các thẻ li ở trên một dòng */
margin-right: 5px;
padding: 0;
}

Trong cách định dạng này ta có sử dụng một kỹ thuật nhỏ, đó là chúng ta có sử dụng một ảnh .gif có kích thước 1px x 1px để thay thế border-bottom của <ol>

Khi đang ở trong trang nào đó thì tab của trang đó sẽ có màu khác với những tab khác, do vậy chúng ta sẽ đặt cho tab đó một class là active. Vì vậy chúng ta cần phải định dạng cho riêng cho các tab active như sau:

ol.tab li.active {
background: #FFF;
border-bottom: 1px solid #FFF;
font-weight: bold;
padding: 5px 10px;
}

Tiếp theo chúng ta sẽ định dạng cho các link nằm trong thẻ

ol.tab a {
font-weight: bold;
margin: 0;
padding: 5px 10px;
}

Cuối cùng bây giờ chúng ta sẽ định dạng phần chứa nội dung của mỗi tab. Phần này chỉ đơn giản là chúng ta định dạng cho thẻ <div> chứa nội dung.

div#content {
border: 1px solid #D3DDED;
border-top: none;
padding: 10px;
}

Và bây giờ các bạn mở file .html bằng một trình duyệt nào đó và ngắm nhìn kết quả của mình. Các bạn thấy đấy menu dạng tab đâu có quá phức tạp đúng không các bạn? các bạn có thể tải toàn bộ ví dụ tại đây.

Bình thường thì bạn muốn đặt một table có chiều rộng cố định vào giữa màn hình thì bạn làm thế nào? có phải bạn đặt thuộc tính align="center" vào trong thẻ <table>?. Nếu bạn làm như vậy thì bạn chỉ được kết quả đúng như ý bạn trên một số trình duyệt, còn một số trình duyệt sẽ không thể hiện kết quả như bạn muốn.

Sau đây tôi muốn giới thiệu với bạn một tips nhỏ trong CSS để đặt một table có kích thước cố định vào giữa trang.

Giả sử rằng bạn có một table như sau: <table class="center">. Nếu bây giờ bạn muốn đặt table đó vào giữa trang màn hình bạn chỉ việc đặt cho hai thuộc tính margin-left và margin-right của table có giá trị bằng auto.

Chúng ta có mã CSS như sau:

table.center {
width: 780px;
margin-left: auto;
margin-right: auto;
}