Displaying tables in posts and pages

Many themes pre-set up how tables will look in your wordpress website.
This is fine if you like how they look.

It’s also fine if you’re happy dabbling in CSS code to change them to how you’d like them to look.

But it does create a single way a table is displayed across your site – fine if consistency is what you’re after, but poor if you use tables like I do to note only create lists that are neat, but also to display data that looks better with boxes round it, or where uniform column width is not needed.

The twenty-ten theme is typical of this. It sets columns with no borders, and uniform automatic width within columns, which can look awful if say your third column needs to be wider.

Some code I came across can sometimes improve this, but it does seem to be highly reliant on what your theme is doing.

However try the following

<style type="text/css">
td.col-col > div {
border-style:solid;
border-width:1px;}
</style>

<table>
<tbody>
<tr>
<td class = "col-col">
<div>you text here</div></td>

etc..

If that doesn’t work, you can also try

<div><span>Southern Championship</span></div></td>

or try

<div><span style="border-style:solid">Southern Championship</span></div></td>

You can also set columns widths eg

<style type="text/css">
td.first-col > div {
width:160px;
border-style:solid;
border-width:5px;
font-size : 12pt ;
}
td.sec-col > div {
border-style:solid;
border-width:5px;
width:120px;
font-size : 8pt ;
}
td.thi-col > div {
width:160px;
font-size : 10pt ;
}
td.for-col > div {
width:40px;
font-size : 10pt ;
}
</style>

<tr>
<td class = "first-col"><div>Dorset Rare Breeds</div></td>
<td class = "sec-col">
<div><span style="color:red">Southern Championship</span></div></td>
<td class = "thi-col">
<div>3rd May</div></td>
<td class = "for-col">
<div><a href="/dorset-rare-breeds/"> Details</a></div></td>
</tr>

Try the above, and see if it can work for you

 

One Response to Displaying tables in posts and pages

  1. This is a high-risk method tto go, as it won’t helop the lasting unless you have a critical
    advertising and marrketing firm working together with your internal group.

    Review my wweb blog; web design nashville

Leave a Reply

Your email address will not be published.