HTML 自定义表格

Question

我研究 table 一段时间了，正在考虑创造一些东西。数据将存储在数据库中（个人资料图像、姓名、描述、日期和点赞）。

我正在尝试创建这样的内容：https ://i.ibb.co/k2LM4ch/Untitled.png因此数据库表中的每一行都有它自己的卡片视图（或列表视图，不确定其名称是什么）。

有人可以帮助我找到正确的道路吗，因为我不知道如何做到这一点，甚至表格也是正确的方法吗？

Answer 1

这个答案只涉及问题的 HTML + CSS 部分，而且非常简单。可能需要更多的样式。请参阅 SQL/PHP 解决方案的其他答案。您可以通过多种方式设计“卡片”（定位、浮动、Flex 或网格布局）给出的示例是使用 Flex 完成的（目前只是个人喜好）：.card {&nbsp; display: flex;&nbsp; flex-flow: row nowrap;&nbsp; justify-content: space-between;&nbsp; align-items: flex-start;&nbsp; border: 1px solid black;}.card_img {&nbsp; flex: 0 1 100px;&nbsp; padding: 5px;}.card_content {&nbsp;&nbsp; flex: 1 0 70%;}.card_content > h3 {&nbsp; margin: 0;&nbsp; font-size: 1.5rem;&nbsp; font-weight: bold;}.card_content > footer {&nbsp; display: flex;&nbsp; flex-flow: row nowrap;&nbsp; justify-content: space-between;}<div class="card">&nbsp; <div class="card_img"><img src="https://picsum.photos/100/100"></div>&nbsp; <div class="card_content">&nbsp; &nbsp; <h3>Joe Schmoe</h3>&nbsp; &nbsp; <p>Lorem ipsum dolor sit amet ... </p>&nbsp; &nbsp; <footer>&nbsp; &nbsp; &nbsp; <button>Button</button>&nbsp; &nbsp; &nbsp; <span>some text here</span>&nbsp; &nbsp; </footer>&nbsp; </div></div>

Answer 2

这是一个简单的示例，其中包含您提供的信息：$query=$mysqli->prepare('select * from table');$query->execute();$result=$query->get_result();echo '<table>';while($res=$result->fetch_array()){$name=$res['name'];$thumb=$res['thumbsup'];echo "<tr><td><img src='$thumb'>$name <br> Hello <br> <button>test</button></td></tr>"}echo '</table>'当然，您必须根据您的需要更改代码。例如@Ludovit Mydla 所说的两列使用 flex/grid