Thuộc tính <b>COLSPAN="" </b> dùng để mở rộng một ô dữ liệu
trong một cột bằng với số ô dữ liệu trong cột đó. Thuộc tính
<b>ROWSPAN ="" </b> dùng để mở rộng 1 ô dữ liệu trong một
hàng bằng với với số hàng chứa các ô còn lại.



Hãy xem bảng bên dưới-Ví Dụ 1:

BUSINESS 2ND QUARTER SALES SUMMARY.
Click here to see detailed sales.	Month	APR	MAY	JUN
	Gross Sales	000000	000000	000000
	Expenses	000000	000000	000000
	Total	00000	00000	00000
METHOD OF PAYMENT.
Click here to see Monthly transaction statement.
	Visa	000000	000000	000000
	MasterCard	000000	000000	000000
	Others	000000	000000	000000
	Total	000000	000000	000000
Click here to see checks deposited.	Personal check	000000	000000	000000
	Business check	000000	000000	000000
	Others	00000	00000	00000
	Total	00000	00000	00000
EMPLOYEE PAYROLL.
Click here for issued checks.	EMP 1	000000	000000	000000
	EMP 2	000000	000000	000000
	EMP 3	000000	000000	000000
	Total	000000	000000	000000
TAXABLE INTEREST
Net business Interest.		000000	000000	000000

Và đây là một ví dụ khác-Ví dụ 2:

BẢNG GIÁ THÁNG 3 NĂM 2006
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 đó (giá 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:

<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>

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>
<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:

<TABLE width="500" align=center cellpadding="3" cellspacing = "2" border=1> <tr> <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:


<TABLE ALIGN=CENTER width=500 border=1 CELLSPACING=1 CELLPADDING=1>
<TR>
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>


Như vậy chúng ta có được hàng đầu tiên.


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>
<TD ALIGN=CENTER bgcolor="SILVER">MAY</TD>
<TD ALIGN=CENTER bgcolor="SILVER">JUN</TD>
</TR>

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>
<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>
<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:


<TABLE ALIGN=CENTER width=500 border=1 CELLSPACING=1 CELLPADDING=1>
<TR>

<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>
<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>
<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>
<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>


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
	Gross Sales	000000	000000	000000
	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>
<TD ALIGN=CENTER bgcolor="red">000000</TD>
<TD ALIGN=CENTER bgcolor="red">000000</TD>
</TR>





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


Và đây là Source Codes cho bảng ví dụ 1:

<TABLE ALIGN=CENTER width=500 border=1 CELLSPACING=1 CELLPADDING=1> <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> <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> <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">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> <TD ALIGN=CENTER bgcolor="#FFFFFF"><b>Visa</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>MasterCard</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>Others</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>Total</b></TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> </TR> <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="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>Business check</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>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> <TD ALIGN=CENTER bgcolor="#FFFFFF">EMP 1</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">EMP 2</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" >EMP 3</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>Total</b></TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> <TD ALIGN=CENTER bgcolor="red" WIDTH=100>000000</TD> </TR> <TD bgcolor="AQUA" ALIGN=CENTER COLSPAN=5>TAXABLE 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.

HẾT BÀI 15




Nguồn: Sưu tầm Internet