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。：我不太明白你的首都是什么意思有圆边。你能展示一下你的意思吗？

来自Danko的圆形细胞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>

使用CSS样式化表格？

5 个答案: