CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Table formatting issues =( (http://www.codingforums.com/showthread.php?t=261908)

CrashNsink 05-19-2012 09:41 AM

Table formatting issues =(
 
The following is my current table layout -

Code:

<table>
                        <thead>
                        <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Description</th>
                        </tr>
                        </thead>
                       
                        <tbody>
                        <tr>
                                <td>Oct 31</td>
                                <td>6:00pm-8.00pm</td>
                                <td>Spooky stories read aloud (for kids 2-12)</td>
                        </tr>
                       
                        <tr>
                                <td rowspan="2">Nov 2</td>
                                <td>12.30p-1.30p </td>
                                <td>7.00p-8.00p</td>
                                <td rowspan="2">Sam Miller reads from <i>Lunchtime Chronicles</i> </td>
                        </tr>
                       
                        <tr>
                                <td>Nov 3</td>
                                <td>5.30p-7.00p</td>
                                <td>Cookbook Reading Club monthly discussion</td>
                        </tr>
                       
                        <tr>
                                <td>Nov 4</td>
                                <td>5.30am-6.45am</td>
                                <td>"Fitness in the Stacks" Pilates class</td>
                        </tr>
                       
                </tbody>
                </table>

I need to achieve something like this, but I can't do it :(

Thanks for any help rendered :thumbsup:

Lerura 05-19-2012 10:28 AM

rowspan spans the cell through 2 <tr>s.
And not as you are attempting: make 2 rows with the same <tr>
with
Code:

<tr>
<td rowspan="2">Nov 2</td>
<td>12.30p-1.30p </td>
<td>7.00p-8.00p</td>
<td rowspan="2">Sam Miller reads from <i>Lunchtime Chronicles</i> </td>
</tr>

the bottom half of the first and fourth <td> will be expanded to the third <tr>
and the <td>s defined in the third <tr> will then occupy the columns that are not already ocuppied by the expanded <td>s from the second <tr>.

The code is easyly fixed by moving the third cell to it's own <tr>
Code:

<table>
                        <thead>
                        <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Description</th>
                        </tr>
                        </thead>
                       
                        <tbody>
                        <tr>
                                <td>Oct 31</td>
                                <td>6:00pm-8.00pm</td>
                                <td>Spooky stories read aloud (for kids 2-12)</td>
                        </tr>
                       
                        <tr>
                                <td rowspan="2">Nov 2</td>
                                <td>12.30p-1.30p </td>
                                <td rowspan="2">Sam Miller reads from <i>Lunchtime Chronicles</i> </td>
                        </tr>
                        <tr>

                                <td>7.00p-8.00p</td>

                        </tr>
                       
                        <tr>
                                <td>Nov 3</td>
                                <td>5.30p-7.00p</td>
                                <td>Cookbook Reading Club monthly discussion</td>
                        </tr>
                       
                        <tr>
                                <td>Nov 4</td>
                                <td>5.30am-6.45am</td>
                                <td>"Fitness in the Stacks" Pilates class</td>
                        </tr>
                       
                </tbody>
                </table>

the first and column of this new <tr> is already occupied by the spanned <td>s from the row above, so in this <tr> you only have to define what should be in the second <td> / column.

CrashNsink 05-19-2012 01:34 PM

Thanks alot for the help ;)

The way rows interact with one another is kinda confusing ..


All times are GMT +1. The time now is 10:50 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.