CSS (Cascading Style Sheet) hiện nay được sử dụng rất nhiều trong việc thiết kế giao diện web, tuy nhiên sử dụng CSS như thế nào cho hiệu quả thì không phải là điều ai cũng nắm rõ.

Xin được giới thiệu với các bạn series bài về sử dụng CSS trong thực tế thiết kế web. Series nhắm đến đối tượng là các bạn mới bắt đầu con đường khám-và-phá CSS, qua series tôi muốn chuyển đến các bạn một số kinh nghiệm sử dụng CSS một cách tối ưu.

Bài 1 : Vứt hết bảng đi!

Tại sao lại thế?!

Tốc độ là một trong những tiêu chí hàng đầu của web, tối ưu hóa để trang của bạn tải xuống nhanh là một chuyện, làm sao cho nó hiển thị trong thời gian ngắn nhất lại là chuyện khác. Bảng (table) vốn là một trong những công cụ hỗ trợ trình bày cực kỳ hữu dụng, bảng giúp việc bố trí các đối tượng trên trang đơn giản chỉ với vài cặp thẻ.

Ấy vậy mà mớ thẻ đó lại làm chậm quá trình dựng trang của bạn trên trình duyệt. Các trình duyệt khi gặp thẻ <table> sẽ dừng dựng (render) trang, chờ nhận dữ liệu cho tới khi gặp thẻ đóng </table>, khi đó trình duyệt sẽ xử lý và dựng bảng lên. Nghe có vẻ không đến nỗi nào nhưng hãy thử tưởng tượng với một khối lượng lớn dữ liệu, thời gian chờ dựng trang có thể lên tới vài chục giây! Đó là khoảng thời gian đủ để khách viếng thăm quyết định bấm nút “Back” để chuyển sang một trang khác.

Giải pháp

Giải pháp đưa ra ở đây là sử dụng CSS thay thế cho bảng, nghe thì có vẻ lằng nhằng, nhưng hãy cứ thử xem sao 🙂 Trước hết giả sử bạn cần tạo ra một bảng chữ cái từ a-z, nếu dùng các thẻ bảng, thì mã nguồn HTML của bạn sẽ có dạng như Đoạn mã 1 dưới đây:

[sourcecode lang=”html”]
<table width="200" border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
<tr>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
<td>o</td>
<td>p</td>
<td>q</td>
<td>r</td>
<td>s</td>
<td>t</td>
</tr>
<tr>
<td>u</td>
<td>v</td>
<td>w</td>
<td>x</td>
<td>y</td>
<td>z</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
[/sourcecode]

Trình duyệt sẽ đọc hết khối mã trên từ <table> đến </table> rồi mới dựng trang. Sau đây ta thử chuyển sang giải pháp gọn nhẹ nhé 🙂

Trước hết ta cần tái tạo nguyên cấu trúc của bảng, về cơ bản, bảng mới sẽ gồm những bộ thẻ <div> và <span>. Sẽ có một thẻ <div> lớn bao chứa cả bảng ứng với thẻ <table>, tiếp theo tới các dòng trong bảng, mỗi dòng (row) sẽ được đưa vào một thẻ <div>, tương ứng với mỗi thẻ <tr>. Cuối cùng đơn vị nhỏ nhất của bảng là các ô (cell) sẽ được biểu thị bằng thẻ <span>. Bạn hình dung được chứ, nếu chưa hãy tham khảo Đoạn mã 2 bên dưới:

[sourcecode lang=”html”]
<div class="t">
<div class="tRow">
<span class="tCell">a</span>
<span class="tCell">b</span>
<span class="tCell">c</span>
<span class="tCell">d</span>
<span class="tCell">e</span>
<span class="tCell">f</span>
<span class="tCell">g</span>
<span class="tCell">h</span>
<span class="tCell">i</span>
<span class="tCell">j</span>
</div>
<div class="tRow">
<span class="tCell">k</span>
<span class="tCell">l</span>
<span class="tCell">m</span>
<span class="tCell">n</span>
<span class="tCell">o</span>
<span class="tCell">p</span>
<span class="tCell">q</span>
<span class="tCell">r</span>
<span class="tCell">s</span>
<span class="tCell">t</span>
</div>
<div class="tRow">
<span class="tCell">u</span>
<span class="tCell">v</span>
<span class="tCell">w</span>
<span class="tCell">x</span>
<span class="tCell">y</span>
<span class="tCell">z</span>
<span class="tCell"> </span>
<span class="tCell"> </span>
<span class="tCell"> </span>
<span class="tCell"> </span>
</div>
</div>
[/sourcecode]

Hãy chú ý tới các các thẻ <div>, <span> và thuộc tính class của các thẻ đó, việc đưa thuộc tính class cho từng thẻ một cách có ý đồ như vậy nhằm “hướng dẫn” cho trình duyệt biết các thẻ tương ứng có nhiệm vụ gì.

Hãy ngắm thử thành quả của việc copy-paste nào 😛

Như bạn thấy, ở trên là bảng dựng bằng các thẻ tạo bảng chuẩn của HTML, còn bên dưới là tác phẩm bằng mớ <div> và <span>, trông có vẻ không như mong đợi… Hãy cứ từ từ 😉 Giờ đã đến lúc thổi vào mớ hỗn độn trên phép màu của CSS.

Hẳn là bạn đã có một chút kinh nghiệm với CSS rồi chứ, nếu chưa cũng chẳng sao, cứ lại chơi chiêu copy-paste rồi ta lại phanh phui vấn đề ra để ngâm cứu. Hãy tham khảo Đoạn mã 3 nhé:

[sourcecode lang=”css”]
<style>
.t
{
width: 260px;
border: solid 1px #000000;
padding: 0px;
margin: 0px;
}
.tRow
{
width: 100%;
}
.tCell
{
display: inline-block;
width: 20px;
border: solid 1px #000000;
margin: 0px;
}
</style>
[/sourcecode]
Ở đây, chúng ta sử dụng 3 phần định nghĩa (ở CSS gọi là các selector) cho các class CSS mà ta sử dụng trong Đoạn mã 2. Định nghĩa cho bảng ta dùng class t, cũng chẳng có gì nhiều, chủ yếu là định dạng lại độ rộng cho bảng “giả”. Tiếp theo là với class tRow, tRow đại diện cho một dòng (row) trong bảng, vì vậy để đảm bảo cho chắc ăn rằng một dòng sẽ trải kín chiều rộng của bảng “giả” thì trong phần định nghĩa hãy thêm vào thuộc tính width: 100%;. Cuối cùng, yếu tố cốt lõi để khiến bảng “giả” trông thật hơn đó là làm sao để các ô (cell) có độ rộng như nhau.

Bí quyết ở đây là thuộc tính display, mặc định thẻ <span> sẽ được hiển thị như một nội dung inline (tức là không có gì phân tách với các nội dung xung quanh). Việc đặt giá trị cho display: inline-block; giúp trình duyệt hiểu để dựng thẻ span với class là tCell như một khối nội dung, bởi khi đó thuộc tính width sẽ có tác dụng. Nghe có vẻ hơi lằng nhằng, hãy nhìn thêm ví dụ bên dưới để rõ hơn nhé.

Sau khi dán (hoặc tự ngâm cứu) mớ CSS ở Đoạn mã 3 ở trên vào trang, bảng “giả” của bạn trông “xịn” hơn rồi đấy 🙂

Tất nhiên là chưa đẹp, hãy thêm chút màu mè vào cho bảng “giả” của chúng ta nhé 🙂 Bởi thẩm mỹ là một yếu tố không kém phần quan trọng, trang có nhanh đến mấy mà xấu không tả thì khách họ cũng nhấn “Back” mà thôi 🙂

Đôi lời kết

Đã có rất nhiều khảo sát chứng minh rằng dựng bảng với CSS giúp cải thiện tốc độ tải và dựng trang lên tới 33% trên kết nối thường (xDSL) và tới 59% trên kết nối Modem cố điển. Thật ấn tượng phải không nào.

Trên đây là bài hướng dẫn nhỏ về sử dụng CSS để dựng bảng trong HTML, hy vọng nó có ích với bạn. Hãy đón chờ thêm các bài khác thuộc series “CSS – Áp dụng trong thực tiễn” nhé 🙂

Nguyễn Trí Trung – FIS.PFS Developer

trungnt22@fpt.com .vn