0

I have a html table with 1st row containing 5 blocks and 2nd row containing 2 blocks.

The 2nd row 2nd block contains 5 radio buttons as well.

I need the 2 row 2nd block to be spanned across 1st rows last 4 blocks

http://jsfiddle.net/8T5RZ/

HTML Code

<table>
    <tr>
        <div class="tabular-div"></div>
        <div class="tabular-div"></div>
        <div class="tabular-div"></div>
        <div class="tabular-div"></div>
        <div class="tabular-div"></div>
    </tr>
    <tr>
        <div class="tabular-div"></div>
        <div class="tabular-div">
            <input type="radio" />
            <input type="radio" />
            <input type="radio" />
        </div>
    </tr>
</table>

css code

.tabular-div {
    background-color:green;
    width:100px;
    height:50px;
    border-style:solid;
    border-width:5px;
    display:inline-block;
}
user1050619
  • 19,822
  • 85
  • 237
  • 413
  • use `` elements and set attribute `colspan="4"`? Or are you trying to avoid `` for some reason? – Nick Dec 10 '13 at 18:23
  • I'm not even sure if it's valid to use `div` in place of `td`. – TreeTree Dec 10 '13 at 18:29
  • 1
    I agree with @TreeTree - if you are going to use `` as your parent element, then keep things consistent and use `` and `
    `. You can achieve this layout both with and without tables, and many people would encourage you to avoid using ``to lay out content.
    – Marc Audet Dec 10 '13 at 18:35
  • 1
    According to the W3C definition, a `` element acts as a container for table cells (`` or ``). A `
    ` should not be the child of `` but of a `` or ``.
    – Nick Dec 10 '13 at 18:38
  • @Nick:Yes, Im trying to avoid ..This is a existing framework and thats how it works(ie; using div within rows)..Trying to integrate a new row within it. – user1050619 Dec 10 '13 at 19:04
  • You *have* to use a `` or `` as the child of a `` element. No way around it. – j08691 Dec 10 '13 at 19:08
  • You may want to review the following/previous discussion: http://stackoverflow.com/questions/2403990/html-colspan-in-css If this is an existing framework, then, there is a problem of a serious nature! – Marc Audet Dec 11 '13 at 02:52
  • If you can't use then use another wrapping div instead of the , e.g.:
    – Matt Lambert Dec 11 '13 at 06:36

0 Answers0