Login

12-26-2010, 08:24 AM

[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:
&lt;html&gt;

&lt;body&gt;

&lt;head&gt;

    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;

    &lt;title&gt;mytable&lt;/title&gt;

&lt;/head&gt;

&lt;style type="text/css" media="screen"&gt;

    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;

    }

&lt;/style&gt;

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

&lt;/body&gt;

&lt;/html&gt;

thanks for helping me out!

12-27-2010, 03:06 PM

[eluser]Unknown[/eluser]
UPDATE: OK, got it working.