Advanced data presentation tricks

I am trying to do some dynamic layout of data with css. What I want to achieve is being able to switch between a sort of thumbnail-view and a more or less standard table-view of the same dataset (see attached code for what I have come up with so far, it still needs some tweeking, but you get the idea).
In principle, as I understand css, I should be able to present the data in virtually any form I choose, but with my feeble beginner css-skills I don't know the best strategy of going about this. Maybe it is not really possible (or practical) this way?

(Also, I appreciate any pointers making the css better).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
//---------------------------------------------------------------
//x.xtoggleView
//-------------------------
//Purpose:To toggle data view layout between tables and panels
//Input:
//-
//Output:
//-
//
function toggleView(viewtype) {
var inc=0;
while(document.getElementById("dataview"+inc)){
document.getElementById("dataview" + inc).className = 'datalayout ' + viewtype;
inc++;
}
}
</script>

border-width: 2px;
border-top: solid #dddddd;
border-right: none;
border-bottom: solid #dddddd;
border-left: none;

font-size: 7pt;

}
div.datalayout.panelview img.logo {
float: left;
margin-right: 15px;
margin-bottom: 10px;
width:100px;
height:100px;
}
div.datalayout.panelview img.status {
margin-bottom: 10px;
}
div.datalayout.panelview .heading {
font-size: 12pt;
font-weight: bold;
}
div.datalayout.panelview .fieldname {
color: orange;
font-weight: bold;
}
div.datalayout.panelview span{
display: block;
}

div.datalayout.tableview {
font-size: 7pt;
padding: 0px 0px 5px 0px;
width: 100%;
}
div.datalayout.tableview img.logo {
width:16px;
height:16px;
}
div.datalayout.tableview img.status {
width:16px;
height:16px;
}
div.datalayout.tableview .heading {
font-size: 12pt;
font-weight: bold;
}
div.datalayout.tableview .fieldname {
color: orange;
font-weight: bold;
}
div.datalayout.tableview span{
}

</style>

</head>

<body>

<td class="toolmenu">
<a href="javascript:toggleView('panelview');">Panel</a>
 
<a href="javascript:toggleView('tableview');">Table</a>
</td>
</tr>
</tbody>
</table>

<div class="datalayout tableview" id="dataview0">
<img class="logo" src="test.gif">
<img class="status" src="test.gif">
<img class="status" src="test.gif">
Title Here
Description: Text here
Size: Text here
Notes: Text here
</div>

<div class="datalayout tableview" id="dataview1">
<img class="logo" src="test.gif">
<img class="status" src="test.gif">
<img class="status" src="test.gif">
Title Here
Description: Text here
Size: Text here
Notes: Text here
</div>

<div class="datalayout tableview" id="dataview2">
<img class="logo" src="test.gif">
<img class="status" src="test.gif">
<img class="status" src="test.gif">
Title Here
Description: Text here
Size: Text here
Notes: Text here
</div>

<div class="datalayout tableview" id="dataview3">
<img class="logo" src="test.gif">
<img class="status" src="test.gif">
<img class="status" src="test.gif">
Title Here
Description: Text here
Size: Text here
Notes: Text here
</div>

</body>
</html>

Advanced data presentation tricks

Tables vs. Thumbnails

cyberbunny

Nick_W

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week