Table tag - Thẻ tạo bảng biểu trong HTML

Chào các bạn ! Sau khi về quê nghỉ ngơi và xả strees, mình đã có lại cảm hứng để tiếp tục mọi việc. Hôm nay mình xin viết tiếp chuỗi bài về tự học lập trình blog, website. Qua bài viết trước, các bạn đã biết đến thẻ liên kết a, và qua bài viết này các bạn sẽ biết thêm về TABLE - thẻ dùng tạo bảng biểu trong HTML

Trong Word, table được tạo nên bởi hàng và cột thì trong HTML table cũng được tạo nên khi có 2 yếu tố đó. Trước đây, khi lập trình web, đa số đều sử dụng table để dàn trang vì dễ và tính hiệu quả của nó tương đối ổn. Ở Blogspot, không có nút như Word để tạo bảng nhanh, vì vậy, vì đặc thù công việc thì việc nhớ code tạo bảng sẽ rất có ích.

Cú pháp:
<table>...</table>
- Mỗi dòng trong bảng được tạo ra bởi thẻ <tr>...</tr>
- Mỗi ô được định nghĩa bởi thẻ <td>...</td>
- Tiêu đề của dòng hoặc cột được định nghĩa bởi thẻ <th>...</th>

* Dữ liệu trong các ô có thể là hình ảnh, âm thanh, văn bản, hoặc cũng có thể chứa một bảng khác.

Mình xét một ví dụ:

<table border="1">
<tr><!-- dòng 1 -->
      <td>Buổi</td> <!-- ô 1-->
      <th>Sáng</th>
      <th>Chiều</th>
      <th>Tối</th>
</tr>
<tr><!-- dòng 2 -->
      <th>Công việc</th>
      <td>Đi học</td>
      <td>Học tiếng anh</td>
      <td>Làm bài tập</td>
</tr>
</table>

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Nhìn vào bảng hiển thị, các bạn có thể sẽ rõ hơn chức năng của từng thẻ trong bảng, tuy nhiên vẫn còn những thuộc tính chúng ta cần nắm:
Thẻ <TABLE> bao gồm các thuộc tính:

• border  : xác định độ dày đường kẻ bảng, như ví dụ trên là 1px.
• align : dùng để căn lề, có 3 giá trị: left, center, right. Không hỗ trợ trong HTML5
• background: xác định ảnh nền.
• bgcolor : xác định màu nền.Không hỗ trợ trong HTML5
• height, width : xác định chiều cao và độ rộng bảng, giá trị có thể là px(pixels) hoặc %.
• cellspacing : xác định khoảng cách giữa các ô. Không hỗ trợ trong HTML5
• cellpadding: xác định khoảng cách giữa dữ liệu trong ô và các cạnh của ô.Không hỗ trợ trong HTML5

>>Xem ví dụ về <TABLE>

Trong thẻ table có các thẻ con cấu thành nó, bao gồm:
Thẻ <TR> : (Table Rows): tạo ra các dòng cho bảng.

*Thuộc tính: 

• align: căn lề cho các ô trong cùng một dòng. Không hỗ trợ trong HTML5.
• valign: căn lề theo chiều dọc. có các giá trị : "top" - trên ; "middle" - trung  tâm ; "bottom" - dưới.; "baseline" - viết cách trên 1 dòng cơ bản. Không hỗ trợ trong HTML5.
• bgcolor: xác định màu nền cho dòng. Không hỗ trợ trong HTML5.

>>Xem ví dụ về <TR>

Thẻ <TH> : (Table Heading cell) - Tạo tiêu đề cho 1 ô hoặc 1 dòng.
Thẻ <TD> : (Table Data) - Tạo 1 ô dữ liệu.

* Thuộc tính:

• align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
• background, bgcolor: xác định ảnh nền, màu nền cho ô dữ liệu. Không hỗ trợ trong HTML5.
• height, width: xác định chiều cao, chiều dài của ô. Không hỗ trợ trong HTML5.
• rowspan: xác định phạm vi mở rộng của ô theo hàng. Không hỗ trợ trong HTML5.
• colspan: xác định phạm vi mở rộng của ô theo cột. Không hỗ trợ trong HTML5.

>> Xem ví dụ về <TH><TD>

Hiện nay, thẻ table còn có các thẻ con quy định vị trí của từng phần trong bảng:
<thead> : quy định dữ liệu sẽ luôn ở trên cùng của bảng, thường làm tiêu đề của cột.
<tbody>: quy định dữ liệu phần giữa bảng, sau thẻ </thead>
<tfoot>: quy định dữ liệu cuối bảng.

* Thuộc tính:

• align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
• background, bgcolor: xác định ảnh nền, màu nền cho phần tử bảng. Không hỗ trợ trong HTML5.
• height, width: xác định chiều cao, chiều dài của phần tử bảng. Không hỗ trợ trong HTML5.

Để phân biệt các thẻ này, trình duyệt tự động tạo ra đường viền lớn hơn giao giữa 3 phần và đặc biệt, dù bạn có sắp xếp lộn xộn các thẻ này cho nhau thì trình duyệt sẽ vẫn hiện đúng

Bạn xem qua ví dụ đây

Thực hành tại đây :)

Cảm ơn mọi người đã đọc bài viết, hẹn gặp lại ! Thân !