Khi bạn muốn thiết kế bảng dữ liệu trên trang Wrb, bạn cần phải khai báo thẻ
<table>. Sau khi khai báo thẻ này, bạn phải khai báo các thẻ dòng <tr> và thẻ cột
<td> hoặc <th>. Trong đó, <th> sẽ xác định nội dung bên trong nó là tiêu đề, tức là nội dung mặc định được in đậm và canh giữa.
Cấu trúc gọi bảng:
4.2. Các thuộc tính định dạng bảng
Khi thiết lập một bảng biểu trên Web, bạn cần chú ý đến các thuộc tính sau đây:
Thuộc tính Ý nghĩa
border Khởi tạo bảng với đường viền (mặc định là không có đườngviền,
border= “0”).
cellpadding Khoảng cách từ nội dung trong ô đến đường viền.
cellspacing Khoảng cách giữa các ô trong bảng.
align Canh lề cho bảng (center, left, right).
width Xác định chiều rộng cho toàn bảng.
Xác định chiều cao cho bảng. Ttuy nhiên khi thiết kế bảng, bạn chỉ
height cần quan tâm đến chiều rộng chứ không quan tâm đến chiều cao, bởi
vì chiều cao của bảng phụ thuộc vào dữ liệu bạn có.
background Chèn ảnh nền cho bảng.
bgcolor Tô màu nền cho bảng.
bordercolor Tô màu đường viền cho bảng. Lưu ý một số trình duyệt không hỗ trợ
hiển thị màu viền.
4.2.1. Thuộc tính trong thẻ dòng <tr>
Sau đây là một số thuộc tính thường dùng cho dòng:
Thuộc tính Ý nghĩa
align Canh lề dữ liệu theo hướng ngang (align=”left/center/
justify/right”).
valign Canh lề dữ liệu theo hướng đứng (valign=”top/middle/bottom”).
Xác định chiều cao dòng. Lưu ý, đối với dòng chúng ta không
height quan tâm đến chiều rộng bởi vì chiều rộng của dòng phụ thuộc
vào chiều ộng của bả
bgcolor Tô màu nền cho dòng. Lưu ý, trong dòng chỉ có thể tô màu nền
chứ không thể gọi ảnh nền cho dòng. bordercolor
Tô màu đường viền dòng. Lưu ý một số trình duyệt không hỗ trợ hiển thị màu viền.
id id nhận dạng để phân biệt giữa các dòng trong bảng 4.2.2. Thuộc tính trong các thẻ ô / cột <th>, <td>
Sau đây là một số thuộc tính thường dùng cho ô / cột:
Thuộc tính Ý nghĩa
Align Canh lề dữ liệu trong ô theo hướng ngang (align=”left/center/
justify/right”).
valign Canh lề dữ liệu trong ô theo hướng đứng
(valign=”top/middle/bottom”).
background Gọi ảnh nền cho ô.
bgcolor Tô màu nền cho ô
Tô màu đường viền cho ô. Lưu ý một số trình duyệt không
bordercolor hỗ trợ hiển
thị màu viền.
colspan Gôm cột. Ta có colspan= “n” với n là số cột muốn thành một
ô.
rowspan Gôm hàng. Ta có rowspan= “n” với n là số dòng muốn thành
một ô.
id id nhận dạng để phân biệt giữa các ô.
width Xác định chiều rộng của ô.
Xác định chiều cao của ô. Tuy nhiên, đối với ô / cột thì ta
height thường ít quan tâm đến chiều cao vì chiều cao của ô / cột
4.3. Thiết kế giao diện Web bằng <table>
Ngoài được dùng để chứa thông tin trên bảng biểu. Thẻ <table> còn được vận dụng nhiều trong thiết kế giao diện. Khi giao diện trang có cấu trúc phức tạp, bạn thực hiện khai báo các thẻ <table>lồng nhau.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ví dụ 1-4-2</title> </head>
<body bgcolor="#000000">
<table bgcolor="#FFFFFF" border="1" align="center" bordercolor="#0000CC" width="90%" cellspacing="0"> <tr height="100">
<td colspan="3">Banner</td> </tr>
<tr>
<table bgcolor="#4A89F0" border="0" cellspacing="0"
width="100%">
<tr bgcolor="#0033FF"><th>Menu chính</th></tr> <tr><td><a href="#">Danh mục 1</a></td></tr> <tr><td><a href="#">Danh mục 2</a></td></tr> <tr><td><a href="#">Danh mục n</a></td></tr> </table>
</td>
<td valign="top"> Nội dung trang Web </td>
<td valign="top" height="200" width="20%">
<table bgcolor="#4A89F0" border="0" cellspacing="0"
width="100%"> <tr bgcolor="#0033FF"><th>Đăng nhập</th></tr> <tr><td>Tên đăng nhập</td></tr> <tr><td>Mật khẩu</td></tr> </table> </td> </tr> <tr> <td colspan="3" bgcolor="#0033FF"> Dòng footer </td> </tr> </table> </body> </html>