在不使用表的情况下显示php + mysql行

时间:2013-02-07 13:55:16

标签: php html mysql css

如何在不使用表的情况下显示mysql中的行?就像twitter feed和facebook上的那些一样。是否可以使用<span><div>或使用无序列表?

我想要图片缩略图,名称和帖子。

我的代码截至目前,它只显示帖子本身。

$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>
}

2 个答案:

答案 0 :(得分:0)

使用divspan ...

代替表格
$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
}

答案 1 :(得分:0)

根据最适合相关内容的内容选择标记。如果您有表格数据,则它属于表格。列表应该放在列表中。不要根据“tagX坏”的想法选择,或者因为它看起来特定,因为外观可以改变。最终,任何东西都可以看起来像其他任何东西,所以只需选择合适的基础。

表格不是我对此类内容的首选标记,但这是可以接受的。

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>

这是标记它的另一种方式,并且它看起来几乎完全相同:

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>