Wordpress: Centre align text in cells spanning two columns

MarcLister

MarcLister

MarcLister

Soldato
Joined
7 Mar 2005
Posts
19,404
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 />
 
I meant like this:

Code: 
<table border="1">
<tbody>
<tr>
<td>Time</td>
<td>Key Stage 3</td>
<td>Key Stage 4</td>
</tr>
<tr>
<td>8:40am</td>
<td colspan="2" style="text-align:center;">Registration</td>
</tr>
<tr>
<td>9:00am</td>
<td colspan="2" style="text-align:center;">Lesson 1</td>
</tr>
<tr>
<td>10:00am</td>
<td colspan="2" style="text-align:center;">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" style="text-align:center;">Lesson 3</td>
</tr>
<tr>
<td>12:15pm</td>
<td colspan="2" style="text-align:center;">Lunch</td>
</tr>
<tr>
<td>1:00pm</td>
<td colspan="2" style="text-align:center;">Lesson 4</td>
</tr>
<tr>
<td>2:00pm</td>
<td colspan="2" style="text-align:center;">Lesson 5</td>
</tr>
<tr>
<td>3:00pm</td>
<td colspan="2" style="text-align:center;">End of school day</td>
</tr>
</tbody>
</table>
 
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.
 
Using the HTML given by markeh as a basis, give the table an ID, and apply styling something like this:

Code: 
table, td {
border-spacing: 0;
border: none;
margin: 0;
padding: 0;
}

table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}

table tr td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
margin: 0px;
}


*Note - I've only tested this on Firefox using the Web Developer toolbar, by on-the-fly creating the HTML/CSS, so it may not be particularly great.

However, it does make it quite readable, I think...
 
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. :)
 
I'd personally use the inspect element in chrome, rather than firebug. I find it a bit easier and clearer.

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?
 
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.
 
Then inspecting it is your best bet or you could go through the template css and strip out all the table/tr/td references in it and work it back from there.
 
You must log in or register to reply here.
Back
Top Bottom