CODEWITHSUNDEEP
html
user1531158
user1531158

Reputation:

specifying different cell widths in html

is there a way, when making a table to make the width of a cell in a new table row less that the with of the one above in here's a simple example with this code both cells will be 100px even though the bottom one one is specified as 50px. I can think of a few over comlicated ways of doing it but is there a simple solution? Thanks

<table>
<tr>
<td width=100 height='20' bgcolor='pink'></td>
</td>
</tr> 
<tr>
<td width='50' height='20'bgcolor=blue>
</td>
</tr>
</table>

Upvotes: 0

Views: 63

Answers (2)

SeanDowney
SeanDowney

Reputation: 17744

You can hack it with css by adding width and changing it's display to block. It's very ugly so I give no warranty (Doesn't work in IE):

<table>
    <tr>
        <td bgcolor="pink" height="20" style="width: 100px;">One</td>
    </tr>  
    <tr>
        <td bgcolor="blue" height="20" style="width: 50px; display:block;">Two</td>
    </tr>
</table>

But as Sable Foste pointed out, you should probably use different elements depending on what you are really trying to do. This is a hack and as such it will probably have weird side effects. A better solution would be to use DIV tags:

<div>
    <div style="background:blue; width: 100px;">One</div>
    <div style="background:pink; width: 50px;">Two</div>
</div>

Upvotes: 0

dreamerkumar
dreamerkumar

Reputation: 1550

No all cell at a given sequence are always of the same widths for all rows in the table. You can have merged cells though. For eg two cells in bottom row can correspond to one cell in top if you use <td colspan=2> in the bottom row.

Upvotes: 1

Related Questions