Table not displaying correctly WordPress
- SOLVED
Hi Guys
Probably a simple question for you guys but I can't get a table to display correctly.
My site is http://socialmediainbusiness.com
and the table is in the free members area,
http://socialmediainbusiness.com/members/tools/tools-2
all you need is your name and email to get access...if you need that information
what I need to correct is:
1. It to display correctly (see attached - the one with the red line around is how it is supposed to be)
2. I want to be able to centre the headings over the columns
The html code is:
<table style="background-color: #ffffcc;" width="400" border="2" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td><strong>PAGE....</strong></td>
<td><strong>.........FREE TOOL</strong></td>
<td><strong>DOWNLOAD LINK</strong></td>
</tr>
<tr>
<td>34</td>
<td><span style="color: #0000ff;">Case studies database</span></td>
<td><span style="color: #0000ff;">See 2 below</span></td>
</tr>
<tr>
<td>144</td>
<td><span style="color: #0000ff;">Social media policy examples</span></td>
<td><span style="color: #0000ff;">See 3 below</span></td>
</tr>
<tr>
<td>155</td>
<td><span style="color: #0000ff;">SWOT and PEST Analysis</span></td>
<td><span style="color: #0000ff;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/SWOTandPESTanalysis.pdf" target="_blank"><span style="color: #0000ff;">Click Here</span></a></span></td>
</tr>
<tr>
<td>174</td>
<td><span style="color: #0000ff;">Social Media Audit - checklist</span></td>
<td><span style="text-decoration: underline;"><span style="color: #0000ff; text-decoration: underline;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/AnalysisChecklist.pdf" target="_blank"><span style="color: #0000ff; text-decoration: underline;">Click Here</span></a></span></span></td>
</tr>
<tr>
<td>177</td>
<td><span style="color: #0000ff;">Checklist of questions and other considerations</span></td>
<td><span style="text-decoration: underline;"><span style="color: #0000ff; text-decoration: underline;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/BusinessOpportunitiesQuestions.pdf" target="_blank"><span style="color: #0000ff; text-decoration: underline;">Click Here</span></a></span></span></td>
</tr>
<tr>
<td>180</td>
<td><span style="color: #0000ff;">What are Milestones?</span></td>
<td>Coming soon</td>
</tr>
<tr>
<td>188</td>
<td><span style="color: #0000ff;">Project Review – Checklist</span></td>
<td><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/ProjectReview.pdf" target="_blank">Click Here</a></td>
</tr>
</tbody>
</table>
<span style="color: #ff0000;">Coming this week ...</span>
Answers (2)
Julio Potier answers:
Hello !
Me again :)
There is no file attached !
Julio Potier comments:
(as last time, i can do this on your webiste;) )
So you can add an ID to the table like this :
<table style="background-color: #ffffcc;" width="400" border="2" cellspacing="3" cellpadding="3" id="the_table">
than you can add a THEAD instead of TBODY
like this :
<thead>
<td>PAGE</td>
<td>FREE TOOL</td>
<td>DOWNLOAD LINK</td>
</thead>
and after you can really write the table body in a tbody.
Now we can select the td in the thead on CSS and to this :
#the_table thead td {
font-weight: bold;
text-align: center;
}
Full code :
<table id="the_table" style="background-color: #ffffcc;" width="400" border="2" cellspacing="3" cellpadding="3">
<thead>
<tr>
<td>PAGE</td>
<td>FREE TOOL</td>
<td>DOWNLOAD LINK</td>
</tr>
</thead>
<tbody>
<tr>
<td>34</td>
<td><span style="color: #0000ff;">Case studies database</span></td>
<td><span style="color: #0000ff;">See 2 below</span></td>
</tr>
<tr>
<td>144</td>
<td><span style="color: #0000ff;">Social media policy examples</span></td>
<td><span style="color: #0000ff;">See 3 below</span></td>
</tr>
<tr>
<td>155</td>
<td><span style="color: #0000ff;">SWOT and PEST Analysis</span></td>
<td><span style="color: #0000ff;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/SWOTandPESTanalysis.pdf" target="_blank"><span style="color: #0000ff;">Click Here</span></a></span></td>
</tr>
<tr>
<td>174</td>
<td><span style="color: #0000ff;">Social Media Audit - checklist</span></td>
<td><span style="text-decoration: underline;"><span style="color: #0000ff; text-decoration: underline;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/AnalysisChecklist.pdf" target="_blank"><span style="color: #0000ff; text-decoration: underline;">Click Here</span></a></span></span></td>
</tr>
<tr>
<td>177</td>
<td><span style="color: #0000ff;">Checklist of questions and other considerations</span></td>
<td><span style="text-decoration: underline;"><span style="color: #0000ff; text-decoration: underline;"><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/BusinessOpportunitiesQuestions.pdf" target="_blank"><span style="color: #0000ff; text-decoration: underline;">Click Here</span></a></span></span></td>
</tr>
<tr>
<td>180</td>
<td><span style="color: #0000ff;">What are Milestones?</span></td>
<td>Coming soon</td>
</tr>
<tr>
<td>188</td>
<td><span style="color: #0000ff;">Project Review – Checklist</span></td>
<td><a title="Click Here" href="https://smibt.s3.amazonaws.com/Book tools download/ProjectReview.pdf" target="_blank">Click Here</a></td>
</tr>
</tbody>
</table>
<span style="color: #ff0000;">Coming this week ...</span>
Julio Potier comments:
<em>edit last comment :
then you can add a THEAD instead of TBODY
like this :
<thead></em>
<tr>
<td>PAGE</td>
<td>FREE TOOL</td>
<td>DOWNLOAD LINK</td>
</tr>
</thead>
Bookinars comments:
Hi Julio
Yes I would appreciate you doing that for my site
What do you need?
My email is: [email protected]
As you can see I'm trying to create an attractive table with some download links...but I do not understand the CSS part.
So the table comes out like the attached screen who, instead of the correct way which I added to the main question
Kind regards
Steve
