You are here

HTML guide 2: Tags define blocks

Hướng dẫn HTML căn bản

Bài 2: Nhóm thẻ định dạng khối

2.1 Thẻ P

Thẻ <P> được sử dụng để định dạng một đoạn văn bản

<P align="left/right/center/justify">Nội dung đoạn văn bản</P>

Các giá trị cho tham số ALIGN:

  • LEFT Căn lề trái
  • CENTER Căn giữa trang
  • RIGHT Căn lề phải
  • JUSTIFY Căn đều 2 bên đoạn văn bản

2.2 Thẻ xuống dòng BR

Nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR>.

2.3 Thẻ định dạng danh sách

Có 2 kiểu danh sách:
•`Danh sách không sắp xếp (hay không đánh số) <UL>
• Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi mục trong danh sách được sắp xếp thứ tự

<UL>
<LI>Mục thứ nhất
<LI>Mục thứ hai
<LI>Muc thu ba
</UL>
<OL type="1/a/A/i/I">
<LI>Muc thu nhat
<LI>Muc thu hai
<LI>Muc thu ba
</OL>

Tham số Type quy định kiểu đánh số cho danh sách:

TYPE =1 Các mục được sắp xếp bằng số 1, 2, 3...
         =a Các mục được sắp xếp chữ cái a, b, c...
         =A Các mục được sắp xếp chữ hoa A, B, C...
         =i Các mục được sắp xếp theo i, ii, iii...
         =I Các mục được sắp xếp theo I, II, III..

Đối với danh sách không đánh số: thẻ <LI> có thuộc tính TYPE= xác định ký hiệu đầu dòng
(bullet) đứng trước mỗi mục, thuộc tính này có thể nhận các giá trị: “disc” (chấm tròn đậm);
“circle” (vòng tròn); “square” (hình vuông).

2.4 Thẻ định dạng bảng biểu

<TABLE> ... </TABLE> Định nghĩa một bảng
<TR> ... </TR> Định nghĩa một hàng trong bảng
<TD> ... </TD> Định nghĩa một ô trong hàng
<TH> ... </TH> Định nghĩa ô chứa tiêu đề của cột
<CAPTION> ... </CAPTION> Tiêu đề của bảng

Cú pháp như sau:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Thuộc tính của bảng:

Thẻ <TABLE> có những thuộc tính sau:

ALIGN=/VALIGN=   Căn lề cho bảng và nội dung trong mỗi ô
BORDER= "pixel" Kích thước đường kẻ chia ô trong bảng, đo theo pixel. Giá trị 0 có nghĩa là không xác định lề, giữa các ô trong bảng chỉ có một khoảng trắng nhỏ để phân biệt. Nếu chỉ để border thì ngầm định border=1. Với những bảng có cấu trúc phức tạp, nên đặt lề để người xem có thể phân biệt rõ các dòng và cột.
BORDERCOLOR= "color" Màu đường kẻ
BORDERCOLORDARK=
BORDERCOLORLIGHT=
"color" Màu phía tối và phía sáng cho đường kẻ nổi
BACKGROUND= "url" Địa chỉ tới tệp ảnh dùng làm nền cho bảng
CELLSPACING= "pixel" Khoảng cách giữa các ô trong bảng
CELLPADDING= "pixel" Khoảng cách lề giữa nội dung và đường kẻ trong mỗi ô của bảng.

Thẻ <TR> và <TD> có thể dùng tham số ALIGN=/VALIGN= để căn lề theo chiều ngang và chiều cao.

Tham số ALIGN= có các giá trị như căn lề ở các thẻ khác: "left/right/center". Còn VALIGN= căn lề theo chiều cao thì có giá trị: "top/center/bottom"

Thẻ <TD> với thuộc tính COLSPAN và ROWSPAN:

  • COLSPAN=     Chỉ định ô sẽ kéo dài trong bao nhiêu cột
  • ROWSPAN=    Chỉ định ô sẽ kéo dài trong bao nhiêu hàng

Hãy làm ví dụ:

<table border="1">
<tr>
<td colspan="2">Ô thứ 1</td> <td>Ô thứ 2</td>
</tr>
<tr>
<td>Ô thứ 3</td>
<td>Ô thứ 4</td>
<td>Ô thứ 5</td>
</tr>
</table>

Khi trong hàng mà có 1 ô sử dụng thuộc tính ROWSPAN lớn hơn 1, rõ ràng là những hàng tiếp theo (tùy thuộc vào giá trị ROWSPAN) sẽ có số ô ít hơn

Ví dụ:

<table border="1">
<tr>
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td> <td>Cell 5</td>
</tr>
</table>