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ứ tự. Ở phần CSS ở ví dụ minh họa bên dưới chúng ta thiết lập thuộc tính width 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 width của thẻ <li> là 100px (bằng 1/3 width 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
			  {
				width: 300px;
			  }

			  /* Canh trái giá trị mỗi cột */
			  ol li
			  {
				float: left;
				width: 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 width của các cột bằng width 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! :lol:

 


One comment

Leave a Reply

Your email address will not be published. Required fields are marked *