CODEWITHSUNDEEP
htmlcsshtml-table
TrippedStackers
TrippedStackers

Reputation: 423

Table row span cell span

This is an assignment I need help with. I hate tables as is, but this is what it says:

"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."

My code: 

<table>
    <tr>
        <th>
            <h3>TEST</h3>
        </th>
    </tr>
    <th rowspan="2"></th>
    <td>Something here !</td>
</tr>
</table>

Just wanted to verify if I did this correctly? Here's the full code:

http://jsfiddle.net/4jzUc/

also, it's supposed to look like this: http://screencloud.net/v/aA5Y

Upvotes: 1

Views: 10089

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.

The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:

<table>
  <tr><td colspan=2>Real estate name
  <tr><td>A table cell <td>Another table cell
</table>

You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).

As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).

Upvotes: 1

The Jonas Persson
The Jonas Persson

Reputation: 1746

You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for. 

<table>
    <tr>
       <th colspan="2">
           Title
       </th>  
    </tr>
    <tr>
       <td>First cell</td>
    </tr>                       
    <tr>
       <td>Second cell</td>
    </tr>
</table>

Upvotes: 2

MaxOvrdrv
MaxOvrdrv

Reputation: 1916

correct code:

<table>
   <tr>
       <th>
           <h3>TEST</h3>
       </th>
       <th rowspan="2">RowSpan2!</th>   
   </tr>
   <tr>
       <td>Something here !</td>
   </tr>                       
   <tr>
       <td>Something Else !</td>
   </tr>
</table>

Upvotes: -1

Related Questions