Trying to make a custom table [closed]

Question

I'm trying to make a table that looks like this:

But I'm not quite sure how to go about doing that.

The end result is supposed to look like this:

I was planning on having making a div, and then setting the background of the div to be the grey textured part, and then creating a table inside that div to organize the content. Is using a table in this situation correct? Or is there a better method? Thanks in advance.

Answer 1

Stick to a non-table markup. Best practices today would suggest you should only use tables for tabular data, and this content is not tabular data.

There's several different methods you could use to get this going, including using floats, displaying inline-block, and others. There's also considerations with the content wrapping around the images (if the content is long, for example).

But here's some sample code to get your rolling.

Styles:

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;
}

The html markup:

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