Displaying php+mysql rows without using tables

Question

How do I display the rows in mysql without using tables? Just like the ones on twitter feed and facebook. Is it possible to use <span> or <div> or using unordered list?

I want to diplay the picture thumbnail, name, their post.

My code as of now, it only displays the post itself.

$sql_check = mysql_query("SELECT * FROM messages order by msg_id desc");
if(isset($_POST['message']))
{
    $message = $_POST['message'];

    mysql_query("INSERT INTO messages(msg, userid) values ('$message', ". $s_id . ")");

    $sql_msg = mysql_query("SELECT msg ,msg_id FROM messages where userid = $s_id order by msg_id desc");

    $row = mysql_fetch_array($sql_msg);
}

while($row = mysql_fetch_array($sql_msg)){
    <table cellpadding="0" cellspacing="0" width="500px">
        <tr>
            <td style="padding:14px;" class="comment_box" align="left"><?php echo $row['msg']; </td>
        </tr>
    </table>
}

Generally: If it's tabular data, it's totally okay to use tables. But yes, for what you want to do, using unordered lists is usually the way to go — Pekka, Feb 07 '13 at 13:57
It sounds like tables are appropriate for this .. why don't you want to use tables? What is the layout you're looking for? What have you tried? — Explosion Pills, Feb 07 '13 at 13:57
well, tables are only one instrument to format your output. they are considered outdated and are mostly replaced by "divs". have a look here: http://stackoverflow.com/questions/61250/divs-vs-tables-or-css-vs-being-stupid — Najzero, Feb 07 '13 at 13:58
You seem to be generating a table for every message in the result. Move your `while` statement to inside the `table` tags, but outside of the `tr` tags. Tables look entirely appropriate here, provided that the picture, name, and message are each in their own cell with 1 post per row. — cimmanon, Feb 07 '13 at 14:06
@Najzero That's a nonsense. You should **always use a table for tabular data**. Tables shouldn't be used **just** for formatting of non-tabular data - that means for design purposes. In OP's case we can see, that he needs to display just some messages. That doesn't look as a tabular data to me. So in this case I wouldn't use a table. — David Ferenczy Rogožan, Sep 28 '15 at 00:50

score 0 · Answer 1 · answered Feb 07 '13 at 14:06

Instead of table, use div or span...

$sql_check = mysql_query("SELECT * FROM messages order by msg_id desc");
if(isset($_POST['message']))
{
$message = $_POST['message'];

mysql_query("INSERT INTO messages(msg, userid) values ('$message', ". $s_id . ")");

$sql_msg = mysql_query("SELECT msg ,msg_id FROM messages where userid = $s_id order by msg_id desc");

$row = mysql_fetch_array($sql_msg);
}

while($row = mysql_fetch_array($sql_msg)){ ?>

        <div><?php echo $row['msg']; ?> </div>
<?php
}

score 0 · Answer 2 · answered Feb 07 '13 at 15:57

Choose your markup based on what is most appropriate for the content in question. If you have tabular data, then it belongs in a table. A list should go in a list. Don't choose based on some idea that "tagX is bad" or because it looks a specific way because appearances can be changed. Ultimately, anything can look like just about anything else, so just choose the proper foundation.

A table is not my first choice of markup for this type of content, but it would be acceptable.

http://jsfiddle.net/dcWsp/

table, tbody {
    display: block;
}

tr {
    display: block;
    overflow: hidden;
    margin: 1em 0;
}

td {
    display: block;
}

td.avatar {
    float: left;
    margin-right: 1em;
}

td.author {
    font-weight: bold;
}

<table>
    <!-- loop starts here -->
    <tr>
        <td class="avatar"><img src="http://placehold.it/100x100" /></td>
        <td class="author">Batman</td>
        <td class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet.</td>
    </tr>
    <!-- loop ends here -->
</table>

Here's another way of marking it up and styling it that looks virtually identical:

http://jsfiddle.net/dcWsp/2/

article {
    overflow: hidden;
    margin: 1em 0;
}

img.avatar {
    float: left;
    margin: 0 1em 1em 0;
}

h1.author {
    font-weight: bold;
}

<section class="comments">
    <!-- loop starts here -->
    <article>
        <h1 class="author"><img src="http://placehold.it/100x100" class="avatar" /> Batman</h1>
        <p class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet.</p>
    </article>
    <!-- loop ends here -->
</section>

Displaying php+mysql rows without using tables

2 Answers2