[back]
[index]
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 ḿ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
<table></table>
tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều
ḍng và mỗi ḍng lại có thể chứa nhiều ô. Mỗi cặp TAG
<tr></tr>
tạo ra một ḍng, trong ḍng ấy bạn có thể sử dụng nhiều cặp
TAG
<td></td>
để có nhiều ô. Cũng như
<p>,
<tr>
và
<td>
thực ra là một TAG đơn, không cần đến
</tr>
và
</td>
nhưng nếu cẩn thận, ta vẫn nên dùng nó như một cặp TAG.
|
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 ḿnh như
một tờ báo với nhiều cột khác nhau. |
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 ḿnh như
một tờ báo với nhiều cột khác nhau. |
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 ḿnh như
một tờ báo với nhiều cột khác nhau. |
|
Với Table bạn có
thể trang trí và bố cục trang web của ḿ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. |
Với Table bạn có
thể trang trí và bố cục trang web của ḿ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. |
Với Table bạn có
thể trang trí và bố cục trang web của ḿ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. |
HTML Code của
bảng trên được viết như sau:
<table border="1"
bordercolor="red" width="80%" align="center" cellpadding="10"
cellspacing="5" bgcolor="gray">
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Ḍng
1 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Ḍng
1 - ô 2</td>
<td width="34%" bgcolor="#C0C0C0" align="left">Ḍng
1 - ô 3</td>
</tr>
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Ḍng
2 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Ḍng
2 - ô 2</td>
<td width="34%" bgcolor="#feedd1" align="left">Ḍng
2 - ô 3</td>
</tr>
</table> |
- <table
width="100%">
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.
- <td
width="33%">
cho biết, ô đó chiếm
33%
chiều rộng của ḍng.
- <table
align="center">
hướng bảng vào trung tâm của trang web,
<td align=
"left">
đị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 (<body>),
toàn bộ table (<table>)
hoặc từng ô (<td>)
- 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
|
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 ḿnh như
một tờ báo với nhiều cột khác nhau. |
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 ḿnh như
một tờ báo với nhiều cột khác nhau. |
|
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 ḿ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.... |
|
Table - một yếu
tố rất quan trong trong các Website đẹp. |
Table - một yếu
tố rất quan trong trong các Website đẹp. |
|
|
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 ḿ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. |
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)
<table border="1"
cellpadding="10" bordercolor="#FF0000" width="80%"
cellspacing="5">
<tr>
<td width="33%" valign="top" bgcolor="#E8E8E8">Ḍng
1 - ô 1</td>
<td width="33%" valign="top" bgcolor="#E8E8E8">Ḍng
1 - ô 2</td>
<td width="34%" valign="top" bgcolor="#feedd1"
rowspan="2">
<table width="100%" cellpadding="5" cellspacing="5" border="0"
bgcolor="white">
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="66%" valign="top" bgcolor="#ffcc99"
colspan="2">Ḍng
2 - 1 ô</td>
</tr>
</table> |
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 ḍng, mỗi ḍ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 tŕ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.
|