Học Làm Web

Tự học thiết kế trang web – bài 8

Bài này chúng ta sẽ thực tập thêm một số loại table nâng cao, vì có nhiều trường hợp chúng ta sẽ không tránh khỏi việc sử dụng nó.

Hình ảnh
Hình dự phòng
Một table hơi đặc biệt, đó là có 2 ô được trộn lại làm 1

Giờ thì chúng ta xem xét đoạn mã tạo nên table theo như hình mình họa trên:

MÃ: CHỌN TẤT CẢ
<table style="text-align: left; width: 445px; height: 128px;" border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="font-weight: bold;">Stt</td>
<td style="text-align: center; font-weight: bold;">Họ và tên</td>
<td style="text-align: center; font-weight: bold;">Ngày sinh</td>
<td style="text-align: center; font-weight: bold;" colspan="2" rowspan="1">Điểm</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td style="font-weight: bold; text-align: center;">Toán</td>
<td style="font-weight: bold; text-align: center;">Văn</td>
</tr>
<tr>
<td style="text-align: center;">1</td><td>Nguyễn Văn An</td>
<td>11/8/1993</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">4</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>Trần Hòa Bình</td>
<td>5/11/1993</td>
<td style="text-align: center;">6</td>
<td style="text-align: center;">5</td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>Lê Thị Tuyết Mai</td>
<td>29/6/1993</td>
<td style="text-align: center;">9</td>
<td style="text-align: center;">8</td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>Lê Lâm Thi</td>
<td>3/7/1993</td>
<td style="text-align: center;">7</td>
<td style="text-align: center;">7</td>
</tr>
</table>

Bạn cứ copy nguyên đoạn mã HTML trên bỏ vào giữa cặp thẻ <body> và </body> của trang web bạn đang làm và Save lại rồi xem với trình duyệt xem thế nào đã nhé, trước khi ta xem xét kỹ hơn.

Bạn nhận xét thấy gì nhỉ?

Đầu tiên:

MÃ: CHỌN TẤT CẢ
<td style="font-weight: bold;">Stt</td>
<td style="text-align: center; font-weight: bold;">Họ và tên</td>
<td style="text-align: center; font-weight: bold;">Ngày sinh</td>
<td style="text-align: center; font-weight: bold;" colspan="2" rowspan="1">Điểm</td>

Ta thấy có 4 hàng mã HTML bắt đầu <td> và kết thúc </td>

Như vậy, ta nghĩ rằng với 4 ô khởi đầu thì table của ta hứa hẹn có 4 cột.

Nhưng ta lại thấy ở dòng tiếp theo thì:

MÃ: CHỌN TẤT CẢ
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td style="font-weight: bold; text-align: center;">Toán</td>
<td style="font-weight: bold; text-align: center;">Văn</td>

Ta đếm thấy những 5 hàng mã HTML bắt đầu <td> và kết thúc </td> , và lúc này khi xem table bằng trình duyệt, rõ ràng ta đếm thấy có 5 ô, như vậy, giả thiết 4 cột của ta bên trên đã… phá sản?!

Đây quả là đau đầu rồi. Vậy table của ta thực sự là thế nào? Câu trả lời: Nó có cả thảy 5 cột chứ không phải 4 cột

Vậy tại sao ở dòng đầu tiên, ta chỉ thấy có 4 cặp <td> và </td> mà thôi? Trả lời:
<td style=”text-align: center; font-weight: bold;” colspan=”2″ rowspan=”1″>Điểm</td> là một ô đặt biệt, nó đã chiếm mất 2 cột của table, và như vậy thì chúng ta đếm thấy chỉ có 4 cặp <td> và </td> là đúng.

Ta nhìn thấy rằng colspan=”2″ là nói lên rằng: ô này băng qua 2 cột.

Như vậy, bạn đã học được rằng colspan=”một giá trị là số cột mà ô muốn băng qua” là để chúng ta áp dụng trong trường hợp như vừa khảo sát trên. Bạn có thể tăng số này nếu muốn, nhưng số này luôn phải nhỏ hơn tổng số các cột có trong table.

Bây giờ thì có một bài tập dành cho bạn. Hãy làm table như hình dưới đây:

Hình ảnh
Hình dự phòng

Sau khi làm xong, hãy xem liệu có tương tự đoạn mã dưới đây?

MÃ: CHỌN TẤT CẢ
<table style="text-align: left; width: 445px; height: 128px;" border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="font-weight: bold; text-align: center;">Stt</td>
<td style="text-align: center; font-weight: bold;">Họ và tên</td>
<td style="text-align: center; font-weight: bold;">Ngày sinh</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="text-align: center;">1</td>
<td>Nguyễn Văn An</td>
<td>11/8/1993</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>Trần Hòa Bình</td>
<td>5/11/1993</td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>Lê Thị Tuyết Mai</td>
<td>29/6/1993</td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>Lê Lâm Thi</td>
<td>3/7/1993</td>
</tr>
<tr>
<td colspan="2" rowspan="1" style="text-align: center;"><b>Tổng số: 4 học sinh</b></td>
<td>&nbsp;</td>
</tr>
</table>

Bài này cũng nhắc bạn nhớ đến &nbsp; , nó chính là dấu khoảng cách dùng trong trang web, ta nên dùng dấu này khi đề cập đến khoảng cách nếu nó nằm trong table hoặc ta muốn có 2 khoảng cách trở lên, vì dùng phím dài gõ hàng loạt, trình duyệt cũng bỏ hết, chỉ giữ lại duy nhất một khoảng trắng.

Nâng cao thêm chút nữa

Giờ thì ta không kéo dài ô qua một số cột nữa, mà ta kéo dài ô theo hàng. Khảo sát ví dụ dưới đây:

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: