TẠO BẢNG
Tạo bảng trong HTML

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...
--> --> --> --> ---> -->                               
----------------------------
--> --> --> --> ---> -->
Tag định dạng bảng
Sử dụng tag để tạo bảng, kèm theo với tag để thêm 1 dòng trong bảng và tag để thêm vào 1 ô trên dòng.
Ví dụ: tạo bảng 2 hàng 2 cột

Ô 11	Ô 12
Ô 21	Ô 22

Ðể đóng khung cho bảng, sử dụng thuộc tính BORDER
Ví dụ:

Ô 11	Ô 12
Ô 21	Ô 22

Cách tạo bảng

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

Qua thí dụ trên ta biết được thẻ được dùng để tạo bảng , thuộc tính BORDER  chỉ độ rộng của đường viền. Nếu giá trị =0 thì đường viền không hiển thị.
Mỗi hàng được xác định bởi và
Mỗi ô được định nghĩa bởi

Chú ý : có thể không cần thẻ và
Ðịnh nghĩa TABLE (bảng):

và

   ALIGN=align-type
    BACKGROUND=url
    BGCOLOR=color-type
    BORDER=n
BORDERCOLOR=color-type
    CELLPADDING=n
    WIDTH=n% >

Trong đó:
    ALIGN= lề của bảng, có giá trị là LEFT hoặc RIGHT
    BACKGROUND= chỉ định ảnh nền của bảng
    BGCOLOR= màu nền của bảng
    BORDER= đường viền bảng, n tính bằng pixel
BORDERCOLOR=màu đường viền bảng
    CELLPADDING=n: khoảng cách từ ô tới nội dung của ô, đơn vị pixel
    WIDTH=n: độ rộng của bảng, n tính theo % (phải có dấu % theo sau)
 
TỔNG KẾT
Ðịnh nghĩa TR (dòng):
    ALIGN=align-type
    BACKGROUND=url
    BGCOLOR=color-type
    VALIGN=v-align-type >
Trong đó:
    ALIGN= lề của các ô trong dòng, có giá trị là LEFT, RIGHT hoặc CENTER
    BACKGROUND= chỉ định ảnh nền của dòng
    BGCOLOR= màu nền của dòng
    VALIGN= lề theo chiều dọc cho văn bản trong các ô trên dòng. Giá trị có thể là: TOP, BOTTOM, MIDDLE.
 
Ðịnh nghĩa TD (ô):
    ALIGN=align-type
    BACKGROUND=url
    BGCOLOR=color-type
    COLSPAN=n
    ROWSPAN=n
WIDTH=n%
    VALIGN=v-align-type>
Trong đó:
    ALIGN= lề văn bản trong ô, giá trị là LEFT, RIGHT hoặc CENTER
    BACKGROUND= chỉ định ảnh nền cho ô
    BGCOLOR= màu nền của ô
    COLSPAN= ô trải rộng trên n cột
    ROWSPAN= ô trải dài trên n hàng
    VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô , giá trị là TOP, BOTTOM, MIDDLE.
WIDTH= Chiều ngang (rộng) của ô , tính bằng %
Chiều rộng mặc định của bảng sẽ là chiều rộng lớn nhất của dòng rộng nhất trong bảng. Ðể chỉ định chiều rộng các bảng, sử dụng thuộc tính WIDTH=n% để quy định chiều rộng.
Thí dụ :

Cách tạo bảng

STT

HỌ VÀ TÊN

GIỚI TÍNH

PHÒNG BAN

NAM

NỮ

Ðể tạo được những bảng như trên, sử dụng các thuộc tính colspan và rowspan trong thẻ ...
Thuộc tính colspan=x có tác dụng nối nhiều ô ngang thành 1 ô (mở rông cột),
Thí dụ nối 2 ô ngang hàng 1  ra rộng bằng hai cột bình thường ta đặt: 
Hàng 1 cột 1,2

Thuộc tính rowspan=x có tác dụng nối nhiều ô dọc thành 1
(mở rộng hàng),
Thí dụ nối 2 ô dọc của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:
Hàng 2-3 cột 2
Để tạo tựa đề của cho bảng như hình trên thì ngay sau thẻ , bạn gõ vào thẻ

tựa đề của bảng

Trong tag

bạn thấy có thuộc tính valign="top" nghĩa là tựa đề ở trên đỉnh của bảng. Nếu valign="bottom" thì tựa để của bảng sẽ ở dưới bảng.
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 như sau:

X: Chiều rộng đường viền ngoài bảng
Y: Khoảng trắng giữa dữ liệu bên trong ô và vách ngăn của ô
Z: Ðộ rộng của những đường bên trong bảng để chia các ô
Để tạo được bảng trong hình thì trong thẻ table ghi như sau:
 
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.

Tô màu nền cho toàn bảng


Tô màu nền cho 1 hàng


Tô màu nền cho 1 ô

Trong đó XXXXXX là các giá trị màu (ta có thể ghi tên màu) Làm nền cho bảng Ðể làm nền cho bảng, ta thêm thuộc tính background với chỉ định file ảnh nền tương ứng vào các tag của bảng. Nền cho toàn bảng Nền cho 1 hàng Nền cho 1 ô Trong đó url : chỉ định file ảnh nền Cách tạo bảng STT HỌ VÀ TÊN GIỚI TÍNH PHÒNG BAN NAM NỮ 1  Nguyễn Văn Tèo X    Kế Toán 2  Lê Thị Tí   X  Kế Toán Kỹ thuật table trong table Cách tạo bảng trong bảng Dòng 1 - ô 1 Table trong table h1c1 Table trong table h1c2 Table trong table h2c1 Table trong table h2c2 Dòng 2 - ô 1 BAI TAP 1 BAI TAP 2 * Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ... Người chia sẻ: Lê Bảo Hoàng Dung lượng: | Lượt tài: 0 Loại file: Nguồn : Chưa rõ (Tài liệu chưa được thẩm định) Tải tài liệu Báo cáo sai sót Đề suất chỉnh sửa , phân lại mục Thư Viện Giáo viên có gì ?! Thư viện tài liệu giáo viên đủ các bậc học Tải và chia sẻ tài liệu miễn phí , lưu trữ không giới hạn ... Cộng đồng chia sẻ kinh nghiệm dạy học ... Tham gia thư viện >