HTML/CSS 给表格添加灰色背景

Question

所以我几乎是在用图像制作一个表格，当你将鼠标悬停在上面时，它会显示颜色。现在它非常简单，但我想知道如何为表格添加边框，也许还有灰色背景？

我的 HTML:

<table>
        <tbody>
        <tr>
        <td><a href="http://online.wsj.com/news/articles/SB10001424052702304626804579361520890893170" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/wsj1.png" alt="" />
        </a></td>
        <td><a href="http://www.forbes.com/sites/rodebrahimi/2013/12/12/how-crowdfunding-will-impact-real-estate-investing-an-interview-with-realtyshares/" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/forbes1-1.png" alt="" />
        </a></td>
        <td><a href="http://money.cnn.com/news/newsfeeds/gigaom/articles/2014_02_04_finally_you_can_do_something_useful_with_bitcoin_invest_in_real_estate.html" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/cnnmoney1.png" alt="" />
        </a></td>
        <td><a href="http://www.bizjournals.com/sanfrancisco/print-edition/2013/08/09/rebooting-real-estate.html?page=all" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/business_times1.png" alt="" />
        </a></td>
        <td><a href="http://www.inman.com/2013/11/13/realtyshares-real-estate-crowdfunder-launches-first-equity-deal/" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/inman1.png" alt="" />
        </a></td>
        <td><a href="http://www.investorsbeat.com/all-in-one-investing-made-easy-with-realtyshares/" target="_blank">
        <img class="homepghovr" src="https://www.realtyshares.com/Media/Default/Content%20Images/AsSeenOn/investorsbeat1.png" alt="" />
        </a></td>
        </tr>
        </tbody>
        </table>

我的 CSS:

IMG.homepghovr
    {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }
    IMG.homepghovr:hover
    {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

fiddle :http://jsfiddle.net/v2JA9/

我还被告知我不应该为这样的事情使用表格，而应该使用 div 和 ul？真的吗？如果可以，有人可以指出我使用这些标签的正确方向吗？

非常感谢!

Answer 1

如果您只需要表格或容器的边框和灰色背景，只需将其添加到您的 css，

table{

    border:1px solid #000;
    background-color:#eee;

}

如果您需要为每个元素添加边框，那么只需使用

table,tr,td{
 border:1px solid #000;
        background-color:#eee;
 border-collapse: collapse;
}

Demo here

如果你需要像表格一样使用div

然后

使用

在 css 中作为 display:table 的父容器(或 div)

和内部 div 作为 display:table-cell