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>
