How to display data in 3 columns

tristanwang99 · August 15, 2017, 5:03am

Hi all,

I’m in the process of coding a book browser with a database backend via phpMyAdmin. Right now the search function takes the user input and prints out all the relevant book titles (with author and genre) in one column down the center of the page. But that’s not really making good use of the white space on the page in my opinion. Is there a way to alter the code so that the data is displayed in 3 columns instead of just one? Below is my current code:

[php]

$query_string = $query_string.“CONCAT(TITLE,AUTHOR,GENRE) LIKE '%”.$predicate_word."%’";

            }
            
            $query = mysqli_query($con, $query_string);
            
            $num_rows = mysqli_num_rows($query);
                
    ?>
        
    <p><strong><?php echo $num_rows; ?></strong> results for '<?php echo $q; ?>'</p>

    <?php
        
            while(isset($q) && ($row = mysqli_fetch_array($query))) {
                $title = $row['TITLE'];
                $author = $row['AUTHOR'];
                $genre = $row['GENRE'];
            
                echo '<h3><a href="text.php?url=' . $row['URL'] . '">' . $title . '</h3></a><p> by ' . $author . '. ' .  $genre . '. </p><br />';
        
            }
        
        }
        
    ?>

[/php]

Any help is appreciated. Thanks!

tristanwang99

Strider64 · August 15, 2017, 12:21pm

There’s nothing wrong in using HTML Tables to create your three columns after all it is data that is coming in. Tables are just bad for designing the whole website that way. An since your post helped me with with my problem I thought it was only right to return the favor.

I used what I’m working on as an example how to do a display 3 columns.
[php]<?php
require_once ‘…/private/initialize.php’;

use Library\Database\Database as DB;

function search($search) {
$db = DB::getInstance();

$pdo = $db->getConnection();

$query = 'SELECT * FROM cms WHERE CONCAT(heading, content) LIKE ?';  // I suggest to lose the ` ticks:

$stmt = $pdo->prepare($query);

$stmt->execute(['%' . $search . '%']);

return $stmt;

}

$search = filter_input(INPUT_POST, ‘search’, FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$search = “CMS”;

if (isset($search)) {
$result = search($search);
}
?>

Display 3 Columns #box-table-b { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 45px; width: 100%; max-width: 800px; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } #box-table-b th { width: 33.33333%; font-size: 13px; font-weight: normal; padding: 8px; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; } #box-table-b td { padding: 8px; background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; vertical-align: text-top; } .content { text-align: left; } <?php foreach ($result as $row) { echo "\n"; echo "\n"; echo "\n"; echo "\n"; echo "\n"; } ?>

Title	Content	Date Added
" . $row['heading'] . "	" . $row['content'] . "	" . $row['date_added'] . "

[/php]

You could also look into using Flexbox, but from what I have read that it’s not fully supported in all browsers or versions.

HTH John