frustrated with table placement

  • Started using WordPress which for the time being is installed locally udner XP SP3. Have placed a table from an existing website via c&p and want to place a graphic outside of the table right before the table. I have tried everything to be able to place this graphic before the table but I can not shift the table down enough to allow space into which to insert the graphic.

    Help.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi frustrated,

    I raised an eyebrow when I saw this post because I was about to write a post on my blog about pasting tables into WordPress! Sometimes weird and wonderful things can happen when you do this, especially if the table is written in less modern versions of HTML and contains deprecated tags like <tbody> etc.

    Might you post your table code on this thread and also include a short description of where you want the image to be in relation to it?

    All the best,

    Rory. ??

    Thread Starter frustrated999

    (@frustrated999)

    Here is the code for the table. I want to place a graphic element completely outside of the table and then have the table. 

    <table style="text-align: left;" border="0" cellspacing="5" cellpadding="0" width="460">
<tbody>
<tr bgcolor="#ffff55">
<td colspan="3" height="16"><strong><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">Mobile</span></strong></td>
</tr>
<tr>
<td height="16"><img src="https://www.healey.mb.ca/images_01_02_05/LP70_small.jpg" alt="LP70" width="150" height="72" /></td>
<td height="16" align="center" bgcolor="#ffffaa"><strong>LP?70</strong></td>
<td height="16" bgcolor="#ffffaa">
<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="185" align="center" bgcolor="#ffff99">
<tbody>
<tr>
<td colspan="2"><strong><span> Travel Light</span></strong></td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">2.4                      lbs/ 1.1kg</span></li>
</td>
</tr>
<tr>
<td width="10" height="21"></td>
<td width="175" height="21">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">Native                      XGA resolution</span></li>
</td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">1100                      lumens</span></li>
</td>
</tr>
<tr>
<td width="10" height="22"></td>
<td width="175" height="22" bgcolor="#000000"><a href="https://www.healey.mb.ca/images_01_02_05/lp70_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3" height="16" bgcolor="#33ccff">
<div><span style="font-family: verdana;"><strong>Meeting Room</strong></span></div></td>
</tr>
<tr>
<td width="157" height="103"><span style="font-family: verdana;"><strong><img src="https://www.healey.mb.ca/images_01_02_05/LP600_small.jpg" alt="LP600" width="150" height="72" /></strong></span></td>
<td width="91" bgcolor="#00dfff">
<div><strong>LP?600</strong></div></td>
<td width="192" bgcolor="#00dfff">
<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="185" align="center" bgcolor="#00dfff">
<tbody>
<tr>
<td colspan="2"><strong><span> It’s all about easy</span></strong></td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">2000                      max ANSI lumens</span></li>
</td>
</tr>
<tr>
<td width="10" height="21"></td>
<td width="175" height="21">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">XGA                      1024 x 768</span></li>
</td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">USB                      flash drive</span></li>
</td>
</tr>
<tr>
<td width="10" height="22"></td>
<td width="175" height="22" bgcolor="#000000"><a href="https://www.healey.mb.ca/images_01_02_05/lp600_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr bgcolor="#66cc00">
<td colspan="3" height="16"><strong><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">Installation              &amp; Integration</span></strong></td>
</tr>
<tr>
<td width="157" height="102">
<div><img src="https://www.healey.mb.ca/images_01_02_05/Lp820_small.jpg" alt="LP820" width="150" height="72" /></div></td>
<td width="91" height="102" valign="top" bgcolor="#66ff99">
<div>

<strong>LP?820</strong></div></td>
<td width="192" height="102" valign="top" bgcolor="#66ff99">
<table style="height: 101px;" border="0" cellspacing="0" cellpadding="0" width="188" align="center">
<tbody>
<tr>
<td colspan="2"><strong><span>Installation ease</span></strong></td>
</tr>
<tr>
<td width="9" height="22"></td>
<td width="175" valign="top">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">3200                      max ANSI lumens</span></li>
</td>
</tr>
<tr>
<td width="9"></td>
<td width="175">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">XGA                      1024 x 768</span></li>
</td>
</tr>
<tr>
<td width="9"></td>
<td width="175">
	<li><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">13.1                      lbs/6.0 kg </span></li>
</td>
</tr>
<tr>
<td width="9" height="23" valign="top"></td>
<td width="175" height="23" valign="top"><span style="font-family: Verdana,Arial,Helvetica,sans-serif;"><a href="https://www.healey.mb.ca/images_01_02_05/lp820_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></span></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

    OK try pasting this code into the HTML editor in WordPress – don’t use the visual editor.

    <img src="https://yoursite.com/yourimage.gif" width="40" height="46" alt="My Great Image"/>
<br />

<table style="text-align: left;" border="0" cellspacing="5" cellpadding="0" width="460">
<tr>
<td colspan="3" height="16" style="background-color:#ffff55">
<div style="font-family:Verdana"><strong>Mobile</strong></div></td>
</tr>
<tr>
<td height="16"><img src="https://www.healey.mb.ca/images_01_02_05/LP70_small.jpg" alt="LP70" width="150" height="72" /></td>
<td height="16" align="center" style="background-color:#ffffaa"><strong>LP?70</strong></td>
<td height="16" style="background-color:#ffffaa">
<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="185" align="center" style="background-color:#ffff99">
<tr>
<td colspan="2"><strong> Travel Light</strong></td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">2.4                      lbs/ 1.1kg</li>
</td>
</tr>
<tr>
<td width="10" height="21"></td>
<td width="175" height="21">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">Native                      XGA resolution</li>
</td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">1100                      lumens</li>
</td>
</tr>
<tr>
<td width="10" height="22"></td>
<td width="175" height="22" style="background-color:#000000"><a href="https://www.healey.mb.ca/images_01_02_05/lp70_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="16" style="background-color:#33ccff">
<div style="font-family:Verdana"><strong>Meeting Room</strong></div></td>
</tr>
<tr>
<td width="157" height="103" style="font-family:Verdana"><strong><img src="https://www.healey.mb.ca/images_01_02_05/LP600_small.jpg" alt="LP600" width="150" height="72" /></strong></td>
<td width="91" style="background-color:#00dfff">
<div><strong>LP?600</strong></div></td>
<td width="192" style="background-color:#00dfff">
<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="185" align="center" style="background-color:#00dfff">
<tr>
<td colspan="2"><strong> It’s all about easy</strong></td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">2000                      max ANSI lumens</li>
</td>
</tr>
<tr>
<td width="10" height="21"></td>
<td width="175" height="21">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">XGA                      1024 x 768</li>
</td>
</tr>
<tr>
<td width="10" height="15"></td>
<td width="175" height="15">
	<li style="font-family:Verdana,Arial,Helvetica,sans-serif">USB                      flash drive</li>
</td>
</tr>
<tr>
<td width="10" height="22"></td>
<td width="175" height="22" style="background-color:#000000"><a href="https://www.healey.mb.ca/images_01_02_05/lp600_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></td>
</tr>
</table>
</td>
</tr>
<tr style="background-color:#66cc00">
<td style="font-family:Verdana,Arial,Helvetica,sans-serif" colspan="3" height="16"><strong>Installation              &amp; Integration</strong></td>
</tr>
<tr>
<td width="157" height="102">
<div><img src="https://www.healey.mb.ca/images_01_02_05/Lp820_small.jpg" alt="LP820" width="150" height="72" /></div></td>
<td width="91" height="102" valign="top" style="background-color:#66ff99">
<div>

<strong>LP?820</strong></div></td>
<td width="192" height="102" valign="top" style="background-color:#66ff99">
<table style="height: 101px;" border="0" cellspacing="0" cellpadding="0" width="188" align="center">
<tr>
<td colspan="2"><strong><span>Installation ease</span></strong></td>
</tr>
<tr>
<td width="9" height="22"></td>
<td width="175" valign="top">
	<li style="font-family: Verdana,Arial,Helvetica,sans-serif;">3200                      max ANSI lumens</li>
</td>
</tr>
<tr>
<td width="9"></td>
<td width="175">
	<li  style="font-family: Verdana,Arial,Helvetica,sans-serif;">XGA                      1024 x 768</li>
</td>
</tr>
<tr>
<td width="9"></td>
<td width="175">
	<li style="font-family: Verdana,Arial,Helvetica,sans-serif;">13.1                      lbs/6.0 kg</li>
</td>
</tr>
<tr>
<td width="9" height="23" valign="top"></td>
<td style ="font-family: Verdana,Arial,Helvetica,sans-serif" width="175" height="23" valign="top"><a href="https://www.healey.mb.ca/images_01_02_05/lp820_ds.pdf"><img src="https://www.healey.mb.ca/images_01_02_05/button_brochure.gif" border="0" alt="A PDF viewer will be required to view this file" width="175" height="20" /></a></td>
</tr>
</table>
</td>
</tr>
</table>

    On the first line you need to change the details to your image file and its height and width and alternative text if it doesn’t load.

    The second line just makes a space before your table begins.

    Please let me know if this works for you.

    All the best,

    Rory. ??

    Thread Starter frustrated999

    (@frustrated999)

    Bingo. It works thanks. I have multiple tables to do this to and guess the only way is to follow your code. A couple of things is that I noticed that there is a wp-table plugin but that does not appear to support spanning of columns.

    Also is the html editor window able to be maximized so that you can see more of the code? Its a bit cumbersome having to scroll up and down to change code.

    I’m glad it works! I really should write that blog post because I would cover this stuff within it. I had a number of tables in an older version of HTML that wouldn’t work in WordPress, so I used WordPad’s (most text editors will do) Search and Replace function to remove and change a lot of tags to make it more WP friendly – this took some working out to begin with, but it saved time in the long run because I didn’t have to go through each and every line of each table and make the changes – where possible they were done together in each document through find and replace.

    As for the HTML editor, no there doesn’t appear to be a little handle to drag to make it bigger like on the Visual Editor but you can always edit your HTML in a text editor on your computer and then just copy it and paste it. Alternatively, there would be a way to increase the size of the HTML editor box through editing one of the WordPress installation files…a search through the forum might show the way.

    From what I remember reading of that WP-Table plugin it hasn’t been updated in a long time.

    Let me know how you get on. If you want to discuss anything, drop me an email – dev [at] lehocq.co.uk .

    All the best,

    Rory. ??

    wp-roy:

    Could you please let me know where your blog is? I have the same problems with table formatting not working in WP. It is frustrating.

    Thanks!

    Hi longun,

    Actually I never made that blog post – sorry! ?? I haven’t been working with WordPress for quite a while.

    You could try pasting your troublesome code in here and you should get a response from somebody.

    All the best,

    Rory. ??

    As for the HTML editor, no there doesn’t appear to be a little handle to drag to make it bigger like on the Visual Editor

    just drag it down in visual and switch to html. or toggle full screen mode.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘frustrated with table placement’ is closed to new replies.