How to build a table like structure using UL and li_问答_开发者

How to build a table like structure using UL and li

开发者 https://www.devze.com 2023-03-20 19:05 出处：网络

I want to create a table like structure like the one below label1label2label3 abc123tomo using UL and LI Html elements.I Don\'t want to use HTML tables b开发者_StackOverflowecause there is a button

相关专题：javascript

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