/    Sign up×
Community /Pin to ProfileBookmark

Tables cells change size of other table cells

Copy linkTweet thisAlerts:
Apr 19.2007

Hi

I am having a noobie problem which I was hoping somedody could assist me on. Basically I have a table and I defined the width to be 100%. I then made the 1st and second row’s cells to be 60,20 and 20%, followed by the third and 4th rows which are a 100%. So far the table is exactly how I want it and here is the code:

<html>
<body>
<table border=”1″ width=”100″>
<tr border=”1″>
<td width=”60″>ks</td><td width=”20″>ks</td><td width=”20″>ks</td>
</tr>
<tr border=”1″>
<td width=”60″>ks</td><td width=”20″>ks</td><td width=”20″>ks</td>
</tr>
<tr border=”1″>
<td colspan=”100″>ks</td>
</tr>
<tr border=”1″>
<td colspan=”100″>ks</td>
</tr>
</table>
</body>
</html>

Now assume I want to add a 5th row with data cell sizes as 20,60 and 20%. What happens when I add this row is that the cells in the 1st and 2nd row get changed to the same size as the cells in the 5th row. Anybody know how I can make the 1st and 2nd ones stay the same and have the 5th one be 20,60 and 20%? Here is my current code with the 5th cell:
<html>
<body>
<table border=”1″ width=”100″>
<tr border=”1″>
<td width=”60″>ks</td><td width=”20″>ks</td><td width=”20″>ks</td>
</tr>
<tr border=”1″>
<td width=”60″>ks</td><td width=”20″>ks</td><td width=”20″>ks</td>
</tr>
<tr border=”1″>
<td colspan=”100″>ks</td>
</tr>
<tr border=”1″>
<td colspan=”100″>ks</td>
</tr>
<tr>
<td width=”20″>ks</td><td width=”60″>ks</td><td width=”20″>ks</td>
</tr>
</table>
</body>
</html>

I have tried using colspan and also absolute values but it doesn’t give me the exact cell length I want. Please can somebody show me how to do this.

Many thanks

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAApr 19.2007 — Are you using the tables for actual tabular data, or for layout?

Using divs would be MUCH easier:
<i>
</i>.row {width: 100%; clear: left; display: block; border: 1px solid #000;}
.col-twenty {width: 20px; float: left;}
.col-sixty {width: 60px; float: left;}
.col-twenty-p {width: 20%; float: left;}

<i>
</i>&lt;div class="row"&gt;
&lt;div class="col-sixty"&gt;ks&lt;/div&gt;
&lt;div class="col-twenty"&gt;ks&lt;/div&gt;
&lt;div class="col-twenty-p"&gt;ks&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;div class="col-twenty"&gt;ks&lt;/div&gt;
&lt;div class="col-sixty"&gt;ks&lt;/div&gt;
&lt;div class="col-twenty-p"&gt;ks&lt;/div&gt;
&lt;/div&gt;


You may have to play with this a little, to get the spacing right, but it's a start.

KDLA
Copy linkTweet thisAlerts:
@rbudjApr 19.2007 — Yes... <div> would be better if you are using the table for laying out your page but CSS is not an easy task to learn because of the browser wars.

For whatever reason you want to use tables, what you want to do is to nest another table in the 5th row. This table can have it's <td>'s independent of the parent table making it possible to have different widths.

<html>

<body>

<table border="1" width="100">

<tr border="1">

<td width="60">ks</td><td width="20">ks</td><td width="20">ks</td>

</tr>

<tr border="1">

<td width="60">ks</td><td width="20">ks</td><td width="20">ks</td>

</tr>

<tr border="1">

<td colspan="100">ks</td>

</tr>

<tr border="1">

<td colspan="100">ks</td>

</tr>

<tr>

<td colspan="3">

<table width="100%" border="1">

<tr>

<td width="20">ks</td><td width="60">ks</td><td width="20">ks</td>

</tr>

</table>

</table>

</body>

</html>
×

Success!

Help @omegared spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...