ansaurus

Question

Using width property for table data cells to change the look of table

Answer 1

A:

because your second row has only 2 columns and the others have 3?

SpliFF 2010-07-27 17:47:22

well that is the reason I mentioned the width to be 50% on both the columns in the second row. While for the other rows I have 33% width. So shouldn't it be ordered?

sai 2010-07-27 17:52:12

Answer 2

A:

The problem is the second row, it should be

<table id='tab' border='2'>
<tr><td width="33%">col 1,1</td><td width="33%">col 1,2</td><td width="33%">col 1,3</td></tr>
<tr><td width="33%">col 2,1</td><td width="33%">col 2,2</td></tr>
<tr><td width="33%">col 3,1</td><td width="33%">col 3,2</td><td width="33%">col 3,3</td></tr>
</table>

Or

<table id='tab' border='2'>
<tr><td width="33%">col 1,1</td><td width="33%">col 1,2</td><td width="33%">col 1,3</td></tr>
<tr><td width="33%">col 2,1</td><td width="66%" colspan="2">col 2,2</td></tr>
<tr><td width="33%">col 3,1</td><td width="33%">col 3,2</td><td width="33%">col 3,3</td></tr>
</table>

cesarnicola 2010-07-27 17:58:44

Great so does that mean the width of first column be always equal in all rows?? or is the sum of width of all rows should be equal for all rows?

sai 2010-07-27 18:03:37

The sum of all columns should be the same (in this case 99%) for all rows.In the first case, the cell 2,3 is empty, in the second case, the cell 2,2 is merged with the 2,3.For further information check: http://www.w3.org/TR/html401/struct/tables.htmlCheers!

cesarnicola 2010-07-27 18:12:43

Ok so my question is if I have a table with varying columns then how would I arrange them?? Say I have 3 rows with 3, 2 and 5 columns then how would I work with that??

sai 2010-07-27 18:22:55

To get the width you have to get the maximum number of columns. Let's say the maximum is 5, then: 100 / 5 = 20%. You can also leave the tds without with ands set a with to the table.

cesarnicola 2010-07-27 18:34:37

thanks a lot !!

sai 2010-07-27 19:59:33

Answer 3

A:

I am interpreting that you want 3 rows, something like this:

| 1,1 | 1,2 | 1,3 |
|  2,1   |   2,2  |
| 3,1 | 3,2 | 3,3 |

Based on that expectation, the only way I know to do this without a nested table is to pretend that you have 4 columns and add a colspan=2 argument to cells (1,2), (2,1), (2,2), and (3,2) as in the following:

<table id='tab' border='2'>
<tr><td width="33%">col 1,1</td><td colspan=2 width="33%">col 1,2</td><td width="33%">col 1,3</td></tr>
<tr><td colspan=2 width="50%">col 2,1</td><td colspan=2 width="50%">col 2,2</td></tr>
<tr><td width="33%">col 3,1</td><td colspan=2 width="33%">col 3,2</td><td width="33%">col 3,3</td></tr>
</table>

To help learn about the various effects that different parameter values have, I recommend the w3schools editable "Try it" pages.

Alex B 2010-07-27 18:14:43

ansaurus

tags:

views:

answers:

Using width property for table data cells to change the look of table

related questions