How to add td rowspans to a table?

Question

I was thinking of a way to make td rowspans with the same items?.. I mean

look at this table below, this how the output looks like, just an example.

how can I make the output look like this, so handling things will be easy..

code here

$get = file_get_contents('URL');
$json = json_decode($get, true);

$items = $json['Catalogue'][0]['Accessories'];
$quantity = $json['Accessories'][1]['Quantity'];   
$price = $json['Accessories'][2]['Price'];
echo 
"<table border=1>
  <tr>
    <th width=200px>Items</th>
    <th width=100px>Quantity</th>       
    <th width=100px>Price</th>
  </tr>
  <tr>
    <td>".$items."</td>
    <td>".$quantity."</td>      
    <td>".$price."</td>
  </tr>  
</table>";

Can you give us a better idea of the `$json` array that you are working with? It doesn't appear there will ever be more than one title row and one body row. — Scopey, Nov 23 '14 at 21:43
it's an api request from a server, so more items bought it will show them as json — fcbrmadrid, Nov 23 '14 at 22:01
But you need to illustrate how you do this. At this point you don't even have a loop in your example so I can't see how you even create the table in the first place. — Scopey, Nov 23 '14 at 22:03

Selvakumar Arumugam · Answer 1 · 2014-12-04T20:54:20.267

You could use rowspan to create the desired table you like. See below demo.

Two things you need to note,

Add rowspan="N" to the starting row where you going to show the TD. N is number of rows to merge
Don't include TD for the next N row. There should be only one TD for the merged row and that TD should have the rowspan.

You need to take care of the above 2 rules in your iterate when rendering the table.

td, th { text-align: center; }

<table border="1">
  <tr>
    <th style="width:200px">Items</th>
    <th style="width:100px">Quantity</th>       
    <th style="width:100px">Price</th>
  </tr>
  <tr>
    <td rowspan="3">Sports Watch</td>
    <td>1</td>      
    <td>$89.99</td>
  </tr>
  <tr>    
    <td>2</td>      
    <td>$179.98</td>
  </tr> 
  <tr>    
    <td>3</td>      
    <td>$267.97</td>
  </tr>
    <tr>
    <td rowspan="2" style="text-align: center;">Portable Digital Camera</td>
    <td>1</td>      
    <td>$196.99</td>
  </tr>
  <tr>
    <td>2</td>      
    <td>$393.98</td>
  </tr> 
</table>

How to add td rowspans to a table?

1 Answers1

Linked