1. Các bước để tạo một cái bảng (table) đơn giản
Bước 1: Dùng cặp thẻ <table></table> để xác định một cái bảng trong HTML
<table> </table>
Bước 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng (một cặp thẻ <tr></tr> tương ứng với một hàng)
<table>
<tr></tr>
<tr></tr>
</table>
Lưu ý: <tr> là viết tắt của “table row” là bắt đầu và kết thúc tạo ra 1 hàng ngang.
Bước 3: Đặt cặp thẻ <td></td> vào bên trong cặp thẻ <tr></tr> để tạo ô cho hàng (một cặp thẻ <td></td> tương ứng với một ô).
<table>
<tr>
<td>Tên website</td>
<td>Liên hệ</td>
<td>Đất nước</td>
</tr>
<tr>
<td>binhnet.com</td>
<td>Nguyen Huu The Binh</td>
<td>Viet Nam</td>
</tr>
</table>
Lưu ý: <td> là viết tắt của “table data”. Thẻ này bắt đầu và kết thúc để tạo ra một ô (cell) trong hàng. Các bạn cần lưu ý thêm rằng các phần tử <td> là các bộ chứa dữ liệu của bảng. Chúng có thể chứa tất cả các loại phần tử HTML; Văn bản, hình ảnh, danh sách, các bảng biểu khác …
Bước 4: Dùng hàng đầu tiên làm tiêu đề cho bảng
Ta đổi cặp thẻ <td></td> thành cặp thẻ <th></th>
<table>
<tr>
<th>Tên website</th>
<th>Liên hệ</th>
<th>Đất nước</th>
</tr>
<tr>
<td>binhnet.com</td>
<td>Nguyen Huu The Binh</td>
<td>Viet Nam</td>
</tr>
</table>
Lưu ý: <th> là viết tắt của “table header”. Thẻ này được dùng làm tiêu đề cho bảng. Mặc định thì các tiêu đề của bảng được in đậm (bold) và căn giữa (center).
Bước 5: Thêm thuộc tính border với giá trị 1px vào bên trong thẻ <table> để tạo đường viền cho bảng.
<table border="1px">
<tr>
<th>Tên website</th>
<th>Liên hệ</th>
<th>Đất nước</th>
</tr>
<tr>
<td>binhnet.com</td>
<td>Nguyen Huu The Binh</td>
<td>Viet Nam</td>
</tr>
</table>
Bước 6: Xem kết quả
Vậy là tôi đã hướng dẫn để bạn tạo được một cái bảng đơn giản trong HTML
2. Các thuộc tính CSS thường dùng trong bảng
2.1 CSS border
Nếu bạn không chỉ định một đường viền cho bảng, nó sẽ được hiển thị mà không có đường viền.
Một đường viền được thiết lập với thuộc tính CSS border
2.2 CSS border-collapse
Nếu bạn muốn chỉ tạo một đường viền cho tất các các ô thì thêm thuộc tính CSS border-collapse
2.3 CSS border-spacing
Lưu ý: Nếu bạn đã dùng thuộc tính CSS border-collapse thì thuộc tính CSS border-spacing sẽ không có hiệu lực.
2.4 CSS padding
Thuộc tính này dùng để xác định khoảng cách giữa nội dung và đường viền trong một ô.
2.5 CSS text-align
Để căn chỉnh nội dung cho một ô ta dùng thuộc tính CSS text-align với các giá trị left (trái), center (giữa), right (phải).
2.6 CSS width và height
Thuộc tính CSS height (chiều cao) có đơn vị là px. Thường người ta chỉ áp dụng cho thẻ <th> để tạo sự nổi bật.
Thuộc tính CSS width (chiều rộng) có đơn vị là % hoặc px, thường người ta dùng đơn vị %. Các bạn cần lưu ý thêm rằng đơn vị % này ý nghĩa là %chiều rộng của bảng (table) so với màn hình hiển thị. Tôi sẽ ví dụ bằng hình ảnh như ở dưới cho các bạn dễ hiểu.
ví dụ này width=”50%” và height=”200px” thì tôi sẽ được như hình dưới
ví dụ này width=”100%” và tôi không thêm thuộc tính CSS height thì tôi sẽ được như hình dưới
Lưu ý: Các bạn nên dùng thuộc tính CSS width=”100%” và thuộc tính CSS height để tạo sự nổi bật
3. Các thuộc tính thường dùng cho bảng (table)
3.1 Thuộc tính colspan
Thuộc tính này dùng để gộp nhiều cột (từ hai cột trở lên) thành một cột.
Để gộp các cột lại với nhau ta đặt thuộc tính colspan=”số lượng cột muốn gộp” vào trong thẻ <th> hoặc <td>
3.2 Thuộc tính rowspan
Thuộc tính này dùng để gộp nhiều hàng (từ hai hàng trở lên) thành một hàng.
Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan=”số lượng hàng muốn gộp” vào trong thẻ <th> hoặc <td>
3.3 Thuộc tính id
Thuộc tính này tôi đã giới thiệu kỹ ở bài trước nên tôi không nhắc lại ở đây. Ở đây tôi chỉ làm ví dụ cho bạn dễ hiểu.
Nếu các bạn có nhiều loại bảng (table) khác nhau, các bạn muốn các loại bảng đó có kiểu (style) khác nhau thì bạn dùng thuộc tính id.
Để các bạn dễ hiểu tôi sẽ ví dụ như sau: Tôi có 02 loại bảng (table) và tôi muốn 02 loại bảng đó có 02 kiểu (style) khác nhau như sau Bảng 1: màu nền (background-color) là màu vàng (yellow) và chiều rộng (width) là 100% còn Bảng 2: màu nền (background-color) là màu hồng (pink) và chiều rộng (width) là 50% như hình dưới:
Để tạo ra 02 loại bảng có kiểu khác nhau như hình trên tôi sẽ viết code như sau:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: yellow;
}
table#t02 {
width: 50%;
background-color: pink;
}
</style>
</head>
<body>
<h2>Bảng 1 có ký hiệu t01</h2>
<table id="t01">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
<h2>Bảng 2 có ký hiệu t02</h2>
<table id="t02">
<tr>
<th>Tên</th>
<th colspan="2">Số điện thoại</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
4. Thẻ <caption>
Thẻ này dùng để viết tiêu đề hoặc thêm chú thích cho bảng.
Lưu ý: Thẻ <caption> phải được chèn ngay sau thẻ <table>.
Để thêm tiêu đề nằm phía trên bảng, ta sử dụng <caption>Nội dung tiêu đề</caption>
Để thêm chú thích nằm phía dưới bảng, ta sử dụng <caption align=”bottom”>Nội dung chú thích</caption>
5. Các thẻ khác
| Thẻ (tag) | Mô tả (description) |
| <colgroup> | Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng |
| <col> | Chỉ định thuộc tính cột cho mỗi cột trong một phần tử <colgroup> |
| <thead> | Nhóm nội dung phần đầu trong một bảng |
| <tbody> | Nhóm nội dung phần thân trong một bảng |
| <tfoot> | Nhóm nội dung phần chân trong một bảng |
Vì các thẻ này ít dùng nên tôi không viết kỹ ở đây. Nếu các bạn cần dùng đến có thể tham khảo tại trang web http://ift.tt/2lwM7sK
6. Lời cuối bài
Vì bài viết đến đây đã khá dài nên phần bài tập tôi sẽ viết ở bài kế tiếp.
The post [HTML bài 19] Các thẻ và thuộc tính CSS để tạo bảng (table) appeared first on Học online.
from WordPress http://ift.tt/2wTWdwf
via IFTTT
Không có nhận xét nào:
Đăng nhận xét