如何为相册设置样式？

Question

I am looking for a method to design a photo gallary, I am currently using table but not sure if its a correct method to do it or not, also not sure about styling.

It has many images, upload is used to upload photos and message is used to show upload messages.

I just need to show the images and allow users to save images on the server, and show the messages, (uploaded / can not upload). I can show the images, save them and send the messages to the message section but not sure how to style it .

Another problem is that I need all images to be in the same size, as each is in different size now.

I need it to be the same on all browsers.

<table>
<tbody>
<tr>
    <td><img 1></td>
    <td>upload photo btn</td>
    <td><label>message</label></td>
    <td><img 3></td>
    <td>upload photo btn</td>
    <td><label>message</label></td>
</tr>
</tbody>
</table>

Answer 1

Semantically tables should be used for tabular data.

Check out the answer to this question for some options. Depending on the age of the browsers you want to support, you could also consider using a flex box layout . Flex box is nice and easy to code but not fully supported in all browsers yet.

Answer 2

According to me this shouldn't be accomplished using tables, the better way to do is by using CSS3 column-count property, this way you can cut-split your content to whatever number of columns you want to, this way you don't have to use tables too..

Demo

Demo (Added -webkit support)

html, body {
    width: 100%;
    height: 100%;
}

.wrap {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

.holder {
    border: 1px solid #f00;
}

img {
    max-width: 100%;
}

Note: column-count CSS3 property is not widely supported, but there are many polyfills available out, you can search online and use it for cross browser compatibility