Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    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.

  • Users who have thanked Lerura for this post:

    CrashNsink (05-19-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks alot for the help

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •