Giáo trình Thực hành HTML - Bài 4: Làm việc với Table (bảng) trong HTML

LAB HTML 4
LÀM VIỆC VỚI TABLE (BẢNG) TRONG HTML
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:
Thẻ 
	Cặp thẻ 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ẻ 
	Cặp thẻ 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ẻ 
	Cặp thẻ 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ẻ:
: Khai báo bắt đầu làm việc với bảng
: Khai báo bắt đầu làm việc với một dòng trong bảng
: 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ẻ 
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ẻ 
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ẻ 
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ẻ 
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
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. Chú ý xem bài giải ở File bai_tap_1.html để việc thiết kế được chính xác hơn
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ẻ để tùy biến bảng của chúng ta theo nhiều kiểu sau:
II – BÀI TẬP VỀ NHÀ
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
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. Xem trước bài giải ở File bai_tap_3.html để có thể thiết kế một cách chính xác nhất theo yêu cầu. cho biết các thông số thiết kế như sau:
Cho border của các Table đều bằng 0