ARRAY to TABLE With multiple columns of grouped data

[sniesler08]

right now it displays the first column of the array as a header for each foreach loop then i've got the data displayed under each header and it has 4 columns or a number of my choosing with data displayed under the Table Headings. I am trying to make it display 4 or so columns but with the each group having a certain number of grouped table (data/header) in each column. a different amount for each column that i can choose

 

IF Possible i'd like the choice of being able to remove the headers eg. Z when there is no data in them.

 

This is an example of how it is being displayed right now

 

Any Help would be greatly appreciated

 

A

Airlie Beach  Andergrove  Alexandra  Armstrong Beach

Alligator Creek

B

Bucasia  Blacks Beach  Beaconsfield  Bakers Creek

Balberra  Bloomsbury  Breadalbane  Ball Bay

Belmunda

C

Cannonvale  Calen  Crystal Brook  Cremorne

Chelona  Campwin Beach  Cape Hillsborough

Conway

 

Heres The Code i have so far.

 

<?php
  $file = "widget.csv";
@$fp = fopen($file, "r") or die("Could not open file for reading");
$outputArray = array();
$count = 0;

while(($shop = fgetcsv($fp, 1000, ",")) !== FALSE)
{
    $outputArray[array_shift($shop)] =  array_filter($shop);
}

echo "<table>";
foreach ($outputArray as $alphabetical=>$value){
    echo "<th colspan='4'><b>" . $alphabetical ."</b></th>";
    echo "<tr>";
foreach ($value as $key){
	$afterkey=preg_replace('/\s+/','-',$key);
    if ($count == 4){
    echo '</tr><tr><td><a href="map.php?mapaddress='.$afterkey.'-qld&mapname='.$key.'">'.$key.'</a></td>';
    $count = 0;
    }else{
    echo '<td><a href="map.php?mapaddress='.$afterkey.'-qld&mapname='.$key.'">'.$key.'</a></td>';
    }
$count++;    
}
    echo "</tr>";
$count = 0;
}
    echo "</table>";

    echo "\n<br />";

?>

 

Heres an example of what i am trying to do.

 

A

D

K

N

S

AlexandraHeadlands

DickyBeach

KingsBeach

Nambour

SandstonePoint

Aroona

Diddillibah

KielMountain

Ninderry

ShellyBeach

[bR]

Doonan

KundaPark

NoosaHeads

SippyDowns

B

Dulong

Kuluin

Ningi

SunriseBeach

Beachmere

DeceptionBay

Kilcoy

NorthArm

SunshineBeach

BanksiaBeach

[bR]

[bR]

Noosaville

Scarborough

Beerburrum

E

L

[bR]

[bR]

Beerwah

EerwahVale

Landsborough

O

T

Bellara

Elimbah

[bR]

[bR]

Tanawha

Bellmere

Eudlo

M

P

TowenMountain

Birtinya

Eumundi

Maleny

Petrie

Tewantin

Bongaree

[bR]

Mapleton

Palmview

TwinWaters

Bokarina

F

Marcoola

Palmwoods

[bR]

BribieIslandArea

Flaxton

MarcusBeach

Parklands

U

Buddina

ForestGlen

MaroochyRiver

Parrearra

UpperCaboolture

Burnside

[/td]

Maroochydore

PeregianBeach

Buderim

G

Minyama

Pinbarren

V

Burpengary

GlassHouseMountains

MoffatBeach

PointArkwright

Valdora

BliBli

Mons

PelicanWaters

H

Montville

PacificParadise

W

C

Highworth

Mooloolaba

WeybaDowns

CoolumBeach

Hunchy

Mooloolah

Q

Warana

Caboolture

MountainCreek

WestWoombye

CabooltureSouth

I

MountCoolum

R

Woombye

Caloundra

ImageFlat

Morayfield

Rosemount

Woorim

CastawaysBeach

Mudjimba

Redcliffe

WamuranBasin

Chevallum

J

Woodford

CoesCreek

WoodyPoint

Cooroy

Wamuran

Currimundi

Wurtulla

X

Y

 

YandinaCreek

 

Yandina

 

 

Z

[td]

 

[cssfreakie]

i know people love tables, but why don't you use something with less mark-up such as for instance a div or a <ul>.

Did you notice the difference in height of all those table cells? That will be a nemesis to find out with tables.

 

By using a floated div you can with very little code set a default width for each container (div) and by setting a float on them you can nicely show them next to each other.

 

just as an example to give you a headstart which you can use for either a <div> or a <ul>

 

css

/* setting a default box  assign it to either a <ul> or a div */
.box{
   width: 200px; /* we can know the width but not the height */
   overflow:hidden; /* shrinkwrap
   margin: 10px; /* giving it some air to breath */
   float:left;
   list-style: none; /* in case it's an <ul> */
}

 

possible html (i like this one most )

<ul class="box">
  <li>some stuff</li>
  <li>some stuff</li>
</ul>

or

<div class="box">
  <span>some stuff</span></br >
  <span>some stuff</span></br >
</div>

you could use paragraph's on that last one to limit markup

 

So in other words you have either multiple list or div's floated next to each other. And the best thing depending on your css they adjust to the screen width. A table doesn't

 

Hope this helps in a way. But for this data i would not use a table.

[sniesler08]

Thats definitely something to think about i think i may not use tables in the future definitely but i think its mainly the php i really need help with. any help would be appreciated.

 

Your definitely right about the tables n div tags even i see tables as the old way of doing it really i should be using div's these days

[cssfreakie]

Thats definitely something to think about i think i may not use tables in the future definitely but i think its mainly the php i really need help with. any help would be appreciated.

 

Your definitely right about the tables n div tags even i see tables as the old way of doing it really i should be using div's these days

 

well the php you wrote is aimed at outputting a table. So you might want to try something out in order to place it in a div or ul. I am pretty sure it will be much easier. But yeah if anyone wants to instant write it for you i won't stop em

[sniesler08]

I've gotten it to display with the UL and LI Tags but the problem im having is it is all messed up now there listing from left to right and then in random spots is it possible i could get just a hint in the right direction please?

 

<?php
  $file = "include/service_areas2.csv";
@$fp = fopen($file, "r") or die("Could not open file for reading");
$outputArray = array();
$count = 0;

while(($shop = fgetcsv($fp, 1000, ",")) !== FALSE)
{
    $outputArray[array_shift($shop)] =  array_filter($shop);
}


foreach ($outputArray as $alphabetical=>$value){
echo '<ul class=box>';
    echo "<li><b>" . $alphabetical ."</b></li>";





foreach ($value as $key){
	$afterkey=preg_replace('/\s+/','-',$key);


    echo '<li><a href="map.php?mapaddress='.$afterkey.'-qld&mapname='.$key.'">'.$key.'</a></li>';

    echo "</ul>";
}


    echo "\n<br />";

?>

[cssfreakie]

have a play with this. you need to adjust it a bit, added some comments. note though i just made some funky array with values.

<style type="text/css">
.box{
        width:200px;
        border:1px solid red;
        background:#999;
        float:left;
        overflow:hidden;
        list-style: none;
        margin:10px;
        padding:5px;
}
</style>

<?php 

$data = array(
    'ffff',
    'ffff',
    'ffff',
    'ffff',
    'aaaaa',
    'aaaaa',
    'aaaaa',
    'aaaaa',
    'bbbbb',
    'bbbbb',
    'bbbbb',
    'bbbbb',
    'bbbbb',
    'bbbbb',
    'ccccc',
    'ccccc',
    'ddddd',
    'ddddd',
    'ddddd',
    'ddddd',
    'ddddd',
    'ddddd',
    'ddddd',
    'eeee',
    'eeee',
    'eeee',
    'ffff',
    'ffff',
    'ffff',
    );

sort($data); // sort the array

$linenumber = 1;   // set starting line
$maxlines = 10;   // max number of lines minus 1
$firstletter = 'a'; // start with letter A

echo '<ul class="box">';

foreach($data as $key => $value){
    //check if the previous first letter is the same
    if(substr($value, 1,1)== $firstletter){               
        echo "<li>$linenumber $value</li>";
        $linenumber ++;
    }elseif($linenumber < $maxlines){               
        echo "<li>$linenumber $value</li>";
        $firstletter = substr($value, 1,1); //set a new first letter
        $linenumber ++;
    }else{               
        echo '</ul><ul class="box">';
        echo "<li>$linenumber $value</li>";
        $linenumber = 1;// one more than 1
        $firstletter = substr($value, 1,1); //set a new first letter
    }
}
echo '</ul>';

 

what this code will do is the following: it will sort your values by alphabet, populates the list items until either the first character is different or the amount of list items is higher than the given amount. It than closes the ul and starts a new one. And yeah i am using just an array, but with minor adjustments you can do the exact same with data from you database

 

 

is it possible i could get just a hint in the right direction please?

I think this can be considered a  hint