I have issue with positioning some text in a table.
I have two columns that have colspan="4" - these are first column and second column:
It should looks like this:
first column second column some text Value Currency 100 USD 3000 USD
But as I've done it, it looks like that:
first column second column some text Value Currency 100 USD 3000 USD 12000 USD 400 USD
Here is my real code:
<tr> <td colspan="4"> First column </td> <td colspan="4"> Second column </td> </tr> <tr><td colspan="8"> </td></tr> <tr> <td colspan="4"> <?php echo 'Price';?>: </td> <td colspan='1'> <?php echo 'Value';?> </td> <td colspan='1' > <?php echo 'Currency';?> </td> <td colspan='2'> </td> </tr> <tr> <td colspan="4"> </td> <td colspan="1"><?php echo $price; ?></td> <td colspan="1"><?php echo $currency; ?></td> <td colspan="2"> </td> </tr> .pull-right { padding-left: 10px; } 4 Answers
You have a few problems with this code. First, you should always nest your rows within a table. Second, what you have with value and currency is supposed to be a nested table, but you are trying to reproduce that kind of layout without the proper html. Try using the following template to accomplish your goal. I have tested it and it does produce the exact layout you had asked for.
<table> <tr> <td colspan="2"> First Column </td> <td colspan="2"> Second Column </td> </tr> <tr> <td colspan="2"> Some Text </td> <td colspan="2"> <table> <tr> <td> Value </td> <td> Currency </td> </tr> <tr> <td> 100 </td> <td> USD </td> </tr> <tr> <td> 3000 </td> <td> USD </td> </tr> </table> </td> </tr> </table> And here is the result (borders added):
no need to force colspans on this table, it looks like it can simply be done with three td's per tr
heres how I rebuilt the table:
<table> <tr> <td>First column</td> <td>Second column</td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><?php echo 'Price';?>:</td> <td><?php echo 'Value';?></td> <td><?php echo 'Currency';?></td> </tr> <tr> <td>Some Text</td> <td><?php echo $price; ?></td> <td><?php echo $currency; ?></td> </tr> </table> To achieve what I think you meant how it should look like, consider this code:
<table> <tr> <td colspan="4">First Column</td> <td colspan="4">Second Column</td> </tr> <tr> <td rowspan="3" colspan="4">Some Text</td> <td>Value</td><td colspan="3">Currency</td> </tr> <tr> <td>100</td> <td colspan="3">USD</td> </tr> <tr> <td>3000</td> <td colspan="3">USD</td> </tr> </table> But I don't see a sense in the colspan="4" on the first and second column. If you remove all the colspan attributes and just add colspan="2" to the row with "second column" it will look the same and be less complicated.
You need to remove <td colspan="2"> </td> to get the desired results. And instead of using <td colspan='1'> on other columns, use <td colspan='2'> instead.
HTML
<table> <tr> <td colspan="4"> First column </td> <td colspan="4"> Second column </td> </tr> <tr><td colspan="8"> </td></tr> <tr> <td colspan="4"> Price </td> <td colspan='2'> Value </td> <td colspan='2' > Currency </td> </tr> <tr> <td colspan="4"></td> <td colspan="2">Price 1</td> <td colspan="2">Currency 1</td> </tr> </table> PS: You don't need to print those static texts using PHP echo
Change from:
<td colspan="4"> <?php echo 'Price';?>: </td> To:
<td colspan="4"> Price: </td> 
