How to design html timetable

Question

Hi There,

I'm currently working on a project where I need to print out a lesson timetable. Here is a link to the one I have created http://conorhackett.com/tt/.

It works fine now but i'd like to have more control over it. If you look at the code you'll see what I mean. The html/css is very messy.

I've tried to do it with a html table but it didn't look great with all the lines.

Is there any foundations available to me that I could use as a base.?

Any adive greatly appreciated :)

--Conor

Update:

Hi Guys,

I've decided to go back to a html table. I am having extreme difficulty getting my head around the logic used to print the data.

Here is my code for printing the table:

        foreach($bookingList->result_array() as $row)
    {

        $time   = $row['start_time']. ' - ' .$row['end_time'];
        $lesson = $row['lesson_type_name'];
        $client = $row['client_firstname']. ' ' .$row['client_lastname'];
        $horse  = $row['horse_name'];
        $fee    = $row['fee'];


        if(empty($prevLesson) && empty($prevTime))
        {
            echo '1';
            $timeArr    .= $time;
            $lessonArr  .= $lesson;
            $clientArr  .= $client;
            $horseArr   .= $horse;
            $feeArr     .= $fee.'-'.$i;


        }
        elseif($prevLesson == $lesson && $prevTime == $time)
        {               

            echo '3';
            echo '<br/>Previous: '.$prevTime.'++'.$prevLesson.'-'.$i.'<br/>';
            echo '<br/>Current: '.$time.'++'.$lesson.'-'.$i.'<br/>';

            $timeArr    .= $time;
            $lessonArr  .= $lesson;
            $clientArr  .= $client;
            $horseArr   .= $horse;
            $feeArr     .= $fee.'-'.$i;







        }
        else
        {


            echo '3';

            echo '<tr>';

            echo '<td>(3)'. $timeArr .'</td>';
            echo '<td>'. $lessonArr .'</td>';
            echo '<td>'. $clientArr .'</td>';
            echo '<td>'. $horseArr .'</td>';
            echo '<td>'. $feeArr.'</td>';
            echo '<td>'. $i.'</td>';

            echo '</tr>';

            $timeArr = ' ';
            $lessonArr = ' ';
            $clientArr = ' ';
            $horseArr = ' ';
            $feeArr = ' ';
            $optionsArr = ' ';

            $timeArr    .= $time.'<br/>';
            $lessonArr  .= $lesson.'<br/>';
            $clientArr  .= $client.'<br/>';
            $horseArr   .= $horse.'<br/>';
            $feeArr     .= $fee.'-'.$i.'<br/>'; 






        }
        $prevTime = $time;
        $prevLesson =  $lesson;
        $i += 1;
    }

The idea for printing is: Read data from DB and store in a string. when the data changes (time and lesson type) print the stored string, clear it and assign the new (different data) to the print string.

I have put up the code as is.. i'm just so frustrated and tired now. I have spent 3 hourse every evening this week trying to complete and have failed every time.. If you are willing to help me and need more detailed just let me now..

Any help really appreciated.. Thanks.

Answer 1

Give tables another shot, using this:

table {
    border-collapse: collapse;
}

Answer 2

In addition to Amadan's suggestion, consider using colspan and rowspan to make each box take up the space required. Review the source code on these examples to see what I mean.

Answer 3

Soln: After the foreach loop had finished I still had data in the print string. I just echo that after the foreach loop and it solved everything. Thanks for the help input guys.