01/10/2018, 17:32
Dùng html và css để chia dữ liệu thành nhiều cột
Ở ví dụ bên dưới, dùng thẻ <ol>, <li> và CSS để chia dữ liệu từ Item 1 đến Item 5 thành 3 cột như bên dưới: 1. Item 1 2. Item 2 3. Item 3 4. Item 4 5. Item 5 Như chúng ta đã biết thẻ <ol> và <li> kết hợp với nhau để tạo ra một danh sách có thứ ...
Ở ví dụ bên dưới, dùng thẻ <ol>, <li> và CSS để chia dữ liệu từ Item 1 đến Item 5 thành 3 cột như bên dưới:
1. Item 1 2. Item 2 3. Item 3 4. Item 4 5. Item 5
Như chúng ta đã biết thẻ <ol> và <li> kết hợp với nhau để tạo ra một danh sách có thứ tự. Ở phần CSS ở ví dụ minh họa bên dưới chúng ta thiết lập thuộc tính awidth của thẻ <ol> là 300px. Để tạo thành 3 cột dữ liệu như trên thì chúng ta thiết lập thuộc tính awidth của thẻ <li> là 100px (bằng 1/3 awidth của <ol>).
Ví dụ minh họa:
<html>
<head>
<style type="text/css">
/* tổng chiều dài của 3 cột */
ol
{
awidth: 300px;
}
/* Canh trái giá trị mỗi cột */
ol li
{
float: left;
awidth: 100px;
}
div.wrapper
{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<ol>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ol>
<br />
</div>
</body>
</html>
Tương tự, bạn có thể dùng thẻ <ul> và <li>.
Ngoài ra, bạn có thể linh động chia dữ liệu thành 1, 2, 3, 4, … n cột tùy ý. Bạn chỉ cần thiết lập tổng awidth của các cột bằng awidth của thẻ <ol> hoặc <ul> chứa các cột đó.
Góc Kinh Nghiệm chúc các bạn thành công! 
