Jump to content


Photo
- - - - -

TABLE data displays funny... CSS issue?


  • Please log in to reply
1 reply to this topic

#1 mychaylo

mychaylo

    Newbie

  • Members
  • 1 posts
  • Locationwest coast
  • Country: Country Flag

Posted 23 January 2013 - 03:25 AM

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:

Please Login or Register to see this Hidden Content

 

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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" 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="

Please Login or Register to see this Hidden Content

" width="248" height="140" /></td>
<td>First Headline
Second Headline</td>
</tr>
</tbody>
</table>

 

 

 

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 January 2013 - 03:44 AM

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: 

Please Login or Register to see this Hidden Content