HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ liệu của bảng
Các thẻ:
Tạo bảng: <table>…</table> mỗi bảng chỉ có 1 cặp thẻ này
Tạo dòng: <tr>…</tr> bảng có bao nhiêu dòng thì có bấy nhiêu cặp thẻ này
Tạo ô:
Ô tiêu đề của bảng: <th>…</th>
Ô dữ liệu: <td>…</td>
Tổng số thẻ <td><td> bằng số ô của bảng. Dòng có bao nhiêu ô thì có bấy nhiêu thẻ và/hoặc nằm trong cặp thẻ <tr>…</tr> tương ứng
Ví dụ :Tạo một bảng biểu đơn giản
|
<table border=”1″ cellspacing=”0″ cellpadding=”5″>
<tr>
<td>cot 1</td>
<td>cot 2</td>
<td>cot 3</td>
</tr>
<tr>
<td>cot 1</td>
<td>cot 2</td>
<td>cot 3</td>
</tr>
<tr>
<td>cot 1</td>
<td>cot 2</td>
<td>cot 3</td>
</tr>
</table>
|
Kết quả:
Trong ví dụ trên có một số thuộc tính của thẻ table :
-border=“số”: kích thước đường viền. Nếu không có thì mặc định bằng 0 : không có đường viền.
-cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp.
-cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô.
Ngoài ra còn một số thuộc tính khác nữa như sau:
-width=“n”(rộng), height=“n”(cao): độ rộng và độ cao của bảng. Có thể đặt theo 2 cách:
- n: (n là số) Quy định độ rộng, cao là n pixels
- n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa bảng
-bgcolor=“màu”: màu nền của bảng (có thể tên màu bằng tên màu tiếng anh hoặc mã màu)
-background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường dẫn tương đối nếu có thể
Ví dụ :
|
1
|
<table cellspacing=”0″ cellpadding=”5″ border=”1″ width=”200px” height=”200px” bgcolor=”red”>
<tr>
<td>cot 1</td>
<td>cot 2</td>
<td>cot 3</td>
</tr>
<tr>
<td> cot 1</td>
<td> cot 2</td>
<td> cot 3</td>
</tr>
<tr>
<td>cot 1</td>
<td>cot 2</td>
<td>cot 3</td>
</tr>
</table>
|
Kết quả :
– Thuộc tính colspan và rowspan trong table
+colspan : dùng để nối 2 hoặc nhiều ô với nhau tính từ ô đặt thẻ này sang bên phải.
Ví dụ :
|
<table border=”1″ cellspacing=”0″ cellpadding=”5″>
<tr>
<td colspan=”3″>Hang 1 cot 1 – hang 1 cot 2 – hang 1 cot 3</td>
</tr>
<tr>
<td>Hang 2 cot 1</td>
<td>Hang 2 cot 2</td>
<td>Hang 2 cot 3</td>
</tr>
<tr>
<td>Hang 3 cot 1</td>
<td>Hang 3 cot 2</td>
<td>Hang 3 cot 3</td>
</tr>
</table>
|
Kết quả:
+rowspan : dùng để nối 2 hoặc nhiều ô với nhau tính từ ô đặt thẻ này xuống phía dưới.
Gợi ý xem thêm: Bộ tai lieu hoc lap trinh android full
Ví dụ:
|
<table border=”1″ cellspacing=”0″ cellpadding=”5″>
<tr>
<th rowspan=”2″>Tieu de 1</th>
<th>Tieu de 2</th>
<th>Tieu de 3</th>
</tr>
<tr>
<td>Hang 1 cot 1</td>
<td>Hang 1 cot 2</td>
</tr>
<tr>
<td>Hang 2 cot 1</td>
<td>Hang 2 cot 2</td>
<td>Hang 2 cot 3</td>
</tr>
</table>
|
Kết quả :
Lưu ý : Ở 2 thuộc tính này khi sử dụng colspan tức là ô đó sẽ chiếm vị trí của ô bên cạnh còn rowspan tức là ô đó sẽ chiếm vị trí của ô bên dưới.
-Nhóm thẻ <thead>, <tbody>, <tfood> dùng để tạo bố cục cho một table
Ví dụ:
|
<table border=”2″ cellspacing=”5″ cellpadding=”10″>
<thead>
<tr>
<td>
Ho ten
</td>
<td>
Email
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Devpro
</td>
<td>
devpro@gmail.com
</td>
</tr>
<tr>
<td>
ADMIN
</td>
<td>
ADMIN.com
</td>
</tr>
</tbody>
<tfood>
<tr>
<td>
Ho ten
</td>
<td>
Email
</td>
</tr>
</tfood>
</table>
|
Kết quả :
Kết Luận : Kết thúc bài hôm nay bạn đã có thể nắm được các thẻ HTML định dạng Table căn bản thường dùng, bây giờ thì bạn đã có thể tạo ra 1 trang web đơn giản dựa trên bố cục của Table và các kiến thức đã học từ những bài trước một cách nhanh chóng rồi nhé.
Chúc bạn thành công!
Gợi ý xem thêm:
- Hướng dẫn tự học lập trình game unity
Nguồn : http://kholanhmienbac.com.vn