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).

Chris · Accepted Answer · 2015-04-24 16:38:00Z

10

+50

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.

edited Apr 24, 2015 at 16:38

answered Apr 23, 2015 at 19:14

Chris

1,1288 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Bogner Over a year ago

OK, so, given my code above, how does that work with an array?

Walker Boh Over a year ago

Elegant solution Chris. I like it!. @MarkBogner, you wouldn't change your array in any way. You would add Chris's code into a stylesheet and it would take care of the ul styling for you

MaKR · Accepted Answer · 2015-04-30 14:45:27Z

To make something similar without tables (which would allow it to be responsive) you'd do this:

PHP

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 = "<div id='myList'>";
    foreach($listItems as $itemId => $itemName)
    {
        $fullList .= "<span><a href='somePage.php?id={$itemId}'>{$itemName}</a></span>";
    }
    $fullList .= "</div>";
    return $fullList;
}

CSS

#myList, #mylist>* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#myList {
    display: block;
    width: 100%;
}

#myList>span {
    display: inline-block;
    width: 33%;
}

/* mobile stylesheet */
@media(max-width: 600px) {
    #mylist>span {
        width: 100%;
    }
}

Hint: force mobile devices to use 320px screen width and disable zoom (optional)

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

You can style the spans to look like tables, and columns will all be the same width. The box-sizing property will make it so margins and borders aren't taken into account when calculating element widths. There are no rows so the column widths are not only fluid, but you can shrink down to 1 column for small screens, and even do breakpoints for many sizes of monitors.

Collectives™ on Stack Overflow

PHP List array items in a table Rows of 3

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related