How to build a table like structure using UL and li
I want to create a table like structure like the one below
label1 label2 label3
abc 123 tomo
using UL and LI Html elements.I Don't want to use HTML tables b开发者_StackOverflowecause there is a button which says add new line which adds a new line at runtime. Also I will make the whole list to be rearrangeable buy providing a rearrangeable button.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-table">
<ul class="d-column">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="d-row">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</body>
</html>
CSS
.d-table {
min-width: 300px;
min-height: 300px;
background: lightgrey;
display: block;
width: 1px solid red;
}
.d-table ul {
list-style-type: none;
}
.d-column li {
padding: 0px;
display: inline-block;
border: 1px solid blue;
background: grey;
width: 50px;
height: 20px;
}
.d-row li {
padding: 0px;
display: inline-block;
background: lightgrey;
border: 1px solid red;
width: 50px;
height: 20px;
}
In JavaScript you can have a for loop to add more rows. This is just the HTML and CSS.
Google for grids without tables.
The idea is to use css styles to layout containers/controls in grid structure.
some links:
http://www.nd.edu/~tlehman/presentations/css_magic/grid/grid1.shtml
http://www.alistapart.com/articles/practicalcss/
http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx
you should use table in order to create tables :)
HEre you have a function to add rows to the table
/*
Add a new table row to the bottom of the table
*/
function addTableRow(jQtable){
jQtable.each(function(){
var $table = $(this);
// Number of td's in the last table row
var n = $('tr:last td', this).length;
var tds = '<tr>';
for(var i = 0; i < n; i++){
tds += '<td> </td>';
}
tds += '</tr>';
if($('tbody', this).length > 0){
$('tbody', this).append(tds);
}else {
$(this).append(tds);
}
});
}
you could see it here: http://snipplr.com/view/13326/add-table-row-to-the-bottom-of-a-table/
You can float each ul to the left, float:left
加载中,请稍侯......
精彩评论