Questions about tables and spacing
-
Hello everyone.
Would appreciate any comments or advice on inserting tables and spacing between rows on my blot http://photojourn.wordpress.com
When I insert photographs I usually use HTML code similar to this:
<div style=”float:left; width:280px;margin-right:5px”>
<table border=”0″ width=”280″>
<tbody>
<tr>
<td valign=”top”>”Insert image here”</td>
</tr><tr>
<td valign=”top”>”Insert image here”</td>
</tr>
</tbody></table></div>I’m not particularly knowledgeable in HTML coding and a friend came up with the original width measurement. I’m not sure how he calculated the width so would appreciate advice on that. All I know is that it works.
How do you calculate the usable space in a wordpress blog?
Secondly, on my latest post http://photojourn.wordpress.com/2009/03/10/elephants-birthday-a-jumbo-celebration-in-thailand/ you will see that there are two photographs floated left part-way down the page. There is a bigger gap between these two photographs and beneath it than on the three photographs floated right further down. There is also a larger line break in the text at the start of the three floated right photographs. Is there a way of fixing this and adjusting the spacing between the photographs?
For the main photo on this page the HTML code is set to:
<div style=”float:left; width:380px;margin-right:5px”>
<table border=”0″ width=”380″>With the image sized to 350.
Thanks for any suggestions.
John
The blog I need help with is: (visible only to logged in users)
-
The div float:left;width:280px part of the code means confine the content of that section to that width and place it to the left. That’s an unnecessarily complicated way of aligning things, first because you have to change the number all the time (depending on the image width), second because the table itself can be aligned left or right. And the margin command is also unnecessary: the images have some margin around them anyway. So that whole line of code (along with the closing div tag at the end) is useless.
The valign command means vertical alignment within the border cell: useful for rows of unequal items, absolutely pointless when you only have one item per row.
So, for your left-aligned images you need no more than this:
<table border="0" align="left"> <tr><td>IMAGE_1_CODE_HERE</td></tr> <tr><td>IMAGE_2_CODE_HERE</td></tr> </table>Accordingly, for the right-aligned images:
<table border="0" align="right"> <tr><td>IMAGE1_CODE_HERE</td></tr> <tr><td>IMAGE2_CODE_HERE</td></tr> <tr><td>IMAGE3_CODE_HERE</td></tr> </table> -
panaghiotisadam
Thank you very, very much. That makes life so much easier.
I imagine that simpler code reduces page load as well?
Any suggestions on either opening or closing the vertical space between images and/or text or is that a default spacing?
Thank you very, very much again.
-
Oh, wait. When I tried that it places the photos above or below the text rather than wrapping down one side or the other.
-
-
@photojourn (& Tess): ? Text shows up below an item when the alignment of the item is set to none. When it’s set to left or right, the text should wrap around with no additional float command.
As for your previous question, to increase the default vertical space between the images and the text you can add this after “table”, with a space before and a space after:
style="padding-top:NUMBER_HEREpx;padding-bottom:NUMBER_HEREpx;"
I don’t know of a way to decrease it. (The problem is the captions: they automatically add extra space we cannot control.) -
-
Yes – that’s why I included the alignment attribute in the table code I suggested above.
-
-
Okay, great. Thanks for that. Yes the captions put a big space in between each row of photos.
Seems to be a little less air between them though if I run the code like this:
<table style=”padding-top:0px;padding-bottom:0px;” border=”0″ align=”right”>
<tr>
<td>IMAGE1_CODE_HERE
IMAGE2_CODE_HERE
IMAGE3_CODE_HERE</td>
</tr>
</table>Sometimes it would be nice to run them as a continuous strip or with a tighter spacing though. Seems the captioning adds a pre-set spacing formula.
-
photojourn,
You do know that you don’t have to use the caption feature? You can use the table code to make your own captions, of your own design?
This will make your font small:
<span style="font-size:.8em;line-height:1.2em;">CAPTION TEXT</span>
This will make 3 pictures in a “column” with captions:<table border="0" align="right"> <tbody> <tr><!-- tr means "table row" begin a row --> <td>IMAGE_1_CODE_HERE</td><!-- td means the data in the row --> </tr><!-- end the row --> <tr> <td>CAPTION_HERE</td><!-- you can add style to the text of the caption --> </tr> <tr> <td>IMAGE_1_CODE_HERE</td> </tr> <tr> <td>CAPTION_HERE</td> </tr> <tr> <td>IMAGE_1_CODE_HERE</td> </tr> <tr> <td>CAPTION_HERE</td> </tr> </tbody></table> -
Oh great. Thanks 1tess for that. That’s really useful and makes it possible to run a column of closely spaced images with a single caption at the bottom.
What code though is required to wrap the caption to the width of the image?
This is very, very useful. Thanks you again.
-
Tess is right: if you want full control over distances etc., you’d better forget the caption feature of the image uploader and write your image legends in the post. So (since you’re not afraid of code!) here’s a fully customizable version:
<table align="left" style="border:solid 1px #cdcdcd;background-color:#eeeeee;margin-top:2px;margin-right:14px;margin-bottom:2px;width:THUMBNAIL_WIDTH_PLUS_TWO_HEREpx;padding:1px;"> <tr><td>THUMBNAIL1_CODE_HERE</td></tr> <tr><td align="justify" style="padding-bottom:4px;">LEGEND1_HERE</td></tr> <tr><td>THUMBNAIL2_CODE_HERE</td></tr> <tr><td align="justify">LEGEND2_HERE</td></tr> </table>This example is for a column of two images aligned left. Of course you can add more pairs of table rows, and/or switch alignleft+marginright to their opposites. Note that when initially uploading the images, their alignment has to be set to none.
Explanations:
– The border+background+hex+padding parts of the code will produce a box similar to the one produced by the wp caption formula: thin grey border, light grey background (I’ve made it slightly darker, but you can change that – or even use a colored shade). *
– The margins part will let you adjust the space above, below and to the side of the table.
– The width command (thumbnail width plus two) will constrain your long legends to the width of the images.
– The padding command for the upper legend will let you adjust the distance between the legend and the next image. (If you want more space between the legend and its own image, you can add padding-top as well.)
– I’ve set the legend alignment to justify because you’ve got long legends (I think multiple lines look better that way); for short ones use “center”. *** That’s assuming you do like the effect. If you want no border and no background, use this instead:
<table border="0" align="left" style="margin-top:2px;margin-right:14px;margin-bottom:2px;width:THUMBNAIL_WIDTH_HEREpx;">
** You can even reduce the line spacing and the font size of the legend texts, e.g.:
style="line-height:1.2;font-size:80%;"
- The topic ‘Questions about tables and spacing’ is closed to new replies.
WordPress.com Forums 