HTML 自定义表格

Question

我研究 table 一段时间了，正在考虑创造一些东西。数据将存储在数据库中（个人资料图像、姓名、描述、日期和点赞）。我正在尝试创建这样的内容：https ://i.ibb.co/k2LM4ch/Untitled.png因此数据库表中的每一行都有它自己的卡片视图（或列表视图，不确定其名称是什么）。有人可以帮助我找到正确的道路吗，因为我不知道如何做到这一点，甚至表格也是正确的方法吗？

Answer 1

这个答案只涉及问题的 HTML + CSS 部分，而且非常简单。可能需要更多的样式。请参阅 SQL/PHP 解决方案的其他答案。您可以通过多种方式设计“卡片”（定位、浮动、Flex 或网格布局）给出的示例是使用 Flex 完成的（目前只是个人喜好）：

.card {

  display: flex;

  flex-flow: row nowrap;

  justify-content: space-between;

  align-items: flex-start;

  border: 1px solid black;

}

.card_img {

  flex: 0 1 100px;

  padding: 5px;

}

.card_content { 

  flex: 1 0 70%;

}

.card_content > h3 {

  margin: 0;

  font-size: 1.5rem;

  font-weight: bold;

}

.card_content > footer {

  display: flex;

  flex-flow: row nowrap;

  justify-content: space-between;

}

<div class="card">

  <div class="card_img"><img src="https://picsum.photos/100/100"></div>

  <div class="card_content">

    <h3>Joe Schmoe</h3>

    <p>Lorem ipsum dolor sit amet ... </p>

    <footer>

      <button>Button</button>

      <span>some text here</span>

    </footer>

  </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