Học HTML cơ bản -Bài 11

By Unknown - Thứ Tư, 17 tháng 8, 2016 - No Comments

Bài 11: Tìm Hiểu Thêm Về Bảng – Table

Ở bài học số 10, bạn đã biết đôi chút về table, có thể nó gây cho bạn một chút chán nãn. Nhưng thật sự, nếu bạn nắm vững các hiểu biết về table, chắc chắn sẽ không còn gì ở HTML có thể làm khó được bạn nữa.

NHỮNG GÌ BẠN CHƯA BIẾT?

Đó là 2 thuộc tính colspan và rowspan nếu bạn muốn tạo ra bảng có những tính chất đặc biệt hơn.

Colspan là từ viết tắt của “column span” – mở rộng cột. Colspan được sử dụng trong thẻ <td> để xác định một ô sẽ mở rộng ra thêm bao nhiêu cột:

Ví dụ 1:



<table border="1">


<tbody>


<tr>


<td colspan="3">Ô1</td>


</tr>


<tr>


<td>Ô 2</td>


<td>Ô 3</td>


<td>Ô 4</td>


</tr>


</tbody>


</table>

Đây là kết quả bạn nhìn thấy trên trình duyệt:

Ô1
Ô 2	Ô 3	Ô 4

Khi thiết lập colspan bằng “3”, Ô của hàng đầu tiên sẽ mở rộng ra bằng 3 cột. Nếu bạn thiết lập colspan bằng “2”, ô sẽ mở rộng ra thành 2 cột , do đó bạn cần thêm 1 ô nữa để đủ 3 cột trong hàng đầu tiên, như thế nó mới có thể cân bằng với số cột ở hàng thứ hai .

Example 2:



<table border="1">


<tbody>


<tr>


<td colspan="2">Ô 1</td>


<td>Ô 2</td>


</tr>


<tr>


<td>Ô 3</td>


<td>Ô 4</td>


<td>Ô 5</td>


</tr>


</tbody>


</table>

Xem trên trình duyệt bạn sẽ có bảng như sau:

Ô 1		Ô 2
Ô 3	Ô 4	Ô 5

ROWSPAN SẼ NHƯ THẾ NÀO?

Chắc bạn cũng đoán ra, nó sẽ cũng tương tự, rowspan xác định một ô sẽ mở rộng ra bao nhiêu hàng:

Example 3:



<table border="1">


<tbody>


<tr>


<td rowspan="3">Ô1</td>


<td>Ô 2</td>


</tr>


<tr>


<td>Ô 3</td>


</tr>


<tr>


<td>Ô 4</td>


</tr>


</tbody>


</table>

Xem trên trình duyệt bạn sẽ có bảng như sau:

Ô1	Ô 2
	Ô 3
	Ô 4

Trong ví dụ trên rowspan được thiết lập bằng “3” trong ô 1. Điều này có nghĩa ô này sẽ mở rộng ra 3 hàng (1 ô của nó và chiếm thêm 2 ô kế tiếp). Ô 1 và Ô 2 được xem là 1 hàng, trong khi đó Ô 3 và Ô 4 được xem như hai hàng độc lập.

Nó có một chút phức tạp, nếu bạn khó hình dung, hãy vẽ bảng mà bạn muốn tạo lên giấy, sau đó hãy viết code.

Hãy thực hành thật nhiều với colspan và rowspan bạn sẽ nắm vững kỹ thuật tạo bảng.

News Ticker