试图制作自定义表格

Question

我正在尝试制作一个看起来像这样的表:

但我不太清楚如何去做.

最终结果应该如下所示:

我打算制作一个div,然后将div的背景设置为灰色纹理部分,然后在该div中创建一个表来组织内容.在这种情况下使用表是否正确？还是有更好的方法？提前致谢.

Answer 1

坚持使用非表格标记.今天的最佳实践建议您只应将表格用于表格数据,而这些内容不是表格数据.

您可以使用几种不同的方法来实现这一目标,包括使用浮动,显示内联块等.还有考虑内容环绕图像(例如,如果内容很长).

但是这里有一些示例代码可以帮助您实现目标.

样式:

div.left,
div.right {
    width: 400px;
    overflow: hidden; /* forces the div to clear the floated content */
}

div.left img,
div.right img {
    border: 2px solid #888;
}

div.left img {
    float: left;
    padding-right: 20px;
}

div.right img {
    float: right;
    padding-left: 20px;
}

html标记:

<div class="left">
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p>
</div>
<div class="right">
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p>
</div>