PHẦN 5: Table – bố cục một trang web sử dụng bảng


PHẦN 5: Table – bố cục một trang web sử dụng bảng

Table – một yếu tố rất quan trong trong các Website đẹp. Table cho phép bạn có một sự chính xác đến từng pixel trong bố cục của Homepage. Với Table bạn có thể trang trí và bố cục trang web của mình như một tờ báo với nhiều cột khác nhau. Table làm cho trang web của bạn có một layout sinh động hơn. Trang này chỉ đề cập tới những cái cơ bản nhất của Table.

Cặp TAG

tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều dòng và mỗi dòng lại có thể chứa nhiều ô. Mỗi cặp TAG tạo ra một dòng, trong dòng ấy bạn có thể sử dụng nhiều cặp TAG để có nhiều ô. Cũng như

, và thực ra là một TAG đơn, không cần đến và nhưng nếu cẩn thận, ta vẫn nên dùng nó như một cặp TAG.

Trích dẫn:

HTML Code của bảng trên được viết như sau:

Trích dẫn:

Dòng 1 – ô 1 Dòng 1 – ô 2 Dòng 1 – ô 3
Dòng 2 – ô 1 Dòng 2 – ô 2 Dòng 2 – ô 3

cho biết chiều rộng của table này là 100%, con số này không có một giá trị cố định, nó sẽ thay đổi theo mức rộng của màn ảnh của người đến xem, như vậy người xem không phải scroll ngang. Nhưng khi bạn dùng một giá trị cố định, chẳng hạn: width=”800″, Table này sẽ luôn luôn rộng chừng ấy pixel, bất kể màn ảnh là 800 hay 1024 pixels.

cho biết, ô đó chiếm 33% chiều rộng của dòng.

hướng bảng vào trung tâm của trang web,

định hướng toàn bộ nội dung của một ô. align có thể mang các giá trị sau: “left” (gía trị mặc định – không cần viết cũng được), “center” (trung tâm), “right” (phải)

bgcolor có thể sử dụng cho trang web (), toàn bộ table () hoặc từng ô (

)

border=”1″ bordercolor=”red” có nghĩa: bảng có khung với độ dày 1, màu đỏ

Bạn có thể định khoảng cách giữa nội dung và khung trong một ô bằng cellpadding, cellpadding=”10″ có nghĩa là text cách khung 10 pixels. Tương tự như vậy với khoảng cách giữa các ô trong bảng (cellpadding): cellspacing=”5″ có nghĩa là các ô của table cách nhau 5 pixels

Trích dẫn:

Trong table trên, bạn thấy các ô có chiều cao và chiều rộng khác nhau, chính xác hơn là ô bên trái, phía dưới rộng bằng 2 ô trên, ô bên phải lại cao bằng hai ô bên trái nó. Ðiều đó được thực hiện bởi colspan và rowspan (xem HTML Code)

Trích dẫn:

Dòng 1 – ô 1 Dòng 1 – ô 2
Text Text
Text Text
Dòng 2 – 1 ô

Và đặc biệt nữa là trong ô bên phải, bạn lại thấy một table nữa có hai dòng, mỗi dòng hai ô. Như vậy, bạn có thể lồng một table trong một table khác.

Cũng còn rất nhiều thủ thuật trình bày nữa nhưng tôi nghĩ, nếu sử dụng những kỹ thuật trên cùng với một chút sáng tạo, bạn cũng đã đạt được rất nhiều rồi. Có một điều cần lưu ý là Netscape Version 2 không thể hiện được một table nền tối với chữ sáng. Nhưng bạn không cần ngại bởi ngày nay chắc chẳng ai dùng NS 2 nữa.

About these ads

Gửi phản hồi

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Thay đổi )

Twitter picture

You are commenting using your Twitter account. Log Out / Thay đổi )

Facebook photo

You are commenting using your Facebook account. Log Out / Thay đổi )

Google+ photo

You are commenting using your Google+ account. Log Out / Thay đổi )

Connecting to %s