HTML/CSS Adding a grey background to a table - html

Question

so I am pretty much making a table with images that when you hover over show color. Right now it's pretty much just very simple, but I was wondering how I could add a border to do the table, and maybe a grey background?
My 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>
My 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/
I was also told that I shouldn't be using a table for something like this, but rather be using div's, and ul's? Is that true? If so can someone point me to the right direction to utilize those tags?
Thank you very much!

Answer 1

If you just need a border to the table or container and grey colored background,just add this to your css,
table{
border:1px solid #000;
background-color:#eee;
}
if you need border for each item then just use
table,tr,td{
border:1px solid #000;
background-color:#eee;
border-collapse: collapse;
}
Demo here
if you need to use divs like a table
then
use
the parent container(or div) as display:table in css
and inner divs as display:table-cell

Answer 2

I'll answer that by telling you to not use a table. Obsolete for this kind of stuff, really.
Change < td> to < li>, remove < tr>, < tbody>, < table>, you need just one tag around li elements: < ul>. And check this out:
http://jsfiddle.net/v2JA9/3/
li {
float: left;
list-style: none;
}
ul {
background: #ccc;
border: 2px solid black;
padding: 0;
}
ul:after {
clear: both;
content: "";
display: block;
}
Basically, let's float (google: "floats css") them. ul:after being there as clearfix (google that as well), so it's as big as floating elements inside of it.
http://jsfiddle.net/v2JA9/6/
li {
display: inline-block;
list-style: none;
}
ul {
background: #ccc;
border: 2px solid black;
padding: 0;
}
Make li inline instead, so many of them don't mind standing in one line. Here: "display: inline-block", "inline" will work as well, but is less flexible. On the flipside, older browsers (IE...) can have some problems with inline-block. Up to you.
EDIT:
Someone mentioned it, let's work with it. Making ul behave like a table, with css.
http://jsfiddle.net/v2JA9/7/
Basically: "display: table;" on < ul> (container) + "display: table-cell;" on < li> (actual list elements, err, table cells...).

Answer 3

Solving your question (by keeping the tables) is super basic: JSFiddle
table, tr, td {
border: 1px solid black;
background-color: #e6e6e6;
border-collapse: collapse;
}
Using DIVs is definetely the best approach for building your site in a way that will allow you to leverage current and future web technologies: JSFiddle
I used display: inline-block;, but you could accomplish similar layout with display: block; and float: left;
div {
display: inline-block;
border: 1px solid black;
background-color: #e6e6e6;
}
Hope this helps get you started.

Answer 4

Yes, this can be done with list items as well - this is preferable because you have more options
<ul>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
The CSS for the list could look like this
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 */
}
li{
list-style:none;
float:left;
border: 1px dashed black;
background-color: lightgrey;
}
The CSS for ur Table would look like this:
table{
border: 1px dashed black;
background-color: lightgrey;
}

Answer 5

You can use this code for better output
table{
border: 1px solid gray;
border-spacing: 0;
border-collapse: collapse;
}
table td{
border-left: 1px solid gray
}
table td:first-child{
border: none;
}
Check this Demo

Answer 6

For a border, add this:
<table border="1">
...
</table>
A ul is an unordered list. See an example here.
A div "divides" a webpage into a section. See here.
EDIT
Based on what it looks like you're trying to do, I wouldn't recommend a ul because then you'd get bullet points next to each icon.