Search code examples
htmlcssjsonopensocial

Can I render in tabular form with <ul> and <li> in html?


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}>


Solution

  • <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