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}>
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.
<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
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)
(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>