Danh sách và bảng trong HTML – Phần 2





Nếu
đi cùng với <TABLE> thuộc tính này có ý nghĩa mô tả chiều rộng
mong muốn của bảng (tính tuyệt đối bằng pixels hay theo phần trăm so với
bề rộng của tài liệu). Thường thì trình duyệt tự tính toán sao cho bảng
được bố trí hợp lý. Dùng thuộc tính này bắt buộc trình duyệt cố gắng
làm sao xếp được các ô vào bảng có bề rộng mong muốn đó.













2. Bảng biểu
2.1 Khung cấu trúc :

Giới hạn bảng:




Định nghĩa một hàng:




Định nghĩa một ô:




Ô chứa tiêu đề:




Đầu đề của bảng:




Cú pháp tạo khung cấu trúc của một bảng:




Ví dụ:




Kết quả thu được bảng như sau:





2.2 Một số lưu ý về bảng :

Ô rỗng thì không có đường bao. Muốn ô rỗng có đường bao phải dùng dấu cách không bẻ dòng:




Có thể lợi dụng ROWSPAN và COLSPAN để tạo bảng có ô chồng chéo lên nhau nhưng không nên lạm dụng.

Đôi lúc hình ảnh nằm ngoài ô ta muốn đưa hình ảnh đó vào. Nguyên nhân là do HTML được viết như sau:




Dấu xuống dòng ở đây coi như dấu cách do đó có sự chồng chéo hình ảnh với ký tự trắng đó. Cách khắc phục như sau:




…Mặc định bảng không có đường bao nếu không đi với thuộc tính BORDER. Bảng có các thuộc tính sau:

BORDER

Để định nghĩa một bảng có đường bao. Tuy nhiên không làm ảnh hưởng tới độ rộng của bảng.




Cho phép khai báo độ dày của đường bao cho phép chỉnh đường bao ngoài
đậm hơn đường bao trong để dễ nhìn hơn, mặt khác nếu giá trị bằng không
lại cho phép dành chỗ cho số liệu bên trong, nhất là đối với những bảng
compact.




Khoảng cách giữa các ô.




Khoảng cách giữa nội dung của ô và đường bao.




Cho ta bảng compact nhất có thể có (dành tất cả cho nội dung).




Nếu đi cùng với
thuộc tính này có ý nghĩa mô tả chiều rộng mong
muốn của bảng (tính tuyệt đối bằng pixels hay theo phần trăm so với bề
rộng của tài liệu). Thường thì trình duyệt tự tính toán sao cho bảng
được bố trí hợp lý. Dùng thuộc tính này bắt buộc trình duyệt cố gắng làm
sao xếp được các ô vào bảng có bề rộng mong muốn đó.Nếu đi cùng với
, , Có
nghĩa là dữ liệu bảng (Table Data), chỉ được xuất hiện trong một hàng
của bảng. Mỗi hàng không nhất thiết phải có cùng số ô vì dòng ngắn hơn
sẽ được chắp thêm ô rỗng vào bên phải. Mỗi ô chỉ được chứa các thành
phần bình thường khác nằm trong phần thân của tài liệu. Các thuộc tính
mặc định là: ALIGN=left và VALIGN=middle. Các mặc định này có thể thay
đổi bởi các thuộc tính trong
và lại thay đổi tiếp bởi thuộc tính
ALIGN hoặc VALIGN khai báo riêng cho từng ô. Bình thường mặc định thì
nội dung sẽ được bẻ dòng cho vừa vào khổ rộng của từng ô. Dùng thuộc
tính NOWRAP trong cũng có thể chứa các thuộc tính NOWRAP, COLSPAN và
ROWSPAN.NOWRAP
Như nói ở trên, cần thận trọng khi dùng thuộc tính này để phòng có ô quá rộng.
COLSPAN
Có thể xuất hiện trong bất kỳ ô nào (
Có nghĩa là tiêu đề của bảng (Table Header), các ô này tương tự như ô bình thường khác được định nghĩa bằng
Đặt đầu đề cho một bảng nên phải nằm trong một cặp
hay nó có ý nghĩa đối với đầu đề của hàng nằm trên hay nằm dưới, có giá trị hoặc TOP hoặc BOTTOM (mặc định là TOP).Nếu nằm trong hay hay hay … … …

lại có ý nghĩa tương tự đối với một ô. ROWSPAN Cho biết ô hiện thời chiếm mấy hàng của bảng, mặc định là 1. ALIGN Nếu nằm trong
có giá trị LEFT, CENTER hay RIGHT và điều khiển việc đặt nội dung của ô căn bên trái, vào giữa ô hay căn bên phải. VALIGN Nếu nằm trong
có thể có các giá trị TOP, MIDDLE, BOTTOM hay BASELINE để điều khiển việc đặt nội dung của ô lên trên, vào giữa (theo chiều dọc) hay xuống dưới và cũng có thể là tất cả cùng các ô trong hàng cùng căn theo một đường nằm ngang.	…
để cấm việc đó. …	) và chỉ rằng ô đó bành trướng ra mấy cột của bảng, mặc định là 1.	, có điều font chữ đậm và có thuộc tính mặc định là ALIGN=Center.

song không được nằm trong hàng hay cột. Thuộc tính mặc định là
ALIGN=Top (đầu đề đặt ở đầu bảng), song có thể đặt là ALIGN=Bottom (cuối
bảng). Đầu đề có thể chứa bất kỳ thành phần nào một ô có thể chứa và
luôn được căn lề vào giữa bảng (theo chiều ngang) và có thể cũng có bẻ
dòng cho phù hợp.Dưới đây là bảng tóm tắt liệt kê các thuộc tính của thẻ xây dựng bảng:





2.3 Các ví dụ :
Ví dụ một bảng cơ bản gồm 2 dòng và 3 cột:


Kết quả trả về:


Ví dụ một bảng có Item 2 (tiêu thức 2) chiếm 2 hàng (dòng):


Kết quả trả về:


Ví dụ một bảng có Item 1 (tiêu thức 2) chiếm 2 hàng (dòng):


Kết quả trả về:


Ví dụ bảng có Item 2 (tiêu thức 2) chiếm 2 cột:


Kết quả trả về:


Ví dụ một bảng có tiêu đề:


Kết quả trả về:


Ví dụ một bảng có tiêu đề chiếm 2 cột:


Kết quả trả về:


Hết




Nguồn: Sưu tầm Internet