Học Làm Web

Tự học thiết kế trang web – bài 7

Bài 7 này chúng ta sẽ học cách tạo bảng cho trang web. Tạo bảng rất thường sử dụng trong thiết kế web vào hai mục đích:
1. Để trình bày bảng biểu các dữ liệu theo dòng và cột
2. Lợi dụng việc có thể dùng bảng với biên “vô hình” (không màu sắc) chúng ta dùng để tạo bố cục / layout cho các phần trên trang web một cách dễ dàng.

Ta xét đoạn mã HTML sau:

MÃ: CHỌN TẤT CẢ
<table border="1">
<tr>
<td align="center">Dòng 1, cột 1</td>
<td align="center">Dòng 1, cột 2</td>
<td align="center">Dòng 1, cột 3</td>
<td align="center">Dòng 1, cột 4</td>
</tr>
<tr>
<td align="center">Dòng 2, cột 1</td>
<td align="center">Dòng 2, cột 2</td>
<td align="center">Dòng 2, cột 3</td>
<td align="center">Dòng 2, cột 4</td>
</tr>
<tr>
<td align="center">Dòng 3, cột 1</td>
<td align="center">Dòng 3, cột 2</td>
<td align="center">Dòng 3, cột 3</td>
<td align="center">Dòng 3, cột 4</td>
</tr>
<tr>
<td align="center">Dòng 4, cột 1</td>
<td align="center">Dòng 4, cột 2</td>
<td align="center">Dòng 4, cột 3</td>
<td align="center">Dòng 4, cột 4</td>
</tr>
</table>

Copy nguyên đoạn mã trên đặt vào giữa cặp thẻ <body> và </body> của trang web bạn đang thực hiện và Save lại rồi dùng trình duyệt mở trang web ra xem, bạn sẽ thấy như sau:

Hình ảnh
Hình dự phòng
Một bảng (table) với 4 dòng, 4 cột.

Bây giờ chúng ta phân tích đoạn mã để rõ cách tạo bảng là như thế nào.

Ta dùng cặp thẻ <table> và </table> để mở đầu và kết thúc một bảng (table).

Tuy nhiên, nếu bạn viết: <table>Dữ liệu của tôi ở đây</table> thì bạn sẽ không thể thấy có bảng nào xuất hiện bao quanh dòng chữ của bạn, và như vậy là cách sử dụng thẻ table có sự khác biệt so với các thẻ mà bạn đã từng học. Đúng vậy. Chúng ta sẽ phân tích kỹ hơn.

Để khởi đầu một bảng, bạn hãy: <table>
Và bảng thì sẽ có các ô (gọi là cell), nhiều ô liền kề theo hàng dọc thì sẽ tạo thành cột (column) và liền kề theo hàng ngang, thì chúng ta sẽ gọi là dòng (row):

Hình ảnh
Hình dự phòng
Mô tả dòng và cột của một table

Như vậy, để tạo dòng thì ta dùng thẻ con <tr> và </tr> của table. Trong mỗi dòng chúng ta sẽ tạo ra các ô, ta dùng thẻ <td> và </td> để tạo các ô này.

Chúng ta cần chú ý là dòng đầu tiên ta tạo ra bao nhiêu ô, thì dòng tiếp theo ta cũng tạo ra bấy nhiêu ô thì table mới hoạt động đúng.

Ví dụ:

MÃ: CHỌN TẤT CẢ
<table border="1">
<tr>
<td>Ô đầu tiên dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
</tr>
<tr>
<td>Ô đầu tiên dòng 2</td>
<td>Ô thứ hai dòng 2</td>
</tr>
</table>

Đây là một ví dụ đúng về một table. Thuộc tính border của thẻ <table> dùng để chỉ định độ dày / mỏng của biên một bảng, dùng số nguyên để chỉ, mỗi đơn vị tương đương với một pixel trên màn hình.

Ví dụ:
<table border=”1″> : tạo bảng với độ dày của biên là 1px (pixel)
<table border=”2″> : tạo bảng với độ dày của biên là 2px (pixel)
<table border=”0″> : tạo bảng với độ dày của biên là 0px (pixel) – trường hợp này sẽ làm bảng không còn có biên. Chúng ta sẽ sử dụng trường hợp này trong thiết kế để bố trí các đối tượng trên trang web sao cho đẹp mắt. Nhưng cách dùng bảng để làm layout trang web ngày nay bị phản đối, bạn cần thận trọng khi sử dụng.

Mục đích của table tạo ra để chứa các dữ liệu dạng bảng, không phải là để dàn trang, do đó, tuyệt đối không lạm dụng để dàn trang vì trang sẽ nạp chậm và rối rắm trong quá trình phát triển viết code.

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: