fcbrmadrid
fcbrmadrid

Reputation: 99

How to add td rowspans to a table?

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.

img

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

img


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>"; 

Upvotes: 2

Views: 118

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Two things you need to note,

  1. Add rowspan="N" to the starting row where you going to show the TD. N is number of rows to merge
  2. 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>

Upvotes: 2

Related Questions