Wordpress: Centre align text in cells spanning two columns

MarcLister

MarcLister

MarcLister

Soldato
Joined
7 Mar 2005
Posts
19,425
Location
LU7
I've coded a table in Wordpress using the HTML editor. Out of 11 rows I have 7 where the text applies to two columns so rather than repeat the text in both cells I want to have the first cell span two columns and have the text centred between the two columns.

I have added
Code: 
"colspan="2"
to each of the rows I want spanned across two columns but in both the preview and proper view of the page the so called spanned cells display the text to the left of the span, i.e. they appear in-line with the text unique to the first column. This makes it look like all the spanned columns aren't and that the second column is empty and devoid of text in the 7 rows needing spanning.

I've tried WP-Table-Reloaded but that didn't help me achieve what I need. It also styled the table up something ugly so I've dumped that. I just want a plain, un-styled table with text in spanned cells appearing center aligned so that its obvious it applies to both columns. I'd prefer not having to install a plugin for this as I've hard-coded the table but I'll gladly listen to any advice anyone can offer me on this issue. :)

The table code so far is:
Code: 
<table>
<tbody>
<tr>
<td>Time</td>
<td>Key Stage 3</td>
<td>Key Stage 4</td>
</tr>
<tr>
<td>8:40am</td>
<td align="center" colspan="2">Registration</td>
</tr>
<tr>
<td>9:00am</td>
<td colspan="2" align="center">Lesson 1</td>
</tr>
<tr>
<td>10:00am</td>
<td colspan="2">Lesson 2</td>
</tr>
<tr>
<td>11:00am</td>
<td>Assembly</td>
<td>Break</td>
</tr>
<tr>
<td>11:15am</td>
<td>Break</td>
<td>Assembly</td>
</tr>
<tr>
<td>11:30am</td>
<td colspan="2">Lesson 3</td>
</tr>
<tr>
<td>12:15pm</td>
<td colspan="2">Lunch</td>
</tr>
<tr>
<td>1:00pm</td>
<td colspan="2">Lesson 4</td>
</tr>
<tr>
<td>2:00pm</td>
<td colspan="2">Lesson 5</td>
</tr>
<tr>
<td>3:00pm</td>
<td colspan="2">End of school day</td>
</tr>
</tbody>
</table>
 
Just done that markeh. Can't see that it's made any difference. It's as if Wordpress just ignores it. Here is current code:
Code: 
<table>
<tbody>
<tr>
<td>Time</td>
<td>Key Stage 3</td>
<td>Key Stage 4</td>
</tr>
<tr>
<td>8:40am</td>
<td text-align="center"; colspan="2">Registration</td>
</tr>
<tr>
<td>9:00am</td>
<td text-align="center"; colspan="2">Lesson 1</td>
</tr>
<tr>
<td>10:00am</td>
<td colspan="2">Lesson 2</td>
</tr>
<tr>
<td>11:00am</td>
<td>Assembly</td>
<td>Break</td>
</tr>
<tr>
<td>11:15am</td>
<td>Break</td>
<td>Assembly</td>
</tr>
<tr>
<td>11:30am</td>
<td text-align="center"; colspan="2">Lesson 3</td>
</tr>
<tr>
<td>12:15pm</td>
<td text-align="center"; colspan="2">Lunch</td>
</tr>
<tr>
<td>1:00pm</td>
<td text-align="center"; colspan="2">Lesson 4</td>
</tr>
<tr>
<td>2:00pm</td>
<td text-align="center"; colspan="2">Lesson 5</td>
</tr>
<tr>
<td>3:00pm</td>
<td text-align="center"; colspan="2">End of school day</td>
</tr>
</tbody>
</table>
<br />
 
Ah, sorry, missed the style tag there. I'll try that out now. :)

OK, that's forced the text over but now its almost indistinguishable from the text in the unspanned 2nd column. It's about one tab out of alignment with the second column so almost a near reverse of the initial problem. :confused: Well I've done a bit of work on Wordpress so I'll leave it overnight and see if my google-fu works better after some sleep.
 
Last edited:
OK, tried that out this morning before work. Just checked it again and its still not right. I don't think I can do this properly without a plugin. I've found some more and I hope one of them will do the job for me.
 
Nope. None at all. :( I haven't worked on it the last few nights but over the weekend I will trawl the list of table plugins in more detail to see if I can find anything that helps me.

Oh, forgot you posted all that code to try. I'll try that later today. :)
 
markeh said:
I'm presuming it's something in wordpress that is interfering with the table layout, there any chance we can have a look at the site?
Click to expand...
I agree, I know how to layout an HTML table with centrally aligned spanned columns. The website isn't online; I've been developing offline with XAMPP.
 
Right, sorted! :) I used the Chrome inspector (it's very nice, better than the Firebug for Firefox I reckon) and I found a css clause on line 34 of style.css that set borders to 0. So I disabled that and instantly saw that the text I wanted centred in the spanned cells WERE and that the other text was bang on the left border. I've now changed the css for tables (line 800 of style.css) so that border-top is now border.

Cheers for all your help. I might tidy the code up later by giving the table an ID and set the css I've just changed now to be specifically for that table so anything else is unaffected.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom