CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN
Bảng trong HTML
HTML5
Hướng dẫn HTML
- Bắt đầu với HTML
- Giới thiệu về HTML
- Cách chỉnh sửa HTML
- Một số ví dụ về HTML cơ bản
- Tìm hiểu các phần tử trong HTML
- Thuộc tính trong HTML
- Thẻ Heading trong HTML
- Văn bản trong HTML
- Thuộc tính Style trong HTML
- Định dạng văn bản trong HTML
- Thuộc tính Colors trong HTML
- Thẻ trích dẫn trong HTML
- Comment trong HTML
- Các thuộc tính CSS trong HTML
- Liên kết trong HTML
- Hình ảnh trong HTML
- Bảng trong HTML
- Danh sách trong HTML
- Phần tử block và inline trong HTML
- Thuộc tính Class trong HTML
- Thẻ iframe trong HTML
- JavaScript trong HTML
- Đường dẫn file trong HTML
- Phần head trong HTML
- Layouts trong HTML
- Thiết kế web Responsive với HTML
- Phần tử mã máy tính trong HTML
- Các đối tượng trong HTML
- Các ký tự trong HTML
- Mã hóa (bộ ký tự) trong HTML
- Trình định vị tài nguyên đồng nhất HTML
- Tìm hiểu HTML và XHTML
Biểu mẫu HTML
- Biểu mẫu trong HTML
- Các phần tử form trong HTML
- Các kiểu nhập HTML
- Các thuộc tính nhập vào trong HTML
Đồ họa HTML
Phương tiện ghi HTML
- Tìm hiểu multimedia trong HTML
- Tìm hiểu video trong HTML5
- Tìm hiểu audio trong HTML5
- Tìm hiểu các Plug-ins trong HTML5
- Tìm hiểu YouTube Videos trong HTML
HTML APIs
- Vị trí địa lý trong HTML5
- Tính năng kéo thả trong HTML5
- Bộ nhớ cục bộ trong HTML5
- Web Workers trong HTML5
- Sự kiện Server-Sent trong HTML5
Tài nguyên HTML
- Tham khảo phần tử HTML
- Tham khảo thuộc tính HTML
- Thuộc tính toàn cục trong HTML
- Các thuộc tính sự kiện trong HTML
- Tên màu sắc trong HTML
- Tài nguyên Canvas trong HTML
- Các bộ kí tự trong HTML
- Thao khảo Audio và Video trong HTML
- Các phần tử HTML và DOCTYPES hợp lệ
- Mã hóa URL trong HTML
- Mã ngôn ngữ trong HTML
- Mã ISO của quốc gia trong HTML
- Thông báo trạng thái giao thức HTTP
- Các phương thức HTTP: GET vs POST
- Chuyển đổi từ pixels sang ems
- Tổng hợp các phím tắt
Định nghĩa bảng HTML
Bảng HTML được định nghĩa với thẻ <table>. Mỗi hàng của bảng được định nghĩa bằng thẻ <tr>. Tiêu đề bảng được định nghĩa bằng thẻ <th>. Mặc định các tiêu đề bảng được in đậm và căn giữa. Một bảng dữ liệu / ô được định nghĩa bằng thẻ <td>.
Ví dụ:
<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Hiển thị trên trình duyệt
Firstname | Lastname | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Lưu ý: 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ảng trong HTML – thêm Border
Nếu bạn không khai báo đường viền cho bảng, nó sẽ được hiển thị mà không có đường viền.
Thuộc tính border được thiết lập bằng cách sử dụng CSS:
table, th, td {
border: 1px solid black;
}
Bạn nên khai báo thuộc tính border cho cả bảng và các ô của bảng.
Bảng trong HTML – Collapsed Borders
Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Bảng trong HTML – thêm Padding cho ô
Thuộc tính padding cho ô xác định khoảng cách giữa nội dung trong ô và đường viền bao quanh. Nếu bạn không khai báo padding, các ô trong bảng sẽ hiển thị mà không có padding.
th, td {
padding: 15px;
}
Bảng trong HTML – căn trái tiêu đề
Mặc định các tiêu đề bảng được in đậm và căn giữa. Để căn trái tiêu đề của bảng, sử dụng thuộc tính text-align như sau:
th {
text-align: left;
}
Bảng trong HTML – thêm Border Spacing
Border Spacing xác định khoảng cách giữa các ô. Để đặt khoảng cách đường viền cho bảng, sử dụng thuộc tính border-spacing:
table {
border-spacing: 5px;
}
Lưu ý: nếu bảng sử dụng collapsed borders, thuộc tính border-spacing sẽ không có hiệu lực.
Bảng trong HTML – các ô mở rộng nhiều cột
Sử dụng thuộc tính colspan để tạo một ô dài hơn một cột:
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Bảng trong HTML – các ô được kéo dài nhiều hàng
Sử dụng thuộc tính rowspan để tạo một ô dài hơn một hàng:
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Bảng trong HTML – thêm chú thích
Sử dụng thẻ <caption> để thêm chú thích vào một bảng:
<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Lưu ý: Thẻ <caption> phải được chèn ngay sau thẻ <table>.
Định dạng đặc biệt cho bảng
Thêm một thuộc tính id để định nghĩa định dạng đặc biệt cho bảng:
<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Và bạn có thể định nghĩa một định dạng đặc biệt cho bảng này:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Một số style khác có thể thêm vào:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Tổng kết
- Sử dụng thẻ <table> để xác định một bảng
- Sử dụng thẻ <tr> để xác định một hàng của bảng
- Sử dụng thẻ <td> để xác định dữ liệu bảng
- Sử dụng thẻ <th> để xác định một tiêu đề bảng
- Sử dụng thẻ <caption> để xác định một chú thích bảng
- Sử dụng thuộc tính border để xác định đường viền
- Sử dụng thuộc tính border-collapse để thu gọn các đường viền của ô
- Sử dụng thuộc tính padding để thêm khoảng cách vào các ô
- Sử dụng thuộc tính text-align để căn chỉnh văn bản trong ô
- Sử dụng thuộc tính border-spacing để thiết lập khoảng cách giữa các ô
- Sử dụng thuộc tính colspan để tạo một ô dài nhiều cột
- Sử dụng thuộc tính rowspan để tạo một ô dài nhiều hàng
- Sử dụng thuộc tính id để xác định một bảng đặc biệt
Thẻ Table trong HTML
Thẻ | Mô tả |
---|---|
<table> | định nghĩa một bảng |
<th> | định nghĩa ô tiêu đề trong bảng |
<tr> | định nghĩa hàng trong bảng |
<td> | định nghĩa ô trong bảng |
<caption> | xác định chú thích bảng |
<colgroup> | chỉ định nhóm của một hoặc nhiều cột trong định dạng của bảng |
<col> | chỉ định thuộc tính cột cho mỗi cột trong một phần tử <colgroup> |
<thead> | các nhóm nội dung tiêu đề trong một bảng |
<tbody> | nhóm nội dung phần thân trong một bảng |
<tfoot> | các nhóm nội dung chân trang trong bảng |