[eluser]Unknown[/eluser]
Hi,
i need some help with creating a table template. I want to use multiple <p> for some data values i fetch from a mysql database in a single row. I can output the html table in my view but not the way i want it. i know that i can set a template for a table, but i don't know what i have to do, to create my layout. Here ist the code of my table the way i want it to be:
Code:
<html>
<body>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>mytable</title>
</head>
<style type="text/css" media="screen">
p.capitals{
text-transform: uppercase;
line-height: 100%;
text-align: right;
}
table {
border-collapse: collapse;
border-bottom-color: #b7b7b7;
border-bottom-style: solid;
border-bottom-width: 0px;
font-style: normal;
font-weight: normal;
font-size: 13px;
width: 100%;
}
td {
text-align: left;
border-bottom-color: #c9c9c9;
border-bottom-style: solid;
border-bottom-width: 1px;
vertical-align: top;
}
td a {
margin-top: 10px;
padding: 1px 2px;
display: block;
}
td a.delete {
color: #db3514;
}
td a.edit {
color: #77b13e;
}
th {
text-align: left;
}
td .fname{color:#00476c;}
tbody tr:hover {
background-color: #dff3ff;
border-bottom: 3px solid #c9c9c9;
}
.light {
color: #656565;
}
.capitals{
text-transform: uppercase;
}
</style>
<div id="main-content">
<table>
<thead class="capitals">
<tr><th>Heading</th><th>Heading</th><th>Status</th><th>Date</th><th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><p class="fname bold">Joe Doe</p><p class="light">10 a</p></td>
<td><p class="bold">History</p><p class="light">Teacher Name</p></td>
<td><p class="bold">a status</p><p class="light">90 min</p></td>
<td><p class="bold">22.Dec 2010</p></td>
<td><a class="delete" href="#">delete</a><a class="edit" href="#">edit</a></td>
</tr>
<tr>
<td><p class="fname bold">Joe Doe</p><p class="light">10 a</p></td>
<td><p class="bold">History</p><p class="light">Teacher Name</p></td>
<td><p class="bold">a status</p><p class="light">90 min</p></td>
<td><p class="bold">22.Dec 2010</p></td>
<td><a class="delete" href="#">delete</a><a class="edit" href="#">edit</a></td>
</tr>
<tr>
<td><p class="fname bold">Joe Doe</p><p class="light">10 a</p></td>
<td><p class="bold">History</p><p class="light">Teacher Name</p></td>
<td><p class="bold">a status</p><p class="light">90 min</p></td>
<td><p class="bold">22.Dec 2010</p></td>
<td><a class="delete" href="#">delete</a><a class="edit" href="#">edit</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
thanks for helping me out!