Jump to content
Sign in to follow this  
mychaylo

TABLE data displays funny... CSS issue?

Recommended Posts

mychaylo    0
mychaylo

I'm fairly new to this.... so forgive me!

 

I'm using Pagelines, and my very basic TWO-column HTML Table doesn't appear properly in my browser.... two problems:

 

1) the second-column text-content is INDENTED far to the right... I have no idea why. 

2) the second-column text-content is also situated BELOW the image-content in the first column 

 

Check out what I mean... it's weird:

http://mychaylo.com/?page_id=956

 

I gather this has to do with CSS.  But I'm not clear on how to modify CSS, if in fact, that is what I must do.

 

My goal:

- 2-column table

- picture in the first column

- text in the second column, TOP-LEFT aligned, no indents

 

HTML below.

Cheers.

 

 

<table border="1">
<tbody>
<tr>
<td><img class="alignleft size-full wp-image-992" alt="li-man-triathlon-oberlin-62 - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/li-man-triathlon-oberlin-62-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-986" alt="energy farmer - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/energy-farmer-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-1003" alt="peat mine would devastate boreal bog - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/peat-mine-would-devastate-boreal-bog-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-999" alt="mi-ian-page-hydro-120215 - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/mi-ian-page-hydro-120215-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-994" alt="makerspace - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/makerspace-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-1000" alt="mike babinsky - 240x148" src="http://mychaylo.com/wp-content/uploads/2013/01/mike-babinsky-240x148.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
<tr>
<td><img class="alignleft size-full wp-image-998" alt="mb-full-mauro-and-kunuk-3 - 248x140" src="http://mychaylo.com/wp-content/uploads/2013/01/mb-full-mauro-and-kunuk-3-248x140.jpg" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
</tbody>
</table>

 

 

 

 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

I notice from your code that the HTML table uses no classes, IDs or inline CSS to style it.  As a result, WordPress will make it a free-form table allowing WP default styling to affect it. WordPress normally indents the cell level elements of tables unless otherwise instructed by custom CSS.

 

You would probably be better off using CSS to create the table.  Here's a guide to doing that:  http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×