Question

我想在不使用<table><td><tr>的情况下绘制表格我用google搜索任何找到很多解决方案，所以人们说可以使用<div> + css 最简单的方法或其他最佳实践来绘制它？

Answer 1

您可以使用display CSS attributes来实现：

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

您显然需要将CSS放在样式表中，the idea is：

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Here is a cell.
    </div>
  </div>
</div>

Answer 2

好吧，你可以使用像玉器这样的降价语言，或者你可以使用像div这样的html标签，并使用css将其显示为一个表格。

Answer 3

<table><tr><td>用于以最佳方式实现表。为什么你不使用它们？

您可以使用以下简单代码实现表：

HTML

.table{
	border:1px solid black;
	clear: both;
}
.table>div{
	width: 100%;
	float: left;
	clear: both;
	border:1px solid red;
}
.table>div>div{
	width: 25%;
	float: left;
	border: 2px solid yellowgreen;
	box-sizing: border-box;
}
.clearfix{
	clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	
<div class="table">
	<div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
	</div>
	<div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
	</div>
	<div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
		<div>item</div>
	</div>
	<section class="clearfix"></section>
</div>


</body>
</html>

Answer 4

为什么？
table元素正是您要用于绘制表格数据的元素。

正确地说，现代网页设计的一个趋势是使用表格进行定位。这并不意味着你永远不应该使用表格。

有点历史。在CSS发明并得到浏览器的适当支持之前，表格在很大程度上依赖于定位内容。坦率地说，他们在这方面做得很好。创建一个能够精确定位设计元素的表格非常容易，但只是假设您网站的用户拥有一个具有与您相似的宽高比和分辨率的显示器，并且他们看着您的网站全屏。使用表格 flow 设计元素非常困难。

使它们不适合定位的原因是它们非常适合表格数据（即应该在表格中显示的数据）。想象一下，如果财务报告中的单元格在调整大小时移动并改变了位置。

要sumarize：

对于表格数据使用表。
定位使用CCS。你已经为此提供了一些例子，但坦率地说，CSS定位太大而且在一个单一的答案中需要讨论一个问题。阅读一些教程，尝试使用一些CSS来放置东西，当你遇到任何更具体的问题时，堆栈溢出社区将在这里为你服务。

不使用<table> <tbody> <tr> <td>绘制/设计html

4 个答案: