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
.
精彩评论