Стилизация таблицы с CSS?

Question

Я создал таблицу, в которой у меня будет изображение человека и информация о них в ячейке рядом с изображением. Мой код ниже

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

В камере, где я храню информацию, или «профиль» человека, я хочу, чтобы иметь пункты маркированного в двух колонках. Может ли кто-нибудь сообщить мне, как это сделать? Также я хотел бы, чтобы верхняя ячейка, с названием в столицах, имела закругленные края, я считаю, что могу сделать это с помощью CSS, но я полный новичок.

Answer 1

Здесь приведен пример jsfiddle вашего примера с использованием упомянутых точек.

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

ли это хотят у Мента?

P.s .: Я не совсем понимаю, что означают, что у столиков есть закругленные края. Не могли бы вы показать картину того, что вы имеете в виду?

Округлые Cell от Данко http://jsfiddle.net/kzgfu/1/

И еще округлой клетки от меня: http://jsfiddle.net/kzgfu/2/

Answer 2

Я думаю, что это то, что он подразумевает под закругленными углами, не уверен, хотя

table td:nth-child(1){ 
background-color:#333; 
color:#fff; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

Answer 3

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> 

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

Answer 4

Там вы идете

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

Вот пример скрипки с использованием div (я знаю, что это не то, что вы просили, а просто у вас есть разные варианты) и два столбца для точек маркера.

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>