Thứ Sáu, 11 tháng 3, 2011

Create table using ul - li

Ví dụ về cách dùng ul li để tạo bảng.

HTML



<ul>
<li class="heading"><span>Table header</span></li>
<li class="odd"><span>Row header 1</span></li>
<li><span>Row header 2</span></li>
<li class="odd"><span>Row header 3</span></li>
<li><span>Row header 4</span></li>
<li class="last"><span>Footer</span></li>
</ul>
<ul>
<li class="heading"><span>Column header 1</span></li>
<li class="odd"><span>Lorem ipsum</span></li>
<li><span>Lorem ipsum</span></li>
<li class="odd"><span>Lorem ipsum</span></li>
<li><span>Lorem ipsum</span></li>
<li class="last"><span>&nbsp;</span></li>
</ul>
<ul>
<li class="heading"><span>Column header 2</span></li>
<li class="odd"><span>Dolor sit amet</span></li>
<li><span>Dolor sit amet</span></li>
<li class="odd"><span>Dolor sit amet</span></li>
<li><span>Dolor sit amet</span></li>
<li class="last"><span>&nbsp;</span></li>
</ul>
<ul>
<li class="heading"><span>Column header 3</span></li>
<li class="odd"><span>Lorem ipsum</span></li>
<li><span>Lorem ipsum</span></li>
<li class="odd"><span>Lorem ipsum</span></li>
<li><span>Lorem ipsum</span></li>
<li class="last"><span>Footer data</span></li>
</ul>

CSS



ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
float: left;
}
ul li {
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
background: #87C409;
}
ul li.odd {
background: #76AB07;
}
ul.first-col li {
font-weight: bold;
}
ul li.heading {
font-weight: bold;
background: #5A8406;
margin-top: 5px;
}
ul li span {
padding: 10px;
display: block;
}

/* hightlight */
ul.hightlight li {
background: #699906;
}
ul.hightlight li.heading {
background: #415F03;
margin-top: 0;
padding-top: 5px;
}
ul.hightlight li.odd {
background: #557B04;
}

/* footer */
ul li.last {
background: #5A8406;
border: none;
}
ul.last-col li.last {
text-align: right;
}
ul li.last span {
padding: 5px 10px;
}

Kết quả:


Untitled Document





  • Table header

  • Row header 1

  • Row header 2

  • Row header 3

  • Row header 4

  • Footer



  • Column header 1

  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

  •  



  • Column header 2

  • Dolor sit amet

  • Dolor sit amet

  • Dolor sit amet

  • Dolor sit amet

  •  



  • Column header 3

  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

  • Lorem ipsum

  • Footer data




1 nhận xét:

  1. Anh, em có một vài câu hỏi:
    + Kiểu làm này có khả năng chống tràn dữ liệu (quá dài), không, anh có kinh nghiệm gì trong việc xử lý các bảng hiển thị các chuỗi ký tự liên tiếp .. dài quá không?
    + Các hiệu ứng chuột có vấn đề gì không?
    + Xét toàn diện, anh có thấy giải pháp này tốt hơn dùng table không? Có gì table có mà dùng cách này không có không?

    Trả lờiXóa