With the below code, I get the columns size being different (esp the last column is small) I would like to have all the three columns to be of same size.Thanks.
<html> <body> <h4>Two rows and three columns:</h4> <table border="1" width="100%" height="400" align="top"> <tr> <td> <table width="100%" border="2" height ="100" align="top"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>1-3</td> <td>1-4</td> </tr> </table> </td> <td> <table width="100%" border="2" height ="100" align="top"> <tr> <td>2-1</td> <td>2-2</td> </tr> <tr> <td>2-3</td> <td>2-4</td> </tr> </table> <td> <table width="100%" border="2" height ="100" align="top"> <tr> <td>3-1</td> </tr> <tr> <td>3-2</td> </tr> </table> </td> </tr> <tr> </td> <td> <table width="100%" border="2" height ="100"> <tr> <td>4-1</td> <td>4-2</td> </tr> <tr> <td>4-3</td> <td>4-4</td> </tr> </table> <td> <table width="100%" border="2" height ="100"> <tr> <td>5-1</td> <td>5-2</td> </tr> <tr> <td>5-3</td> <td>5-4</td> </tr> </table> <td> <table width="100%" border="2" height ="100"> <tr> <td>6-1</td> </tr> <tr> <td>6-3</td> </tr> </table> </body> </html> 5 Answers
Insert a colgroup element in your table:
<table> <colgroup> <col /> <col /> <col /> </colgroup> <tr> ... </tr> </table> Few fixes to consider
<table> <!- set table layout to fixed and width to full width --> <colgroup> <col /> <!- takes the remaining space --> <col /> <!- or use 33.3333% for all instead if you want to occupy full width --> <col /> </colgroup> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> ... </table> Just set each <td> of the first level table to width="33%"
You could try to set your the width of your columns to be absolute, instead of relative:
< TD WIDTH=200> Try looking at this link.
An alternative is to set the css width of the table to 100% e.g.
table { width:100% } The cells should inherit this and be of equal size. That way you are more flexible to different numbers of columns.
