Stylizing a table with CSS? - html

Question

I have created a table in which I will have an image of a person and information about them in the cell next to the image. My code is below
<table border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td class="bg" colspan="2">JEFF DAVIS</td>
</tr>
<tr>
<td width="24%">
<img height="150" src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150">
</td>
<td width="76%">
<p>Name: Jeff Davis</p>
<p>Favourite Color: Yellow</p>
<p>Favourite Animal: My Cat</p>
<p>Favourite Super Hero: Superman</p>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
</table>
In the cell where I keep the information, or 'profile' of the person I want to have bullet points in two columns. Could somebody inform me of how to do this?
Also I would like the top cell, with the name in capitals to have rounded edges, I believe I can do this with CSS but I am a complete novice.

Answer 1

Here is a jsfiddle of your example using dots u mentioned.
<ul>
<li><p>Name: Jeff Davis</p></li>
<li><p>Favourite Color: Yellow</p></li>
<li><p>Favourite Animal: My Cat </p></li>
<li><p>Favourite Super Hero: Superman</p></li>
</ul>
http://jsfiddle.net/kzgfu/
Is this want u ment?
P.s.: I dont quite understand what u mean with the capitals to have rounded edges. Could u show a picture of what u are meaning?
Rounded Cell from Danko http://jsfiddle.net/kzgfu/1/
And another rounded cell from me: http://jsfiddle.net/kzgfu/2/

Answer 2

I think this is what he means by rounded corners, not sure though
table td:nth-child(1){
background-color:#333;
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Answer 3

Here's a fiddle example using divs (I know it's not what you asked, but just so you have different options) and two columns for the bullet points.
http://jsfiddle.net/jprZ7
<div style="width:50%;">
<div style="width:100%; text-align:center; border-radius: 15px; background-color:#CCC;">
JEFF DAVIS
</div>
<div style="width:24%; float:left;">
<img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" />
</div>
<div style="width:76%; float:left;">
<ul style="float:left;">
<li>
<p>Name: Jeff Davis</p>
</li>
<li>
<p>Favourite Color: Yellow</p>
</li>
</ul>
<ul style="float:left;">
<li>
<p>Favourite Animal: My Cat</p>
</li>
<li>
<p>Favourite Super Hero: Superman</p>
</li>
</ul>
</div>
</div>

Answer 4

There you go
JsFiddle Bullet points and round corners around capitals
CSS:
.bg {
text-align:center;
background:green;
border-radius:10px 10px 0 0;}
HTML:
<li> <p>Favourite Color: Yellow</p> </li>
<li> <p>Favourite Animal: My Cat </p> </li>
<li> <p>Favourite Super Hero: Superman</p> </li>
<li> <p> Facebook Twitter Email</p> </li> </td>

Answer 5

http://jsfiddle.net/Ldbu4/1/
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2" class="bg">JEFF DAVIS</th>
</tr>
<tr>
<td width="24%"><img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /></td>
<td width="76%"><p>Name: Jeff Davis</p>
<ul>
<li>Favourite Color: Yellow</li>
<li>Favourite Animal: My Cat </li>
<li>Favourite Super Hero: Superman</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
and css
table
{
border-collapse:collapse;
}
td
{
border: 1px solid black;
}
td
{
padding: 10px;
}
th
{
background-color:#333;
color:#fff;
border-radius: 10px 10px 0 0;
}