Hi, I try to show map object in table and this is my current result.

But I want to make a table like this, 
How can I do it? 
I am new to working with frontend coding so any advice will be really helpful. 
Here is my apex code
public class InventoryReport{
        
        public Map<String, List<AggregateResult>> allProduct { get; set; }
        
        public InventoryReport(String batchname) {
        allProduct = new Map<String, List<AggregateResult>>();
        AggregateResult[] results = [
            SELECT  VenueBatch__r.Name vnme, VenueBatch__r.BillingStreet vbs, VenueBatch__r.BillingCity vbc, VenueBatch__r.BillingState vbse, VenueBatch__r.BillingPostalCode vbpc,
            CampaignBatch__r.Name cnme,Venue_Kiosk__r.Name vkn, Venue_Kiosk__r.Location_in_Venue__c vklv
 
        FROM Batch__c 
        WHERE Name =:batchname
        GROUP BY VenueBatch__r.Name, VenueBatch__r.BillingStreet, VenueBatch__r.BillingCity, VenueBatch__r.BillingState, VenueBatch__r.BillingPostalCode,
            CampaignBatch__r.Name,Venue_Kiosk__r.Name, Venue_Kiosk__r.Location_in_Venue__c];
        for(AggregateResult result: results) {
            System.Debug(result);
        String center = (String)result.get('vnme')+ ': ' + (String)result.get('vbs') +', '+  (String)result.get('vbc') +', '+ (String)result.get('vbse') +', '+ (String)result.get('vbpc');
        if(!allProduct.containsKey(center)) {
          allProduct.put(center, new AggregateResult[0]);
            System.Debug(allProduct);
            }
            allProduct.get(center).add(result);
          }
        }
    }
 Public Map<String, List<AggregateResult>> getWork_Order(){
        InventoryReport report = new InventoryReport(BatName);
        return report.allProduct;
        //List<Batch__c> results = [SELECT Batch__c.Name, VenueBatch__r.Name, VenueBatch__r.BillingStreet, VenueBatch__r.BillingCity, VenueBatch__r.BillingState, VenueBatch__r.BillingPostalCode, AdvertiserBatch__r.Name, BatchArt__r.Name  FROM Batch__c WHERE Name =: BatName];
        //return results;
       
    }

And here is my Visualforce Code 

<apex:form >
        <style>
       
       
            </style>
      
        <apex:pageBlock title="Work Order" id="Work_Order">
            
       <apex:repeat value="{!Work_Order}" var="key">
            
            <tr>{!key}
                <th align = "center" style ="height:50px; width:200px">{!key}</th>
                
            <th id = "Campaign" style="height:35px; width:100px"> Campaign</th>
            <th id = "Kiosk" style="height:35px; width:100px"> Kiosk</th>
                <th id = "Kiosk Location" style="height:35px; width:100px"> Kiosk Location</th>
            </tr>
            
            <apex:repeat value="{!Work_Order[key]}" var="row">
                
                   <td headers = "Campaign" style="height:50px; width:50px" >{!row['cnme']}</td>
                <td headers = "Kiosk" style="height:50px; width:50px" >{!row['vkn']}</td>
                <td headers = "Kiosk Location" style="height:50px; width:50px" >{!row['vklv']}</td>
                <td class = "break"/>
            </apex:repeat>
            </apex:repeat>
            
        </apex:pageBlock>
            
       
        
            <apex:pageBlock title="ArtWork" id="ArtWork">
        
        
            
        </apex:pageBlock>
       
        
   
    </apex:form>