Định dạng bảng biểu

Một phần của tài liệu thiết kế ltwebASP (Trang 34 - 35)

Tag <TABLE> được dùng đểđịnh dạng bảng cùng với các tag <TR>, <TD> đểđịnh dạng các dòng, cột. Các dòng, cột trong bảng thường được gọi là cell.

Các thuộc tính thường dùng là: BORDER (định nghĩa đường viền, nếu đặt giá trị là 0 thì sẽ không có đường viền), BGCOLOR (màu nền), ALIGN (canh chỉnh), WIDTH (chiều rộng, có thể theo % của kích thước cửa sổ hoặc pixel), CELLPADDING (khoảng cách giữa nội dung và đường biên của cell), CELLSPACING (khoảng cách giữa các cell). Đoạn mã HTML sau minh họa một bảng dữ liệu gồm có 2 dòng, 2 cột, kích thước là 300 pixel, khoảng cách giữa nội dung và đường biên của cell là 5:

<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="300">

<TR>

<TD WIDTH="74" ALIGN="center">MSSV</TD> <TD WIDTH="203" ALIGN="center">Họ và tên</TD> </TR> <TR> <TD WIDTH="74">9901234</TD> <TD WIDTH="203">Trần Đức Vũ</TD> </TR> </TABLE> Hình 3. 6 – Minh họa một bảng đơn giản

Để trộn (merge)/tách (split) các dòng hoặc cột lại với nhau ta dùng các thuộc tính tương ứng là ROWSPAN hoặc COLSPAN. Ví dụ sau minh họa trong một bảng vừa có sự trộn/tách trên dòng và cột:

<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="310">

<TR>

<TD WIDTH="94" ALIGN="center">Mã nhóm</TD> <TD WIDTH="70" ALIGN="center">

MSSV</TD>

<TD WIDTH="197" ALIGN="center" COLSPAN="2"> Họ và tên</TD> </TR> <TR> <TD WIDTH="94" ROWSPAN="2">Nhóm 01</TD> <TD WIDTH="70">9901234</TD> <TD WIDTH="123">Trần Đức </TD> <TD WIDTH="74">Văn</TD> </TR> <TR> <TD WIDTH="70">9901235</TD> <TD WIDTH="123">Hoàng Minh </TD> <TD WIDTH="74">Vũ</TD> </TR> </TABLE>

Hình 3. 7 – Minh họa một bảng có trộn/tách các cột

Có hai cách để thiết lập bề rộng (WIDTH) của một cell hoặc một bảng, đó là tính theo % và tính theo pixel. Trong nhiều trường hợp, việc đặt theo % sẽ làm cho kích thước bảng thay đổi tùy theo dữ liệu và độ phân giải của màn hình máy người dùng, do đó đểđảm bảo tính nhất quán trong hiển thị dữ liệu của bảng, nên chọn cách tính theo pixel.

Trong thiết kế trang web, các bảng biểu đóng vai trò rất quan trọng vì nó là công cụ chính dùng để thể hiện các trình bày phức tạp của trang web. Hiện nay, các phần mềm hỗ trợ soạn thảo trang web hỗ trợ vẫn chưa tốt các thao tác phức tạp trên bảng biểu. Do đó, cách tốt nhất là kết hợp cả hai. Nghĩa là, ngoài việc sử dụng các phần mềm này để phát sinh bảng biểu một cách trực quan, ta phải sử dụng mã HTML để can thiệp khi các phần mềm này không đáp

ứng nổi các trình bày phức tạp nhất là khi có các bảng vừa lồng vào nhau, các dòng cột trộn/tách nhiều lần, ...

Một phần của tài liệu thiết kế ltwebASP (Trang 34 - 35)

Tải bản đầy đủ (PDF)

(142 trang)