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ụ :
|
|
<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.
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:
Posted By Việt Gift Market01:21
