Archived

This topic is now archived and is closed to further replies.

  • 0

TABLE data displays funny... CSS issue?

Question

Posted · Report post

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

1 answer to this question

Posted · Report post

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/

Share this post


Link to post
Share on other sites