| BÀI HỌC

Việc trình bày trang Web theo dạng bảng sẽ làm cho trang Web của bạn chuyên nghiệp hơn. Với dạng bảng bạn có thể chia trang Web thành nhiều phần, bạn có thể áp dụng các kiến thức đã học để trang trí riêng cho từng phần...

Khi xây dựng bảng, bạn hãy nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái, tiếp theo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng các phần tử của hàng thứ 2...

Những Tag cơ bản của bảng

Để tìm hiểu về các Tag cơ bản của bảng, trước hết ta xét ví dụ sau.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3
	Done

Trong Tag <TABLE> ta thấy thuộc tính BORDER có giá trị là 1, điều này nghĩa là vẽ 1 đường viền quanh bảng với độ dày là 1 pixel.

• Mỗi hàng được xác định bởi <TR> và </TR> viết tắt của TABLE ROW.

• Mỗi ô được định nghĩa bởi <TD> và </TD> viết tắt của TABLE DATA.

Để căn chỉnh lề trong mỗi ô, bạn thêm các thuộc tính sau vào Tag <TD>.

• Chỉnh lề theo chiều ngang bởi thuộc tính ALIGN:

  <TD ALIGN = left> sắp xếp về bên trái
  <TD ALIGN = right> sắp xếp về bên phải
  <TD ALIGN = center> sắp xếp vào giữa
  
   

• Chỉnh lề theo chiều dọc bởi thuộc tính VALIGN:

  <TD VALIGN = Top> sắp xếp lên trên
  <TD VALIGN = Middle> sắp xếp ở giữa
  <TD VALIGN = Bottom> sắp xếp xuống dưới

Thêm các thuộc tính ALIGN và VALIGN vào các ô trong bảng, lưu ý các thuộc tính WIDTH và HEIGHT để bạn dễ thấy hiệu quả hơn:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3
	Done

Các hàng và cột

Bảng mà bạn tạo ở trên mới chỉ là bảng đơn giản với ba hàng và ba cột đều nhau. Bạn hãy chú ý các bảng sau:

Bảng 1

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2,3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 2 Hàng 3 cột 3
	Done

Bảng 2

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2,3 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 3
	Done

Để tạo được những bảng như trên, chúng ta sử dụng các thuộc tính COLSPAN và ROWSPAN trong Tag <TD>.

Thuộc tính COLSPAN=x có tác dụng mở rộng cột của bảng, ví dụ trong Bảng 1 để mở rộng ô thứ 2 của hàng 1 ra rộng bằng hai cột bình thường ta đặt:

Thuộc tính ROWSPAN=x có tác dụng mở rộng hàng của bảng, trong Bảng 2 để mở rộng ô thứ 2 của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:

Kết hợp hai thuộc tính trên ta có:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2,3 Hàng 2 cột 1 Hàng 2,3 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 3
	Done

Thêm các thông số cho các đường viền tạo ra bảng

Muốn thay đổi thông số của các đường tạo bảng ta thêm các thuộc tính cho Tag <TABLE> như sau:

Trong đó:

• BORDER=x: Chiều rộng đường viền ngoài bảng

• CELLPADDING=y: "Khoảng trắng" giữa dữ liệu bên trong ô và vách ngăn của ô

• CELLSPACING=z: Độ rộng của những đường bên trong bảng để chia các ô

Ví dụ: bảng sau có Tag <TABLE> như sau:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 2 Hàng 3 cột 3
	Done

Khi BORDER=0 thì ta sẽ có một bảng không có bất kỳ một đường viền nào. Dùng bảng dạng này để sắp xếp văn bản theo các hàng thẳng đứng. Đối với dữ liệu trong bảng bạn vẫn có thể áp dụng các Tag đã học như ví dụ sau đây chia màn hình thành hai cột danh sách trong đó mỗi cột là một siêu liên kết.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Các Website ở việt nam Công ty VASC - VNN Mạng Phương nam Công ty FPT Sài gòn net Công ty Netn@m Mạng của Bộ thương mại
	Done

Chỉ định độ rộng và chiều cao của Bảng

Để chỉ định chiều rộng và cao cho Bảng bạn dùng các thuộc tính WIDTH và HEIGHT, giá trị là số pixel hoặc tỉ lệ phần trăm.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Để chỉ định chiều rộng và cao cho Bảng bạn dùng các thuộc tính WIDTH và HEIGHT, giá trị là số pixel hoặc tỉ lệ phần trăm
	Done

Thêm màu sắc cho bảng

Để tô màu cho bảng, ta thêm thuộc tính BGCOLOR với giá trị màu tương ứng vào các Tag của bảng.

Trong đó xxxxxx là các giá trị màu.

Ví dụ:

Khi chưa tô màu cả bảng:

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 2 Hàng 3 cột 3
	Done

Khi tô màu cả bảng bằng cách thêm thuộc tính BGCOLOR vào Tag <TABLE>.

	Chân trời tri thức - Internet today
	File     Edit     View     Favorites     Tools     Help
	Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3 Hàng 3 cột 1 Hàng 3 cột 2 Hàng 3 cột 3
	Done

Xem thêm Bài học 12 Thêm màu sắc cho trang Web để biết thêm cách sử dụng màu trong trang Web.

Theo Tạp chí Tin học I-Today