www.webdeveloper.com
Results 1 to 2 of 2

Thread: HTML Tables - Multiple rows back to one

  1. #1
    Join Date
    Apr 2009
    Posts
    66

    Exclamation HTML Tables - Multiple rows back to one

    Hi everybody,
    I have a problem:
    On my website, to make the display , I use a table, but a one point one of the cells splits in two, and then I want to to become one again , but I d'ont know how:

    Ex:

    HTML Code:
    <table>
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    <tr>
    <td rowspan="3">4</td>
    <td>5</td>
    </tr>
    
    <tr>
    <td>6</td>
    </tr>
    
    <tr>
    <td>7</td>
    <td>8</td>
    </tr>
    
    </table>

    Output

    I want the big space on top of n.8 and n.8 to become ONE cell, not three.

    Can anybody help me?

  2. #2
    Join Date
    Apr 2009
    Posts
    27
    The thing to remember about tables when workign with them is that the amount of columns you create in the first row of that tabe is the amount of columns that wil be in each row in that table. (reason for bolded 'that" is because this can be changed by create tables within tables).

    So looking at your table, your have table that has 3 columns in each row, as defined by the first row. In your second row, you have create a cell that will span 3 rows. That leaves two other cells in each of those rows but you have only stated that there is one other cell, so the browser displays this as there being nothing in those cells not defined.

    So to add the empty space you have to the cell numbered 8, you would want to do the same thing you did to cell 4. Ie)

    Code:
    <table border="1">
    
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     
    <tr>
    <td rowspan="3">4</td>
    <td>5</td>
    <td rowspan="3">6</td>
    </tr>
    
    <tr>
    <td>7</td>
    </tr>
    
    <tr>
    <td>8</td>
    </tr>
    
    </table>
    I only added the border so you can more easily see where each cell is, can be removed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles