PHP List array items in a table Rows of 3

Question

I saw a couple of examples of what I'm thinking of, but they aren't quite what I'm looking for... apologies, up front, if this is a duplicate post:

So, I have this function that reads items in an array, that I add to regularly (currently, I have over 50 items in the list). It puts everything out in a list ( < ul > ).

function getListItems()
{
$listItems = array(
    1 => "List Item 1",
    2 => "List Item 2",
    3 => "List Item 3",
    4 => "List Item 4",
    5 => "List Item 5",
    6 => "List Item 6",
    7 => "List Item 7",
    8 => "List Item 8",
    9 => "List Item 9",
    10 => "List Item 10",
    11 => "List Item 11",
    12 => "List Item 12",
    13 => "List Item 13",
    14 => "List Item 14",
    15 => "List Item 15",
);

$fullList = "<ul>";
foreach($listItems as $itemId=>$itemName)
{
    $fullList .= "<li><a href='somePage.php?id=" .$itemId. "'>" .$itemName. "</a></li>";
}
$fullList .= "</ul>";
return $fullList;
}

BUT, what I would like to do, ultimately, is create a way to display it in a table, on screen in rows of three...

Instead of what it is currently doing and just listing out everything that you have to scroll "forever" on.

This is what I currently output to... (yes, it's somewhat mobile friendly).

Answer 1

I would use CSS - specifically the column-count property.

Take a look at this guide to see how CSS columns work: https://css-tricks.com/guide-responsive-friendly-css-columns/

Note: This is NOT PHP.

Here is a fiddle showing this working with something like the output of your code.

http://jsfiddle.net/j86fu084/

ul{
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

You could also add a class the UL element and target the CSS styles using that.