[HTML] Bài 10: Tạo Bảng Trong HTML

Trước đây khi vẫn chưa sử dụng thẻ DIV để xây dựng bố cục website chúng ta thường sử dụng thẻ Table để xây dựng bố cục website.
Để tạo một bảng trong văn bản HTML ta sử dụng tag <TABLE></TABLE>. Trong thẻ này còn chứa các tag khác mang chức năng định nghĩa các thuộc tính khác trong bảng như dòng, cột...

1. Thẻ TABLE

- Cập Thẻ <TABLE></TABLE> dùng để khai báo một bảng.
- Các thuộc tính:
+ width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px
+ height: Chiều cao bảng
+ bgcolor: Định màu nền của bảng
+ background: Định ảnh nền của bảng
+ border: Độ lớn đường viền của bảng
+ bordercolor: Màu của đường viền
+ align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center
+ cellspacing: Định độ dày của khung
+ cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
Ví Dụ:

<table width="500" height="200"  border="3" bordercolor="red" bgcolor="#3388cc" cellspacing="0" cellpadding="20" > 
</table>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

2. Thẻ TR (Table row)

- Cú Pháp: <tr>..</tr>
- Chức Năng: xác định dòng trong table
- Vị trí: nằm trong cập thẻ Table
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
- Một số thuộc tính trong thẻ <tr>
+ height: Khai báo chiều cao của dòng( độ lớn dòng)
+ align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right( phải),
center( giữa)
+valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:

<table width="500px" height="200px" border="3" bordercolor="red">
<tr></tr>
<tr></tr>
</table>

3. Thẻ TD (Table Data)

- Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data)
- Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- Một số thuộc tính:
+ width: Độ rộng của cột
+ height: Chiều cao của cột
+ align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right( phải),
center( giữa)
+ valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa), bottom( dưới)
Ví Dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table border="2" width="400" height="200">
    <tr align="center">
      <td>Ô 1 dòng 1</td>
      <td>Ô 2 dòng 1</td>
    </tr><!-- Dòng thứ 1-->
    
    <tr>
    <td>Ô 1 dòng 2</td>
    <td>Ô 2 dòng 2</td>
    </tr><!-- Dòng thứ 2-->
    
  </table>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4. Thẻ TH

- <th></th> ( table heading) Tương tự cặp thẻ <td></td> tuy nhiên <th> dùng trong
trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in
đậm và căn giữa tự động.
Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Group fcwc</title>
</head>
<body>
  <table border="2" width="400" height="100">
    <tr>
      <th>Họ tên</th>
      <th>Nghề nghiệp</th>
    </tr><!-- Dòng thứ 1-->
    
    <tr>
    <td>Nguyễn Hữu Trọng</td>
    <td>Sinh Viên</td>
    </tr><!-- Dòng thứ 2-->
    
  </table>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Một số lưu ý:
- Số cặp thẻ <td> ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của
bảng
- Đối với ô trống( không có nội dung) nên sử dụng thẻ <br> hoặc   thay cho
khoảng trống

5. Gộp cột, dòng trong bảng

- Là việc tùy biến bảng bằng việc gộp các cột hay dòng lại với nhau
- colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan
- rowspan=“y”: Gộp y hàng tính từ hàng đang xét
Lưu ý: Sau khi gộp phải loại bỏ số dòng ( hoặc cột) để cân đối bảng
Ví Dụ: đã loại bỏ 1 cột ở dòng thứ 2. Vì dòng 1
đã có 2 dòng được gộp.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Group fcwc</title>
</head>
<body>
  Table chưa gọp
  <table border="2" width="500" height="100">
    <tr>
      <th width="100">Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
      <th>Nghề nghiệp</th>
    </tr><!-- Dòng thứ 1-->
    
    <tr>
    <td>07.09.1993</td>
      <td><br/></td>
    <td>Sinh Viên</td>
    </tr><!-- Dòng thứ 2-->
    
  </table>
  Table gộp cột
  <table border="2" width="500" height="100">
    <tr>
      <th rowspan="2" width="100">Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
      <th>Nghề nghiệp</th>
    </tr><!-- Dòng thứ 1-->
    
    <tr>
    <td>07.09.1993</td>
      <td><br/></td>
    <td>Sinh Viên</td>
    </tr><!-- Dòng thứ 2-->
    
  </table>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Bài Tập sử dụng tag Table xây dựng bố cục trang web sau:

abcdasdasd

Thứ Sáu, 23 tháng 8, 2013