I. Làm việc với Bảng dạng đối xứng
Bảng đối xứng là bảng mà mỗi dòng đều có số
cột như nhau về số lượng cột, cũng như độ rộng của
cột
- Thẻ <table></table>
Cặp thẻ <table></table> dùng
để khai báo một bảng (bắt đầu và kết thúc một
bảng), khai báo các thuộc tính quy định cho bảng như
đường viền, mầu nền, vị trí hiển thị bảng,…
- Thẻ <tr></tr>
Cặp thẻ <tr></tr> dùng để khai báo
một dòng trong bảng (bắt đầu và kết thúc một dòng).
- Thẻ <td></td>
Cặp thẻ <td></td> dùng để khai báo một cột
trong bảng (bắt đầu và kết thúc một cột).
Chú ý: Để khai báo một bảng
thì chúng ta cần phải khai báo đầy đủ 3 cặp thẻ:h
- Để Bảng hiển thị được đầy đủ các dòng và các cột thì trong mỗi một cột của Bảng phải tồn tại ít nhất 1 ký tự
II – CÁC THUỘC TÍNH KHI LÀM VIỆC VỚI TABLE
1 – Các thuộc tính của thẻ <table></table>
- width: Khai báo độ rộng của Bảng. Giá trị thường được sử dụng là Px hoặc %
- height: Khai báo chiều cao của Bảng. Giá trị thường được sử dụng là Px hoặc %
- border: Khai báo độ dầy đường viền của bảng. Đơn vị thường được sử dụng là Px hoặc %
- bordercolor: Khai báo mầu của đường viền bảng. Giá trị có thể sử dụng là tên mầu hoặc mã mầu
- align: Khai báo vị trí hiển thị của bảng so với màn hình hiển thị văn bản HTML. Các giá trị có thể sử dụng đó là: Left, Right, Center
- bgcolor: Khai báo mầu nền cho Bảng. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
- background: Quy định ảnh nền cho Bảng. Giá trị chính là đường dẫn của File ảnh muốn sử dụng làm ảnh nền
- cellpadding: Khai báo khoảng cách từ các đối tượng trong bảng đối với khung bao ngoài của Bảng
- cellspacing: Độ dầy khung bao ngoài của Bảng
2 – Các thuộc tính của thẻ <tr></tr>
- height: Khai báo độ rộng của một dòng. Giá trị thường được sử dụng là Px hoặc %
- bgcolor: Khai báo mầu nền cho một dòng. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
- align: Khai báo vị trí của tất cả các đối tượng thuộc toàn bộ dòng so với dòng đó theo chiều ngang. Các giá trị có thể sử dụng đó là: Left, Right, Center, Justify
- valign: Khai báo vị trí của tất cả các đối tượng thuộc toàn bộ dòng so với dòng đó theo chiều dọc. Các giá trị có thể sử dụng đó là: Top, Middle, Bottom
3 – Các thuộc tính của thẻ <td></td>
- width: Khai báo độ rộng của một cột. Giá trị thường được sử dụng là Px hoặc %
- height: Khai báo độ cao của một cột. Giá trị thường được sử dụng là Px hoặc %
- bgcolor: Khai báo mầu nền cho một cột. Các giá trị có thể sử dụng là tên mầu hoặc mã mầu
- align: Khai báo vị trí của các đối tượng trong cột so với chính cột đó theo chiều ngang. Các giá trị có thể sử dụng đó là: Left, Right, Center, Justify
- valign: Khai báo vị trí của các đối tượng thuộc một cột nào đó trong dòng so với dòng đó theo chiều dọc. Các giá trị có thể sử dụng đó là: Top, Middle, Bottom
4 – Tùy biến Bảng hay tạo “Bảng không đối xứng”
với các thuộc tính colspan và rowspan của thẻ <td></td>
- colspan: Thuộc tính này có tác dụng gom các cột trong một bảng
- rowspan: Thuộc tính này có tác dụng gom các hàng trong một bảng
ví dụ:
|
<html> <head><title>Bài 1</title></head> <body> <table align="center" width="800" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="100" colspan="3" align="center">Phần đầu (Banner)</td> </tr> <tr> <td height="32" colspan="3" align="left" valign="middle">Menu ngang (Navbar)</td> </tr> <tr> <td colspan="3">Đường kẻ ngang</td> </tr> <tr> <td width="150" valign="top">Menu trái (Left Menu)</td> <td width="500" align="center" valign="top">Phần thân (Main)</td> <td width="150" valign="top">Menu phải (Right Menu)</td> </tr> <tr> <td height="60" colspan="3" align="center">Phần cuối (Footer)</td> </tr> </table> </body> </html> |
Không có nhận xét nào:
Đăng nhận xét