不使用表显示 php+mysql 行答案

【问题标题】：Displaying php+mysql rows without using tables不使用表显示 php+mysql 行
【发布时间】：2013-01-23 01:16:09
【问题描述】：

如何在不使用表的情况下显示 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>
}

【问题讨论】：

用一些
代替？
一般情况下：如果是表格数据，使用表格是完全可以的。但是，是的，对于您想要做的事情，使用无序列表通常是要走的路
听起来表格很适合这个..你为什么不想使用表格？您要寻找的布局是什么？你试过什么？
好吧，表格只是格式化输出的一种工具。它们被认为是过时的，并且大多被“div”所取代。看看这里：stackoverflow.com/questions/61250/…
您似乎正在为结果中的每条消息生成一个表格。将您的while 语句移动到table 标记内，但在tr 标记之外。表格在这里看起来完全合适，前提是图片、名称和消息都在各自的单元格中，每行 1 个帖子。

标签： php html mysql css

【解决方案1】：

使用div 或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
}

【讨论】：

【解决方案2】：

根据最适合相关内容的内容选择您的标记。如果您有表格数据，那么它属于表格。列表应该放在列表中。不要基于“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>

【讨论】：