Giới thiệu các bạn thêm nhiều dạng table khác nhau.
Nhiều table thiết kế không gò bó với các border, được dùng nhiều cho các trang có width mở, có thể là dạng responsive hay trang có width rộng.
Category: Chuyên đề HTML/CSS
Table với border các kiểu khác nhau
Table | Gửi bình luậnĐây là nhiều dạng table mà chúng ta thường gặp, nếu không biết cách điều chỉnh border hợp lý thì những dạng này thật sự là một rắc rối, tuy nhiên chỉ vài dòng CSS sử lý spacing và border phù hợp, chúng ta có thể tạo được table hợp lý.
Border cho table
Table | Gửi bình luậnMặc định của table là các khoảng cách giữa các hàng và cột.
Chúng ta có thể sử dụng border trong css để điều chỉnh cho đẹp và dễ nhìn hơn.
Background cho table
Chuyên đề HTML/CSS, Table | Gửi bình luậnĐể cho table dễ nhìn hơn, dễ phân biệt đâu là tiêu đề, đâu là nội dung, đâu là khu vực được đánh dấu, … chúng ta sử dụng nhiều cách khác nhau, một trong cách đó là background cho các thành phần table.
Table align
Chuyên đề HTML/CSS, Table | Gửi bình luậnMuốn canh vị trí tất cả tiêu đề hay nội dung của table, chúng ta sẽ sử dụng các thuộc tính của CSS kèm theo sẽ phát huy hiệu quả cả về mặc SEO và hiệu quả code.
colspan và rowspan
Chuyên đề HTML/CSS, Table | Gửi bình luậnĐể merge các thành phần cột và hàng của table, chúng ta sử dụng colspan và rowspan.
Table trong layout web
Chuyên đề HTML/CSS, Table | Gửi bình luậnTable trong html là một trong những thành phần cơ bản nhất, được dùng để hiển thị bảng tốt nhất.
Pagenation với background
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnPagenation với background, giúp cho layout đỡ nhàm chán hơn.
Pagenation full với border
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnPagenation full width và border, thêm dạng cho layout cân đối.
Pagenation với border
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnTrang trí thêm border bao quanh các thành phần pagenation cho phong phú, đây cũng là dạng thường dùng.
Pagenation full width
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnPagenation full width dành cho thiết kế full, hoặc layout cân bằng.
Pagenation với border 2 bên
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnPagenation border 2 bên, mỗi bên của các trang đều có border, nhìn tách biệt các trang.
Pagenation cơ bản
Chuyên đề HTML/CSS, Pagenation | Gửi bình luậnPagenation (phân trang) là một dạng mà rất nhiều trang web sử dụng, dùng liên kết nhanh đến từng trang trong sản phẩm hay tin tức.
Navigation border hover
Chuyên đề HTML/CSS, Navigation | Gửi bình luậnNavigation với border hover, hiệu ứng thêm đẹp mắt với xuất hiên border khi hover.
Navigation với border
Chuyên đề HTML/CSS, Navigation | Gửi bình luậnNavigation với border, thêm định dạng mới đơn giản dễ sử dụng.
Navigation với background
Chuyên đề HTML/CSS, Navigation | Gửi bình luậnNavigation với background, siêu đơn giản, tuy nhiên nếu chưa biết phương pháp thì có khi bạn cần mò … vài tiếng chứ chẳng chơi.
Navigation với 2 line
Chuyên đề HTML/CSS, Navigation | Gửi bình luậnNavigation 2 lines, không khác hơn phần cơ bản nhiều, bằng cách xử lý thêm một hàng, giúp cho navigation thêm dạng đa dạng hơn.
Navigation cơ bản
Navigation | Gửi bình luậnNavigation (thanh điều hướng) là mẫu không thể thiếu hầu hết các trang web, dùng liên kết nhanh tới các mục quan trọng trong website.
Block list dọc với border
Block list, Chuyên đề HTML/CSS | Gửi bình luậnKhông có gì khác biệt sơ với block list dọc, chỉ đơn giản là thêm cách xử lý border.
Block list theo hàng dọc
Block list, Chuyên đề HTML/CSS | Gửi bình luậnBlock list với thiết kế dọc, thiết kế này dành nhiều cho trưng bày sản phẩm hoặc các banner giới thiệu.