BẢNG GIÁ THÁNG 3 NĂM - Chữ màu trắng và nền màu đe- 123docz.net

X. Order List có thể dùng chữ cái Y.Dùng chữ A để khai báo.

Chữ màu trắng và nền màu đen.

BẢNG GIÁ THÁNG 3 NĂM

Tên thiết bị Số lượng Giá Thành tiền

000115 Dĩa cứng 10 $120 $1200

000116 RAM 15 $50 $750

000117 CPU 5 $180 $900

Total $2850

I-Thuộc tính Colspan: Colspan="số ô trong cột" Thuộc tính này được đặt trong Thẻ <TD>. 1-Cú pháp:

<TD Colspan="Số ô trong cột"> Trong đó:

• Colspan= :Khai báo sẽ mở rộng bao nhiêu cột so với số ô còn lại trong cột đó undefinedgiá trị là

số).

Ví dụ: Chúng ta hãy xem ví dụ số 2:

Trong ví dụ 2 chúng ta dùng một bảng có độ rộng =500pixels, align="center", cellspacing="2", cellpadding="3", border="1". Chúng ta viết như sau:

<table width="500" align=center cellpadding="3" cellspacing = "2" border=1> Bắt đầu một hàng, viết:

<TR>

Đến đây, như ví dụ minh họa 2, bạn thấy rằng hàng này chỉ chứa một ô dữ liệu, BẢNG GIÁ THÁNG 3 NĂM 2006. Như vậy có thể xem đây là một cột. Đếm số cột trong các hàng còn lại và lấy hàng có số cột

nhiều nhất. Trong ví dụ này là 5 cột. Như vậy để ô này trải rộng bằng 5 cột so với hàng đó, ta viết như sau:

<TD colspan=5 BGCOLOR="yellow" align=center>BẢNG GIÁ THÁNG 3 NĂM 2006</td> Đóng hàng này, viết:

</TR>

Như vậy, chúng ta có đọan Codes cho hàng đầu tiên như sau:

<TD colspan=5 BGCOLOR="yellow" align=center>BẢNG GIÁ THÁNG 3 NĂM 2006</td> </TR>

Trong hàng thứ 2, cột đầu tiên Tên thiết bị có độ rộng bằng 2 ô dữ liệu ở hàng dưới là ô mã số và thiết bị(cùng trong một cột). Do đó chúng ta viết, bắt đầu một hàng mới:

<TR>

Bắt đầu một ô, ô này mở rộng bằng 2 ô nhỏ trong cùng một cột so với hàng dưới:

<TD colspan=2 align=center><b>Tên thiết bị</B></td>

Chúng ta viết tiếp các ô còn lại và đóng hàng này:

<td align=center><b>Số lượng</b></td> <td align=center><b>Giá</b></td>

<td align=center><b>Thành tiền</b></td> </tr>

Đến đây chúng ta đã làm xong được 2 hàng trong bảng

<table width="500" align=center cellpadding="3" cellspacing = "2" border=1> <TR>

<TD colspan=5 BGCOLOR="yellow" align=center> BẢNG GIÁ THÁNG 3 NĂM 2006</td> </TR>

<TD colspan=2 align=center><b>Tên thiết bị</B></td>

<TD align=center><b>Số lượng</b></td> <TD align=center><b>Giá</b></td>

<TD align=center><b>Thành tiền</b></td> </tr>

Chúng ta tiếp tục với hàng thứ 3, 4, 5: Vì các hàng này có tổng số cột là 5 nên không có ô nào mở rộng. Do đó chúng ta không dùng Colspan mà viết như sau:

Hàng thứ 3: <TR> <TD align=center>000115</TD> <TD align=center>Dĩa cứng</TD> <TD align=center>10</TD> <TD align=right>$120</TD> <TD align=right>$1200</TD> </TR>

Viết tương tự cho hàng thứ 4 và 5 nhưng thay thế nội dung dữ liệu trong Ô. Hàng thứ 6: Total

Hàng này có 2 ô dữ liệu. Ô đầu tiên là Total có độ rộng bằng 4 ô hàng trên, canh bên phải. Do vậy, ô này phải dùng Colspan=4. Ô thứ 2 bằng với số ô trong cột- chỉ có 1 ô, nên không dùng Colspan. Và ta viết hàng này như sau:

<TR>

<TD colspan=4 align=right>Total</TD> <TD align=right>$2850</TD>

</TR>

Cuối cùng để đóng bảng, ta dùng thẻ </TABLE> Và đây là Codes cho bảng của ví dụ 2:

<td COLSPAN=5 BGCOLOR="yellow" align=center><b>BẢNG GIÁ THÁNG 3 NĂM 2006</B></td>

</TR> <tr>

<td COLSPAN=2 align=center><b>Tên thiết bị</b></td> <td align=center><b>Số lượng</b></td> <td align=center><b>Giá</b></td> <td align=center><b>Thành tiền</b></td> </tr> <tr> <td align=center>000115</td> <td align=center>Dĩa cứng</td> <td align=center>10</td> <td align=right>$120</td> <td align=right>$1200</td> </tr> <tr> <td align=center>000116</td> <td align=center>RAM</td> <td align=center>15</td> <td align=right>$50</td> <td align=right>$750</td> </tr> <tr> <td align=center>000117</td>

<td align=center>CPU</td> <td align=center>5</td> <td align=right>$180</td> <td align=right>$900</td> </tr> <tr> <td COLSPAN=4 align=right>Total</td> <td align=right>$2850</td> </tr> </TABLE>

II-Thuộc tính Rowspan: Rowspan="số hàng chứa ô"

Thuộc tính Rowspan ="" dùng để mở rộng 1 ô dữ liệu trong một hàng theo chiều cao bằng với với số hàng chứa các ô còn lại.

Thuộc tính này được đặt trong Thẻ <TD>.

Để nắm được cách dùng Rowspan=, chúng ta xem lại ví dụ 1. Ví dụ 1 là một kết hợp sử dụng COLSPAN và ROWSPAN. Bảng này sử dụng các thuộc tính và giá trị như bên dưới:

Hãy để ý hàng nhiều ô dữ liệu nhất trong bảng VD 1 là 5 ô, tức bảng này có số cột cao nhất là 5 cột. hàng đầu tiên của bảng:

BUSINESS 2ND QUARTER SALES SUMMARY là hàng chỉ có một cột dữ liệu. Và để cột này trải

bằng 5 ô dữ liệu trong hàng có số ô dữ liệu nhiều nhất ta viết:

<TD bgcolor="AQUA" ALIGN=CENTER COLSPAN=5>BUSINESS 2ND QUARTER SALES SUMMARY.</TD>

</TR>

Trong hàng thứ 2, ô dữ liệu đầu tiên ( Click here to see detailed sales.) có chiều cao bằng 4 hàng gồm chứa ô Month, Gross Sales, Expenses, Total và các ô kế tiếp qua phải...

Để mở rộng ô này có chiều cao bằng 4 hàng ta viết như sau: <TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4> Click here to see detailed sales.</TD>

Chúng ta tiếp tục viết cho 4 ô còn lại trong hàng này:

<TD ALIGN=CENTER bgcolor="#FFFFFF"><i>Month</i></TD> <TD ALIGN=CENTER bgcolor="SILVER">APR</TD>

Cho 3 hàng còn lại (Mỗi hàng chỉ có 4 cột) chúng ta viết như sau:

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Gross Sales</b></TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD>

</TR> <TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Expenses</b></TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD>

</TR> <TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF" ><b>Total</b></TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD>

</TR>

Như vậy đến chúng ta được bảng với hàng sử dụng ROWSPAN:

<TD bgcolor="AQUA" ALIGN=CENTER COLSPAN=5>BUSINESS 2ND QUARTER SALES SUMMARY.</TD>

</TR> <TR> <TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4> Click here to see detailed sales.</TD>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><i>Month</i></TD> <TD ALIGN=CENTER bgcolor="SILVER">APR</TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Gross Sales</b></TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> </TR>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Expenses</b></TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>000000</TD> </TR>

<TR>

Và nếu đến đây bạn đóng bảng bằng cách thêm vào </TABLE> thì bạn có được bảng như minh họa dưới:

BUSINESS 2ND QUARTER SALES SUMMARY.

Click here to see detailed

sales.

Month APR MAY JUN

Sales

Expenses 000000 000000 000000

Total 00000 00000 00000

Nhưng chúng ta phải hòan tất bảng VD 1, vì vậy bạn chưa thể đóng bảng tại đây mà sử dụng cấu trúc viết trong hàng:

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4> Click here to see detailed sales.</TD>

để viết cho hàng METHOD OF PAYEMENT , EMPLOYEE PAYROLL và hàng TAXABLE

INTEREST.

Hàng cuối cùng dưới TAXABLE INTEREST, chúng ta dùng COLSPAN để mở rộng cột Net business Interest.

Cấu trúc như sau:

<TR>

<TD ALIGN=CENTER bgcolor="SILVER" COLSPAN=2><i>Net business Interest.</i></TD> <TD ALIGN=CENTER bgcolor="red">000000</TD>

Xong, chúng ta đóng bảng này bằng thẻ </TABLE>

<TR>

<TD bgcolor="AQUA" ALIGN=CENTER COLSPAN=5> BUSINESS 2ND QUARTER SALES SUMMARY.</TD> </TR>

<TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4><i>Click here to see detailed sales.</i></TD>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><i>Month</i></TD> <TD ALIGN=CENTER bgcolor="SILVER">APR</TD> <TD ALIGN=CENTER bgcolor="SILVER">MAY</TD> <TD ALIGN=CENTER bgcolor="SILVER">JUN</TD> </TR> <TR> <TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Gross Sales</b></TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Expenses</b></TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF" ><b>Total</b></TD>

<TR>

<TD bgcolor="NAVY" ALIGN=CENTER COLSPAN=5><FONT COLOR="WHITE">METHOD OF PAYMENT.</FONT></TD>

</TR> <TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=5><i>Click here to see Monthly TRansaction statement.</i></TD>

</TR> <TR>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>MasterCard</TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Others</b></TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Total</b></TD>

<TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4><i>Click here to see checks deposited.</TD>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Personal check</b></TD>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Business check</b></TD>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Others</b></TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>00000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>00000</TD> <TD ALIGN=CENTER bgcolor="white" WIDTH=100>00000</TD> </TR>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Total</b></TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD>< <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>00000</TD> </TR>

<TR>

<TD bgcolor="navy" ALIGN=CENTER COLSPAN=5><font color="white">EMPLOYEE PAYROLL.</FONT>

</TR> <TR>

<TD ALIGN=CENTER bgcolor="SILVER" ROWSPAN=4><i>Click here for issued checks.</i></TD>

<TR>

<TR>

<TR>

<TD ALIGN=CENTER bgcolor="#FFFFFF" ><b>Total</b></TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD>

INTEREST</TD> </TR>

<TR>

<TD ALIGN=CENTER bgcolor="SILVER" COLSPAN=2><i>Net business Interest.</i></TD> <TD ALIGN=CENTER bgcolor="red">000000</TD> <TD ALIGN=CENTER bgcolor="red">000000</TD> <TD ALIGN=CENTER bgcolor="red">000000</TD> </TR> </TABLE>

Phần cuối cùng của các bài học về sử dụng bảng là một minh họa sử dụng bảng để Layout một trang WEB.

BÀI 15 : Sử dụng Bảng Layout một trang Web

Qua bài 12,13,14,15, bạn đã nắm phần lớn các yêu cầu để tạo một bảng và thuộc tính để định dạng bảng. Tuy nhiên, HTML vẫn chưa cho bạn đầy đủ những gì bạn muốn. Để thật sự định dạng bảng theo ý muốn, bạn cần biết cách dùng Ngôn ngữ CSS...

Cascading Style Sheet cũng là một ngôn ngữ lập trình Web bởi vì nó cũng có những cú pháp riêng. Phần minh họa dưới đây chủ yếu giúp bạn về cấu trúc, còn về phong cách, cần phải có CSS hỗ trợ (Sẽ đề cập đầy đủ trong giáo trình CSS) và khả năng sáng tạo và thẩm mỹ của bạn.

Dưới đây là một bảng minh họa cấu trúc của trang Web theo Phong cách cân đối-Symmetrical style: (truyền thống)

Banner 1 Banner 2 Banner 3

Đặt Script giờ đăng nhập: Đặt Script ngày tháng năm

Trang Chính Giới thiệu Tinhọc Welcome to My First HTML Page! Đón chào bạn đến với TRang Web đầu tiên của tôi!

Truyện dài

Truyện ngắn Truyện cười

Âm nhạc Tiếng Anh Kiến Thức Thơ Liên lạc Đăng ký

Và đây là Source Codes để tạo bảng trên:

<title>My First Page</title> </head>

<TR>

<TD align="center" width="140" bgcolor="lime">Banner 1 </TD> <TD align="center" width="320" bgcolor="yellow">Banner 2 </TD> <TD align="center" width="140" bgcolor="lime">Banner 3 </TD> </TR>

</TABLE>

<TD align="center" HEIGHT="20"><font color="blue" size="1"><b>Đặt Script giờ đăng nhập:</b></TD>

<TD align="center" HEIGHT="20"><font color="blue" size="1"><b>Đặt Script ngày tháng năm</b></TD>

</TR> </TABLE>

<TABLE cellpadding="2" cellspacing="2" width="140" border="1" bordercolor="silver"> <TR> <TD BGCOLOR="#FFCC99">Trang Chính</TD> </TR> <TR> <TD BGCOLOR="#FFCC99">Giới thiệu</TD> </TR> <TR> <TD BGCOLOR="#FFCC99">Tinhọc</TD> </TR> <TR> <TD BGCOLOR="#FFCC99">Âm nhạc</TD> <TR> <TD BGCOLOR="#FFCC99">Tiếng Anh</TD> </TR> <TR> <TD BGCOLOR="#FFCC99">Kiến Thức</TD> </TR>

</TABLE>

</TD>

Welcome to My First HTML Page!<BR>

Đón chào bạn đến với TRang Web đầu tiên của tôi! </CENTER>

</TD>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện dài</TD> </TR>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện ngắn</TD> </TR>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện cười</TD>

</TR> <TR>

<TR>

</TABLE> </body> </html>

Đến đây, bạn đã nắm được cơ bản cách dùng bảng để định dạng một trang Web. Bạn có thể thay đổi độ rộng của bảng =100%. Bạn cũng có thể thêm nhiều thành phần khác để trang thật sự theo ý muốn. Bạn thực hành thật nhiều lần để nắm cách sử dụng. Sau đó bạn chạy đọan Code mới trong trình duyệt, bạn thấy có một khỏang cách giữa các thực đơn của trình duyệt WEB (IE chẳng hạn) và trang web của bạn. Lý do là chúng ta chưa xác định khỏang cách của trang với biên trình duyệt. Trong bài 17, chúng ta sẽ học định dạng cho thành phần BODY(phần 2) để xác định khỏang cách này. Bài 18, chúng ta học các liên kết đến các tập tin html khác hoặc trang Web khác và kích họat chương trình gửi mail. Đây chỉ là những phần đơn giản của HTML. Ngòai ra, sử dụng Iframe, Frame và tạo Form trong HTML là những phần quan trọng mà chúng ta cũng sẽ lần lượt khám phá.

HTML Tags

Bài này giới thiệu một số HTML Tags và các thuộc tính của chúng .

TAGS ATTRIBUTES DESCRIPTION: MÔ TẢ

<a></a> Để tạo liên kết hoặc chỉ mục liên kết(anchor)

href= liên kết(anchor) hoặc địa chỉ e-mail...Chỉ định đến một địa chỉ URL hoặc một chỉ mục

name= đến (thường là trong 1 trang).Đánh dấu một vùng mà liên kết chỉ mục sẽ nhảy

target= trang liên kết sẽ hiển thị. (sử dụng nhiều với Chỉ định 1 cửa sổ hoặc một khung để nội dung frameset)

accesskey= Thêm phím bấm nhanh cho liên kết đến chỉ mục.

event Dùng để kích 1 script.

tabindex hoặc thành phần của form.Xác định thứ tự phím tab đi qua trong liên kết <abbr></abbr> Giải thích nghĩa của các ký tự viết tắt.

title= Nội dung giải thích.

<acronym></acronym> bằng chữ đầu: Ví dụ NATO, WHO, WTO.Giải thích nghĩa của các ký tự viết tắt bắt đầu

title= Nội dung giải thích.

<address></address> thường cho chữ nghiêng, xuống dòng tự động.Định dạng địa chỉ mail của người thiết kế Web, <applet></applet> Chèn chương trình Java Applets.

code Xác định địa chỉ URL của mã applets

width, height Xác định chiều rộng và cao của Applets.

area Xác định tọa độ của bản đồ ảnh..

accesskey= trên bản đồ.Thêm phím bấm nhanh đến một vùng riêng biệt

alt= Cung cấp thông tin về một vùng.

href= đồ ảnh.Link đến một địa chỉ URL từ một vùng trong bản

nohref= kết đến địa chỉ URLĐánh dấu một vùng trên bản đồ không có liên

shape= (circle, rect và poly).Xác định hình dạng của một vùng trên bản đồ

target= hiển thị trong đó.xác định cửa sổ hay khung mà file liên kết sẽ

<b></b> Làm chữ đậm lên.

base Xác định địa chỉ URL liên quan trọng frame.

href= các địa chỉ URL liên quan.Xác định địa chỉ URL sẽ được dùng để truy cập target= Xác định đích cho các liên kết trên trang hiện tại.

basefont Xác định chuẩn font cố định cho chữ.

color= Xác định màu cố định cho chữ.

face= Xác định font cố định cho chữ.

size= Xác định kích thước cố định cho chữ.

bgsound Lồng nhạc nền vào trang.

loop= Xác định số lần mà bản nhạc sẽ lặp lại.

src= Xác định địa chỉ nguồn của bản nhạc.

<big></big> Làm cho chữ lớn hơn so với chữ xung quanh.

<blink></blink> Làm cho chữ ẩn hiện, nhấp nháy.

<blockquote></blockquote>lề tùy vào số tag mở/đóng blockquote.Tạo một đọan trích dẫn thụt lề. Khỏang cách thụt cite= Ghi địa chỉ nguồn trích dẫn (nếu có).

<body></body> trang web. Những gì nằm giữa tag mở/đóng body Khai báo phần nội dung chính(phần thân) của sẽ hiển thị trên trình duyệt.

alink= đang họat động(active link).Xác định màu của một link đang tham khảo đến,

vlink= (visited link).Xác định màu của một link đã được viếng thăm background= Xác định ảnh nền cho tòan trang.