How to position some columns in table - html

Question

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 class="empty"><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
<?php echo 'Price';?>:
</td>
<td colspan='1' style="text-align: right">
<?php echo 'Value';?>
</td>
<td style="padding-left:10px" colspan='1' >
<?php echo 'Currency';?>
</td>
<td colspan='2'> </td>
</tr>
<tr>
<td colspan="4">
</td>
<td colspan="1" style="text-align: right"><?php echo $price; ?></td>
<td colspan="1" class="pull-right"><?php echo $currency; ?></td>
<td colspan="2" style="height:10px;"> </td>
</tr>
.pull-right {
padding-left: 10px;
}

Answer 1

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" style="text-align: center;">
First Column
</td>
<td colspan="2" style="text-align: center;">
Second Column
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align:top;text-align: center;">
Some Text
</td>
<td colspan="2">
<table style="text-align: center; width: 100%">
<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):

Answer 2

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 class="empty">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><?php echo 'Price';?>:</td>
<td style="text-align: right;"><?php echo 'Value';?></td>
<td style="padding-left:10px;"><?php echo 'Currency';?></td>
</tr>
<tr>
<td style="height:10px;">Some Text</td>
<td style="text-align: right;"><?php echo $price; ?></td>
<td style="padding-left:10px;"><?php echo $currency; ?></td>
</tr>
</table>

Answer 3

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" style="vertical-align:top;">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.

Answer 4

You need to remove <td colspan="2" style="height:10px;"> </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 class="empty"><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
Price
</td>
<td colspan='2' style="text-align: right">
Value
</td>
<td style="padding-left:10px" colspan='2' >
Currency
</td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2" style="text-align: right">Price 1</td>
<td colspan="2" class="pull-right">Currency 1</td>
</tr>
</table>
Working Fiddle
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>