CODEWITHSUNDEEP
html
Jayy
Jayy

Reputation: 2436

Is it possible to set 4tds in first row and 3 tds in second row

I am new to HTML and CSS designs. I have the below code.

<html>
<body>
    <table width="100%">
        <tr>
            <td width="25%">&#160;</td>
            <td width="25%"></td>
            <td width="25%"></td>
            <td width="25%"></td>
        </tr>
        <tr>
            <td >wqewqehkjfoiw</td>
            <td >abcdefdsfds</td>
            <td >sdfdsfdsfdsf</td>
            <td >dsfsdfdsfdsfsdweqw</td>
        </tr>
        <tr>
            <td width="34%">wqewqehkjfoiw</td>
            <td width="33%">abcdefdsfds</td>
            <td width="33%">sdfdsfdsfdsf</td>
        </tr>
    </table>
</body>
</html>

The first and second rows have 4 tds of equal width. Now on third row, i wanted to have 3tds with equal width. But it is not working with the above code. Pls help

Upvotes: 1

Views: 796

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

The way you tried won’t work because it does not correspond to the HTML table model, or any logical table structure. What browsers do in practice is (as you probably noticed) that they treat the row with three cells as if it had a fourth, empty cell. And then they more or less ignore the conflicting width settings.

Among the possible workarounds, the cleanest (and most common) is probably the use of nested tables. You would replace the last row cells by a single cell that spans all the four columns and contains an inner one-row table. The last row could thus be:

   <tr>
        <td colspan=4>
          <table width=100%>
            <tr>
              <td width="34%">wqewqehkjfoiw</td>
              <td width="33%">abcdefdsfds</td>
              <td width="33%">sdfdsfdsfdsf</td>
            </tr>
          </table>
        </td>
    </tr>

Upvotes: 1

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

<table width="100%" border="5">
        <tr>
            <td colspan="25%">&#160;</td>
            <td colspan="25%"></td>
            <td colspan="25%"></td>
            <td colspan="25%"></td>
        </tr>
        <tr>
            <td colspan="25%">wqewqehkjfoiw</td>
            <td colspan="25%">abcdefdsfds</td>
            <td colspan="25%">sdfdsfdsfdsf</td>
            <td colspan="25%">dsfsdfdsfdsfsdweqw</td>
        </tr>
        <tr>
            <td colspan="34%">wqewqehkjfoiw</td>
            <td colspan="33%">abcdefdsfds</td>
            <td colspan="33%">sdfdsfdsfdsf</td>
        </tr>
    </table>

Upvotes: 2

ori
ori

Reputation: 7847

You should consider using a grid system (like http://960.gs/) instead of tables.

If you still want to use tables, use the colspan attribute:

<html>
<body>
    <table width="100%">
        <tr>
            <td colspan="3" width="25%">&#160;</td>
            <td colspan="3" width="25%"></td>
            <td colspan="3" width="25%"></td>
            <td colspan="3" width="25%"></td>
        </tr>
        <tr>
            <td colspan="4" width="33%">wqewqehkjfoiw</td>
            <td colspan="4" width="33%">>abcdefdsfds</td>
            <td colspan="4" width="33%">>sdfdsfdsfdsf</td>
        </tr>
    </table>
</body>
</html>

The table above has 12 columns, so for N tds, use colspan="12/N".

Upvotes: 3

Related Questions