开发者

Wikipedia pretty table css

Can any one help me with the css to have a table that looks similar to this table? Thanks.

Because I'm using a WordPress.com blog, I don't have access to the <head>, so I've taken Marty's answer and converted it to this:

<table style="border-collapse: collapse;">
    <tbody valign="middle">
        <tr style="background: #EEE;">
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #开发者_运维百科AAA;">title</td>
        </tr>
        <tr>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
        </tr>
        <tr>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
            <td style="padding: 5px; border: 1px solid #AAA;">title</td>
        </tr>
    </tbody>
</table>


CSS:

table.mytable
{
    border-collapse: collapse;
}

table.mytable td
{
    padding: 5px;
    border: 1px solid #AAA;
}

tr.head
{
    background: #EEE;
}

HTML:

<table class="mytable">
    <tbody valign="middle">
        <tr class="head">
            <td>title</td>
            <td>title</td>
            <td>title</td>
        </tr>
        <tr>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
    </tbody>
</table>

The key ingredient here I think would be border-collapse.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜