)
)
Người Viết : ViKiMi Editor
Hướng dẫn thiết kế HTML Tables cho một Website hiển thị nhiều thông tin được nhóm lại
Khi bạn hiển thị các dữ liệu thông tin trên một bảng điều này thật hữu ích. Các thông tin luôn được sắp xếp có khoa học, có thể chia thành các hàng các cột với những Tiêu đề giúp phân loại các nhóm dữ liệu. Hiển thị dữ liệu dạng Bảng gần như là một yêu cầu mà bạn không thể từ bỏ. Đây là một cách làm khoa học để đưa thông tin tới khách hàng nhanh nhất.
Dữ liệu được sắp xếp vào các bảng ( / Table ) thật hữu ích.
Nếu bạn vô tình hỏi rằng sắp xếp dữ liệu vào Bảng có lỗi thời hay không?
+ Câu trả lời chắc chắn là không.
+ Tất cả mọi thông tin khi được sắp xếp vào các Bảng ( / Table ) luôn mang tính chất khoa học cao cho mọi lĩnh vực đời sống.
Nếu bạn muốn hỏi liệu hiển thị dữ liệu bằng các Bảng ( / Table ) có bị xấu hoặc không thích nghi kịp trên các thiết bị khác nhau?
+ Câu trả lời chắc chắn là không.
+ Bạn có thể sử dụng các ngôn ngữ khác nhau giúp HTML Tables hiển thị tốt hơn trên giao diện người dùng. Và điều này luôn như vậy trên hầu hết các Website, nhờ vậy các thông tin sẽ luôn luôn đạt yêu cầu hiển thị cách đẹp mắt nhất có thể.
Để hiều về cách sử dụng HTML Tables chúng ta sẽ xem ví dụ dưới.
HTML Tables – Bảng HTML cho phép sắp xếp dữ liệu thành hàng và cột.
Một bảng trong HTML bao gồm các ô bảng bên trong các hàng và cột.
EXAMPLE ::
<table style="width:100%"> <caption> BẢNG LƯƠNG THÁNG </caption> <tr> <th> Month </th> <th> Salary </th> </tr> <tr> <td> January </td> <td> $1000 </td> </tr> <tr> <td> February </td> <td> $5000 </td> </tr> </table>
Hình Ảnh :
A ] CÁC THÀNH PHẦN CẤU TẠO CỦA HTML TABLES
1 ) Table Caption – Chú Thích Bảng
Khi thiết kế Bảng dữ liệu, Bạn có thể thêm chú thích làm tiêu đề cho toàn bộ bảng. Điều này giúp dễ nắm bắt thông tin dữ liệu hiển thị của bảng.
Để thêm chú thích vào bảng, hãy sử dụng thẻ <caption>
2 ) Table Rows – Hàng của Table
Một Bảng dữ liệu sẽ bao gồm hàng để chứa các ô thông tin dữ liệu.
Mỗi hàng trong bảng bắt đầu bằng thẻ <tr> và kết thúc bằng thẻ </tr>.
tr là viết tắt của Table Row.
3 ) Table Cells – Ô của Table
Các thông tin dữ liệu cần hiển thị sẽ luôn nằm trong các ô Bảng.
Mỗi ô của bảng được xác định bằng thẻ <td> và </td>.
td là viết tắt của Table Data.
Mọi thứ giữa <td> và </td> đều là nội dung của ô bảng.
4 ) Table Headers – Tiêu đề của Bảng
Bảng thông tin muốn dễ hiểu bắt buộc phải sử dụng các Tiêu đề. Tiêu đề sẽ giúp dễ hiểu về các thông tin liên quan.
Chúng ta gọi đó là ô tiêu đề bảng.
Trong những trường hợp đó, hãy sử dụng thẻ <th> thay vì thẻ <td>.
th là viết tắt của Table Header.
B ] CÁCH THIẾT KẾ HTML TABLES
1 ) HTML Table Sizes – Cách thiết kế kích thước Bảng
Các bảng HTML có thể có kích thước khác nhau cho từng cột, hàng hoặc toàn bộ bảng.
Sử dụng CSS style với thuộc tính width hoặc height để chỉ định kích thước của bảng, hàng hoặc cột.
<table style="width:100%" >
<tr>
<th style="width:70%" > Firstname </th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:100px" >
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Hình Ảnh Kết Quả :
2 ) HTML Table Styling – Thiết kế bằng CSS Style
Bạn có thể Sử dụng CSS Style để Thiết Kế bảng HTML.
Thông thường sẽ tạo kiểu hiển thị cho hàng, cột chẵn và lẻ trong bảng HTML.
Nhờ vậy Bảng HTML sẽ hiển thị đẹp mắt hơn.
Để tạo kiểu cho mọi thành phần hàng, cột của bảng, hãy sử dụng bộ chọn :nth-child(even) và :nth-child(odd) như thế này:
HTML Table – Zebra Stripes
Tạo Kiểu cho Hàng Chẵn Và Lẻ
<style>
tr:nth-child(even) {
background-color: #D6EEEE;
}
tr:nth-child(odd) {
background-color: #D6EEGG;
}
</style>
Hoặc :
Tạo Kiểu Cho Cột Chẵn Và Lẻ
<style>
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
th:nth-child(odd),td:nth-child(odd) {
background-color: #D6GGGG;
}
</style>
Hoặc :
Tạo Kiểu cho cả Hàng Và Cột của Bảng HTML
<style>
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
</style>
2-1 ) Tạo Viền cho Bảng HTML :
Có thể Tạo Viền cho Bảng, Các Thành Phần Bảng bằng CSS :
<style>
table, th, td {
/* Đường viền là màu đen */
border: 1px solid black;
/* Tạo đường viền Bảng Thu gọn */
border-collapse: collapse;
/* Bo góc cho đường viền bảng */
border-radius: 10px;
/* Tạo Kiểu đường viền Bảng */
border-style: dotted;
}
</style>
Hình Ảnh Kết Quả :
3 ) Tạo Tiêu Đề cho nhiều Cột hoặc nhiều Hàng
+ Tiêu đề cho nhiều cột
Bạn có thể có tiêu đề trải dài trên hai hoặc nhiều cột.
Để thực hiện việc này, hãy sử dụng thuộc tính colspan trên phần tử <th>
<table style="width:100%">
<tr>
<th colspan="2"> Name (FirstName & 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>
Hình Ảnh Kết Quả :
+ Tạo Tiêu Đề cho nhiều Hàng
HTML Table – Rowspan
Để tạo một ô trải rộng trên nhiều hàng, hãy sử dụng thuộc tính rowpan
<table style="width:100%">
<tr>
<th> Name (FirstName & LastName) </th>
<td> Smith </td>
</tr>
<tr>
<th rowspan="2"> Phone </th>
<td> 01685555 </td>
</tr>
<tr>
<td> 01654444 </td>
</tr>
</table>
Hình Ảnh Kết Quả :
+ Kết hợp trên nhiều Hàng Và Cột
<table style="width:100%">
<tr>
<th>Name</th>
<td>Jill</td>
<td>Nguyễn</td>
</tr>
<tr>
<th>Address</th>
<td>J City</td>
<td>Việt Nam</td>
</tr>
<tr>
<th rowspan="2" colspan="2"> Phone </th>
<td> 016855555 </td>
</tr>
<tr>
<td> 016433333 </td>
</tr>
<tr>
<th>Jobs</th>
<td>Worker</td>
<td>Farmer</td>
</tr>
</table>
Hình Ảnh Kết Quả :
4 ) HTML Table Colgroup – Tạo kiểu cho các nhóm Hàng và Cột của Bảng HTML
Phần tử <colgroup> được sử dụng để tạo kiểu cho các cột cụ thể của bảng HTML.
>>> Hãy kết hợp sử dụng các phần tử <colgroup> , <col> và thuộc tính span , style để giúp tạo kiểu cho nhóm Cột mà bạn muốn thiết kế.
+ Phần tử <colgroup> được sử dụng làm vùng chứa các thông số kỹ thuật của cột.
+ Mỗi nhóm cột được chỉ định bằng phần tử <col>.
+ Thuộc tính span chỉ định số lượng cột.
+ Thuộc tính style chỉ định kiểu cho các cột :
Chỉ áp dụng được với thuộc tính width , visibility , background, border
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
LƯU Ý : Bạn có thể ẩn các cột bằng thuộc tính visibility: collapse . Điều này cho phép bạn ẩn đi những cột không cần thiết hoặc mục đích ẩn thông tin.
Thiết kế HTML Tables luôn mang lại lợi ích cho các Website thông tin.
