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:* 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.
<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>
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:
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.
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.
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.
Thẻ <TABLE> bao gồm các thuộc tính:
>>Xem ví dụ về <TABLE>
- 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
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:>>Xem ví dụ về <TR>
- 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.
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:>> Xem ví dụ về <TH><TD>
- 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.
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
Cảm ơn mọi người đã đọc bài viết, hẹn gặp lại ! Thân !
