Can I render in tabular form with
and
in html?

Question

I want to display data in a tabular form using <ul> and <li> as shown below:

mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata
mydata mydata mydata mydata mydata mydata

I cannot use <table>; I have to use <ul> <li>. Actually the problem is with OpenSocial while rendering data coming from JSON <li repeater=${Exp}>

It depends on the layout of the received lists. Is each row a single `
`? — zneak, Mar 19 '10 at 16:10
Please elaborate. With a table you have `` for the whole thing, `` for each row, and `
` for each column. So now are you trying to do a `
` for each row and a `
` for each column? — Josh Stodola, Mar 19 '10 at 16:17
Also, I am interested in knowing why you cannot use a table structure to display tabular data. — Josh Stodola, Mar 19 '10 at 16:17

score 6 · Answer 1 · answered Mar 19 '10 at 16:10

6

ul { width: 100%;clear:both;height:32px;list-style-type:none;margin:0;padding:0; }
li { width: 20%;height:32px;float: left;list-style-type:none;margin:0;padding:0; }

Where the ul elements represent rows. Put them in a div of the required size.

answered Mar 19 '10 at 16:10

Bryan A

3,598
1
23
29

I m sorry I didnt get it, can u elaborate with an example? – Abhishek Dhote Mar 19 '10 at 16:11
Just create `ul`/`li` the usual way and apply this CSS in a ` – BalusC Mar 19 '10 at 16:28

score 6 · Accepted Answer · answered Mar 19 '10 at 16:13

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

ul{
    margin: 0 auto;
    padding: 0;
}


/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 50px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="list_wrapper">
    <ul class="multiple_columns">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ul>
</div>

<!-- Here's the CSS -->


    </div>
    </form>
</body>
</html>

You can get more information in http://mirificampress.com/permalink/the_amazing_li

score 0 · Answer 3 · answered Mar 19 '10 at 16:13

It's possible. You can use CSS to completely change the formatting of the ul and li elements.

How does the data signify a new line/row? Is each row in the tabular format a new ul? or is it all one 'ul`?

If it's multiple lists, such as:

<ul>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
</ul>
<ul>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
    <li>mydata</li>
</ul>

Then use CSS to style it with set widths on the li tags to form the table-like look. You'll also have to 'reset' all of the normal formatting applied to lists such as margin, padding, etc. Float the list items (or use in-line block for display type, but not as widely supported)

score 0 · Answer 4 · answered Mar 19 '10 at 16:21

(For IE, requires IE 8+)

<style>
ul li { display: table; }
ul li ul { display: table-row; }
ul li ul li { display: table-cell; border: 1px solid gray; }
</style>

<ul><li><ul>
    <li>ONE</li>
    <li>TWO</li>
    <li>THREE</li>
    <li>FOUR</li>
</ul><ul>
    <li>FIVE</li>
    <li>SIX</li>
    <li>SEVEN</li>
    <li>EIGHT</li>
</ul><ul>
    <li>NINE</li>
    <li>TEN</li>
    <li>ELEVEN</li>
    <li>TWELVE</li>
</ul></li></ul>

Can I render in tabular form with and in html?

4 Answers4

Can I render in tabular form with
and
in html?