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