1. BẢNG (TABLE)
Bảng thường được sử dụng để tạo các văn bản nhiều cột
hoặc phân chia trang thành nhiều vùng khác nhau rất tiện lợi trong thiết kế và
trình bày trang web
Cú pháp:
<TABLE >
<TR>
<TD>Nội dung trong ô 1</TD>
…
<TD>Nội dung trong ô n</TD>
</TR>
<TR>
<TD>Nội dung trong ô 1</TD>
|
…
<TD>Nội dung trong ô n</TD>
</TR>
…
</TABLE>
- Thẻ <table> </table>: chỉ thị một bảng
- Thẻ <tr>……</tr>: xác định một dòng của
bảng
- Thẻ <td>……</td>: xác định một ô chứa dữ
liệu của bảng.
Ví dụ 1:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY >
<TABLE border="1">
<TR>
<TD>Cell 2</TD>
<TD>Cell 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ví dụ 2:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY
>
<table border="1">
<TR>
<TD>Cell 1</TD>
</TR>
<TR>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
</TR>
</table>
</BODY>
</HTML>
Ví dụ 3:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY
>
<table border="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell
3</TD>
<TD>Cell
4</TD>
</TR>
</table>
</BODY>
</HTML>
2.1. Thuộc tính của bảng
a. Thêm khung viền:
<Table Border
=n>…<Table>
n: độ dày của khung viền tính bằng Pixel
n: độ dày của khung viền tính bằng Pixel
b. Định màu của
khung viền và màu nền:
<Table
BorderColor= “Color” BgColor=”Color”>…</Table>
c. Tạo bóng:
<Table
BorderColorDark= “Color”> : Bóng đổ ở cạnh dưới và phải của bảng
<Table BorderColorLight= “Color”> : Bóng đổ cạnh trên trái của bảng
<Table BorderColorLight= “Color”> : Bóng đổ cạnh trên trái của bảng
d. Định chiều rộng
và chiều cao của bảng:
<Table Width
=n height=m>, n
là chiều rộng tính bằng Pixel
e. Canh lề bảng:
<Table Align=
left/ right/ center>…</table>
f. Thuộc tính
Cellpadding và CellSpacing:
<Table
CellSpacing =”value”>: Khoảng cách giữa đường viền của các ô
<Table CellPadding=”Value”>: Khoảng cách giữa đường viền của ô với văn bản
<Table CellPadding=”Value”>: Khoảng cách giữa đường viền của ô với văn bản
g. Tag tiêu đề của
Table:
<Caption>
tiêu đề </Caption>
- Thẻ <Caption> nằm trong cặp Tag <Table>…</Table>
- Thẻ <Caption> nằm trong cặp Tag <Table>…</Table>
2.2. Thuộc tính của cột
a. Canh lề theo
chiều ngang:
<Td
Align=left/ right/center>…</Td>
b. Canh lề theo
chiều đứng:
<Td Valign=
Top/ Bottom/ Middle>…</Td>
c. Trộn ô:
<Td Colspan=n>: trộn n cột
<Td RowSpan=n>: trộn n dòng
d. Tag <th>:
Có tác dụng như
<td> nhưng làm cho dữ liệu trong ô được in đậm và canh giữa
<tr>
<th> Nội
dung </th>
</tr>
Ví
dụ:
<TABLE
border=2>
<tr>
<th> Cell 1 </th>
</tr>
<tr>
<th>
Cell 2 </th>
</tr>
<TABLE>
Ví dụ:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY
>
<table border="5" CellSpacing =10
BorderColorDark=red width=50%>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell
3</TD>
<TD>Cell
4</TD>
</TR>
</table>
</BODY>
</HTML>
Ví dụ:
<Table
border="1" bgcolor= “fuschia” bordercolor=”red” align=”center” Width=50% Height=30%>
<caption>
Properties of Table</caption>
<tr>
<th colspan="3"> Colspan</th>
</tr>
<tr>
<th Rowspan=”2”> Rowspan</th>
<td align=center>Cell 1</td>
<td align=center>Cell 2</td>
</tr>
<tr>
<td align=center> Cell 3</td>
<td align=center> Cell 4</td>
</tr>
</table>
Ví dụ: Thiết kế một trang web như mẫu
<html>
<head>
<title> Trinh bay
trang</title>
</head>
<body>
<Table
width="68%" height="135" border="1"
cellspacing="0"
bordercolor="#990033">
<tr>
<th
colspan="2" bgcolor="#FFCCFF">
<div align="center">Computer Model
</div>
</th>
</tr>
<tr>
<td
width="24%" height="98" valign="top">
<table width="100%" border="1"
cellspacing="0">
<tr>
<td>Tin
tuc</td>
</tr>
<tr>
<td>Giai
tri</td>
</tr>
<tr>
<td>Quang
cao</td>
</tr>
<tr>
<td
height="23">The thao</td>
</tr>
</table>
</td>
<td
width="76%" align="center">
<img src="../images/h2.jpg"
width="106" height="92">
</td>
</tr>
</table>
</body>
</html>