Bài giảng Thiết kế Web HTML, CSS3

CHƯƠNG 5SỬ DỤNG BẢNG TABLE THIẾT KẾ WEBSITE... THIẾT KẾ BẢNG BIỂU TABLE2 Thiết kế Web... Thiết kế bảng biểu - Table - Table là một cấu trúc gồm nhiều hàng giao với nhiều cột kỹ thuật thi

CHƯƠNG 5

SỬ DỤNG BẢNG (TABLE)

THIẾT KẾ WEBSITE

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2

Thiết kế Web

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2.3.1 Thiết kế bảng biểu - Table

- Table là một cấu trúc gồm nhiều hàng giao với nhiều cột (kỹ thuật thiết kế bố cục trang) Cần phát thảo cấu trúc bảng trước khi thiết kế

<TABLE><CAPTION>Nội dung tiêu đề bảng </CAPTION>

<TR>

<TH>Nội dung tiêu đề cột 1</TH>

<TH>Nội dung tiêu đề cột 2</TH>

.

</TR>

<TR>

<TD>Nội dung ô 1 dòng 1 </TD>

<TD>Nội dung ô 2 dòng 1 </TD>

.

</TR>

2.3.1 Thiết kế bảng biểu – Table(tt)

Định dạng Table

Tạo đường viền.

<TABLE Border=n Bordercolor=“Trị màu”>

</TABLE>

Thiết lập độ rộng và canh lề bảng

<TABLE Width=n1 height =n2 Alight= “Center” /

”Left”/ ”Right” >

</TABLE>

N1, n2: Độ rộng tính bằng pixel Hoặc % kích thước cửa

sổ “Center” / ”Left”/ ”Right”

4

Thiết kế Web

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2.3.1 Thiết kế bảng biểu – Table(tt)

Định dạng Table

Xác lập màu, ảnh nền cho bảng, hàng, ô

<Table /TR/TD/TH Bgcolor=“Trị”> Màu nền cho toàn bảng, hàng, ô,

tiêu đề

<Table /TR/TD/TH

Background=“Image.gif”> Ảnh nền cho tòan bảng, hàng, ô, tiêu đề

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2.3.1 Thiết kế bảng biểu – Table(tt)

Định dạng

Table Định

dạng ô.

Thiết kế Web

@ThS Lê Văn Phong

Thuộc tính Ý nghĩa

<TD Align=“Hướng”> Canh theo chiều ngang: Left, Right, Center

<TD VAlign=“Hướng”> Canh theo chiều dọc: Top, Bottom, Middle

<TH Align=“Hướng”> Canh hàng tiêu đề theo chiều ngang

<TH VAlign=“Hướng”> Canh hàng tiêu đề theo chiều dọc

<TR Align=“Hướng”> Canh theo chiều ngang các ô trong hàng

<TR VAlign=“Hướng”> Canh theo chiều dọc các ô trong hàng

CellSpacing=“n” Khoảng cách giữa các ô

CellPadding=“n” Khỏang cách quanh nội dung ô Pixel

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2.3.1 Thiết kế bảng biểu – Table(tt)

Định dạng Table

Trộn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ

TD/TH

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

2.3.1 Thiết kế bảng biểu – Table(tt)

Định dạng Table

Trộn ô:

8

Thiết kế Web

@ThS Lê Văn Phong

<TD RowSpan=“n”> Tạo ô có độ cao n hàng

<TD ColSpan=“n”> Tạo ô có độ rộng n cột

<TH RowSpan=“n”> Tạo ô tiêu đề có độ cao n hàng

<TH ColSpan=“n”> Tạo ô tiêu đề có độ rộng n cột

2.3 THIẾT KẾ BẢNG BIỂU (TABLE)

Bài tập thực hành thiết kế trang Web bán giày dép

Thiết kế Web

@ThS Lê Văn Phong