HTML 4
LÀM VIỆC VỚI TABLE (BẢNG) TRONG HTML
Xem hướng dẫn chi tiết bài 4 bằng video
A – LÝ THUYẾT
I – LÀM VIỆC VỚI BẢNG (TABLE) TRONG HTML
1 – Làm việc với Bảng dạng đối xứng
Table
hay Bảng trong HTML được hiểu là các bảng biểu dùng để biểu diễn dữ liệu và
chúng có thể có một (hoặc nhiều hơn một) dòng, tương tự như vậy chúng có thể có
một (hoặc nhiều hơn một) cột
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
Hình
dáng của một Bảng đối xứng như sau:
a) 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,…
b) 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).
c) 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ẻ:
- <table></table>: Khai báo bắt đầu làm việc với bảng
- <tr></tr>: Khai báo bắt đầu làm việc với một dòng
trong bảng
- <td></td>: Khai báo bắt đầu làm việc với một cột trong
một dòng nằm trong một bảng
- Để 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ự
Khái báo một bảng đơn giản nhất với 1 dòng và 1 cột trong HTML
Khai báo một bảng có nhiều dòng và nhiều cột trong HTML
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>
a) width: Khai báo độ rộng của Bảng. Giá
trị thường được sử dụng là Px hoặc %
b) height: Khai báo chiều cao của Bảng. Giá
trị thường được sử dụng là Px hoặc %
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 %
d) 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
e) 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
f) 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
g) 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
h) 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
i)
cellspacing:
Độ dầy khung bao ngoài của Bảng
2 – Các thuộc tính của thẻ <tr></tr>
a) height: Khai báo độ rộng của một dòng.
Giá trị thường được sử dụng là Px hoặc %
b) 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
c) 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
d) 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>
a) width: Khai báo độ rộng của một cột.
Giá trị thường được sử dụng là Px hoặc %
b) height: Khai báo độ cao của một cột.
Giá trị thường được sử dụng là Px hoặc %
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
d) 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
e) 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>
a) colspan: Thuộc tính này có tác dụng gom
các cột trong một bảng
b) rowspan: Thuộc tính này có tác dụng gom
các hàng trong một bảng
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1: Ôn tập về các thuộc tính trong bảng
Sử
dụng các kiến thức đã học về Bảng để thiết kế một biểu mẫu như hình dưới đây.
Bài 2: Ôn tạp về 2 thuộc tính tùy biến bảng
là Colspan và Rowspan
Sử
dụng các hiểu biết của bạn về 2 thuộc tính colspan
và rowspan cho cặp thẻ <td></td> để tùy biến bảng
của chúng ta theo nhiều kiểu sau:
II – BÀI TẬP MỞ RỘNG
1 – Bài tập
Bài 1:
Sử dụng Table và những kiến thức đã học về các thuộc tính của nó để thiết kế một bộ khung giao diện đơn giản như hình dưới đây và cho biết các thông số thiết kế như sau:
- Thông số chung cho Table: width:800px – align:center – boorder:1px – cellpadding:0px – cellspacing:0px
- Phần đầu: width:800px – height:100px - align:center – valign:middle
- Menu ngang: width:800px – height:32px - align:left – valign:middle
- Menu trái: width:150px – align:left – valign:top
- Menu phải: width:150px - align:left – valign:top
- Phần thân: width: 500px - align:center – valign:top
- Phần cuối: width:800px – height:60px - align:center – valign:middle
Bài 2:
Từ bộ khung giao diện của bài tập 1 ở trên, các bạn hãy nâng cấp thành bộ khung giao diện có độ phức tạp hơn một chút như hình minh họa dưới đây với các kiến thức về Table cũng như thuộc tính của nó đã được học. cho biết các thông số thiết kế như sau:
- Menu ngang: width:300px - height:32px – align:center – valign:middle
- Tiêu đề Menu: width:150px – height:26px - align:center – valign:middle
- Thông tin: width:480px – height:80px - align:justify – valign:middle
- Tiêu đề lớn 1: width:480px - height:26px – align:left – valign:middle
- Tiêu đề lớn 2: width:480px - height:26px – align:right – valign:middle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="800" border="1" align="center" cellpadding="5" bordercolor="#0000FF">
<tr align="center" bgcolor="#0099FF">
<td width="25%">STT</td>
<td width="25%" bgcolor="#0099FF">Khoa Hoc</td>
<td width="25%" bgcolor="#0099FF">Thoi Gian Hoc</td>
<td width="25%" bgcolor="#0099FF">Hoc Phi</td>
</tr>
<tr valign="top">
<td width="25%">01</td>
<td width="25%">Lap Trinh PHP (CB)</td>
<td width="25%">8h -> 10h (2, 4, 6)</td>
<td width="25%" bgcolor="#FF6600">1.000.000 VNĐ</td>
</tr>
<tr valign="top">
<td width="25%">02</td>
<td width="25%">Photoshop (NC)</td>
<td width="25%">20h -> 22h (3, 5, CN)</td>
<td width="25%" bgcolor="#FF6600">500.000 VNĐ</td>
</tr>
<tr valign="top">
<td width="25%">03</td>
<td width="25%">Flash (CB)</td>
<td width="25%">8h -> 10h (2, 4, 6)</td>
<td width="25%" bgcolor="#FF6600">800.000 VNĐ</td>
</tr>
</table>
</body>
</html>
Đáp án bài 2 PHẦN I – BÀI TẬP THỰC HÀNH:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table align="center" border="1px" width="300px" height="100px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<p>
<table align="center" border="1px" width="300px" height="100px">
<tr>
<td colspan="4" bgcolor="#FFCC00">1</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<p>
<table align="center" border="1px" width="300px" height="100px">
<tr>
<td rowspan="4" bgcolor="#FFCC00">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<p>
<table align="center" border="1px" width="300px" height="100px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td colspan="2" rowspan="2" bgcolor="#FFCC00">6723</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<p>
<table align="center" border="1px" width="300px" height="100px">
<tr>
<td colspan="4" bgcolor="#FFCC00">1</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td rowspan="2" colspan="2" bgcolor="#FFCC00">2</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>8</td>
</tr>
</table>
</body>
</html>
<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>
Đáp án:
<html>
<head><title>Bài 2</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-->
<table height="32" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">trang chủ</td>
<td align="center" valign="middle">giới thiệu</td>
<td align="center" valign="middle">tin tức</td>
<td align="center" valign="middle">liên hệ</td>
<td align="center" valign="middle">diễn đàn</td>
</tr>
</table>
<!--End Menu ngang-->
</td>
<!--Hr-->
<tr>
<td colspan="3"><hr width="80%"></td>
</tr>
<!--End Hr-->
</tr>
<tr>
<td width="150" valign="top">
<!--Menu trái-->
<table width="150" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle">Tiêu đề Menu</td>
</tr>
<tr>
<td align="left" valign="top">Menu con</td>
</tr>
</table>
<!--End Menu trái-->
</td>
<td width="500" align="center" valign="top">
<!--Thông báo-->
<table width="480" height="80" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" valign="middle">Thông tin</td>
</tr>
</table>
<!--End Thông báo-->
<br>
<!--Content 1-->
<table width="480" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="left" valign="middle">Tiêu đề lớn 1</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">Tên bài viết</td>
</tr>
<tr>
<td align="left" valign="top">Ảnh mô tả</td>
<td align="justify" valign="top">Nội dung vắn tắt</td>
</tr>
</table>
<!--End Content 1-->
<br>
<!--Content 2-->
<table width="480" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="right" valign="middle">Tiêu đề lớn 2</td>
</tr>
<tr>
<td colspan="2" align="right" valign="top">Tên bài viết</td>
</tr>
<tr>
<td align="left" valign="top">Nội dung vắn tắt</td>
<td align="justify" valign="top">Ảnh mô tả</td>
</tr>
</table>
<!--End Content 2-->
</td>
<td width="150" valign="top">
<!--Menu phải-->
<table width="150" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle">Tiêu đề Menu</td>
</tr>
<tr>
<td align="left" valign="top">Menu con</td>
</tr>
</table>
<!--End Menu phải-->
</td>
</tr>
<tr>
<td height="60" colspan="3" align="center">Phần cuối (Footer)</td>
</tr>
</table>
</body>
</html>
Bài 3:
Từ bộ khung giao diện của bài tập 2
ở trên, các bạn hãy sử dụng toàn bộ các kiến thức đã được học về HTML để thiết
kế một trang chủ hoàn chỉnh theo mẫu dưới đây.
- Cho border của các Table đều bằng 0
Hình ảnh cần thiết:
Ở cùng thư mục lưu file code này bạn tạo 1 thư mục con tên images để lưu các ảnh phía dưới.
(giữ file ảnh này cho các bài học tiếp theo).
Đáp án bài 2 PHẦN II - BÀI TẬP MỞ RỘNG:
ĐỂ QUAN SÁT ĐÁP ÁN bạn cóp đoạn code dưới dán vào notepad và lưu dưới dạng file .html, trong cùng thư mục lưu file ảnh images. Chuột phải/open with/chrome. (hoặc bất cứ trình duyệt nào bạn có)
Ở cùng thư mục lưu file code này bạn tạo 1 thư mục con tên images để lưu các ảnh phía dưới.
(giữ file ảnh này cho các bài học tiếp theo).
Đáp án bài 2 PHẦN II - BÀI TẬP MỞ RỘNG:
ĐỂ QUAN SÁT ĐÁP ÁN bạn cóp đoạn code dưới dán vào notepad và lưu dưới dạng file .html, trong cùng thư mục lưu file ảnh images. Chuột phải/open with/chrome. (hoặc bất cứ trình duyệt nào bạn có)
<html>
<head><title>Bài 3</title></head>
<body>
<table align="center" width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100" colspan="3" align="center" background="images/banner.gif"> </td>
</tr>
<tr>
<td height="32" colspan="3" align="left" valign="middle" background="images/background.gif">
<!--Menu ngang-->
<table height="32" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><a href="#">trang chủ</a></td>
<td align="center" valign="middle"><a href="#">giới thiệu</a></td>
<td align="center" valign="middle"><a href="#">tin tức</a></td>
<td align="center" valign="middle"><a href="#">liên hệ</a></td>
<td align="center" valign="middle"><a href="#">diễn đàn</a></td>
</tr>
</table>
<!--End Menu ngang-->
</td>
</tr>
<!--Hr-->
<tr>
<td colspan="3"><hr size="2" color="#434343"></td>
</tr>
<!--End Hr-->
<tr>
<td width="150" valign="top">
<!--Menu trái-->
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">danh mục chính</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">gia công phần mềm</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">đào tạo lập trình viên</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">tư vấn doanh nghiệp</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">ảnh viện áo cưới</a></td>
</tr>
</table>
<br>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">bài viết đáng chú ý</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hướng dẫn đăng ký học</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hình thức học tập online</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">cài đặt & sử dụng skype</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">cài đặt & sử dụng teamviewer</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hướng dẫn đóng học phí</a></td>
</tr>
</table>
<br>
<img src="images/img1.gif">
<br>
<img src="images/img2.gif">
<!--End Menu trái-->
</td>
<td width="500" align="center" valign="top">
<!--Thông báo-->
<table width="480" height="80" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" valign="middle" background="images/intro.gif">
Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình
</td>
</tr>
</table>
<!--End Thông báo-->
<br>
<!--Content 1-->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="left" valign="middle" background="images/main_bar_left.gif">cntt</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><a href="#">gia công phần mềm</a></td>
</tr>
<tr>
<td width="155" align="left" valign="top"><img src="images/phanmem.gif"></td>
<td align="justify" valign="top">Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình ...<a href="#">chi tiết</a></td>
</tr>
</table>
<!--End Content 1-->
<br>
<!--Content 2-->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="right" valign="middle" background="images/main_bar_right.gif">giáo dục</td>
</tr>
<tr>
<td colspan="2" align="right" valign="top"><a href="#">đào tạo lập trình viên</a></td>
</tr>
<tr>
<td align="left" valign="top">Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình ...<a href="#">chi tiết</a></td>
<td width="155" align="justify" valign="top"><img src="images/laptrinh.gif"></td>
</tr>
</table>
<!--End Content 2-->
<br>
<!--Content 1-->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="left" valign="middle" background="images/main_bar_left.gif">thương mại</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><a href="#">tư vấn doanh nghiệp</a></td>
</tr>
<tr>
<td width="155" align="left" valign="top"><img src="images/doanhnghiep.gif"></td>
<td align="justify" valign="top">Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình ...<a href="#">chi tiết</a></td>
</tr>
</table>
<!--End Content 3-->
<br>
<!--Content 2-->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="26" colspan="2" align="right" valign="middle" background="images/main_bar_right.gif">dịch vụ</td>
</tr>
<tr>
<td colspan="2" align="right" valign="top"><a href="#">ảnh viện áo cưới</a></td>
</tr>
<tr>
<td align="left" valign="top">Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình ...<a href="#">chi tiết</a></td>
<td width="155" align="justify" valign="top"><img src="images/anhvien.gif"></td>
</tr>
</table>
<!--End Content 4-->
<br>
</td>
<td width="150" valign="top">
<!--Menu phải-->
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">tư vấn trực tuyến</td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/online.gif"></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/offline.gif"></td>
</tr>
</table>
<br>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">các bài viết mới</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">htaccess trong php</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">html 5 & seo</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">viết trang login & logout cho hệ thống</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">css nâng cao</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">làm mịn da mặt với photoshop cs3</a></td>
</tr>
</table>
<br>
<img src="images/img3.gif">
<br>
<img src="images/img4.gif">
<br>
<img src="images/img5.gif">
<!--End Menu phải-->
</td>
</tr>
<tr>
<td height="60" colspan="3" align="center" background="images/footer.gif">Website hướng dẫn tự học lập trình web đơn giản </td>
</tr>
</table>
</body>
</html>
>>Xem bài trước: BÀI 3 – LIÊN KẾT & HÌNH ẢNH TRONG HTML
>>Xem bài tiếp theo: Bài 5 - LÀM VIỆC VỚI FORM VÀ CÁC ĐỐI TƯỢNG TRONG FORM
No comments:
Post a Comment