Table cell wont shrink to image size?

I place an image in a table cell and set all properties to "0" but it displays in the browser with extra space on the bottom?

I was just simply adding an image into a cell, not using a style sheet.
And always there is a couple of pixels space below the image, which is the red bkgd color you see.
Here is code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<table height="442" border="0" cellspacing="0" cellpadding="0">
<tbody>
    <tr>
      <td bgcolor="#B13B3D"><img src="Hana/soap_site/IMAGES/Test_img.gif" width="618" height="442" alt=""/></td>
    </tr>
</tbody>
</table>
</body>
</html>

Similar Messages

Problem with images inside of table cells

I've run into a problem on this web page:
http://www.solidrocknet.org/index2.html
The the background of the table cells which contain an image
is showing
through in the form of a strip at the bottom of the cell. You
can see
this as a black strip in the cells which contain the logo
graphic,
centerpiece photo, and the photo strip and as a blue strip
under the 4
separate photos on the bottom.
These problems are appearing in Firefox. It almost looks
correct in
IE6/7 except that the blue strip appears under the bottom
photos.
Can anyone see what I am doing wrong?

The best practice is to include -
a img { border:none; }
in your CSS so that any image inside an anchor tag is
prevented from having
the border.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"K0rrupt" <[email protected]> wrote in
message
news:f5i5fc$bhp$[email protected]..
> sometimes browsers like to display a blue lines around
pictures. So as
> good practice you should add it.
>

How to Reduce Image Size and show upload Progress Bar

i need to capture an image from the camera and send it to the server. however to reduce the amount of data transmitted i want to shrink the image and lower its resolution.
I have code that currently does the following :
UIImage *testImage = [UIImage imageNamed:@"image1.png"]; // this would come from image picker
NSData * imageData = UIImagePNGRepresentation(testImage);
// skipped code that showed URL string setup
NSString *postLength = [NSString stringWithFormat:@"%d", [imageData length]];
NSMutableURLRequest *request = [[[NSMutableURLRequest alloc] init] autorelease];
[request setURL:[NSURL URLWithString:urlString]];
[request setHTTPMethod:@"POST"];
[request setValue:postLength forHTTPHeaderField:@"Content-Length"];
[request setHTTPBody:imageData];
NSURLConnection *conn=[[NSURLConnection alloc] initWithRequest:request delegate:self];
1. need some way to shrink the image size to reduce data traffic
2. need some way to indicate a progress bar as data is being transfered to the server

1. The size is visible in the metadata panel, set the dropdown to EXIF. In addition, in the Grid, with Ctrl-J, you can set the options so that you will see the cropped size in the rectangle surrounding the photo.
2. You cannot, in one action, upload to multiple galleries. Each upload is its own action. I don't know if there is a plug-in to let you upload from LR to 500px in one action; clearly there are plug-ins for Flickr and Smugmug and several others. There should be no need to re-import. Normally, the plug-ins I mentioned will take a TIFF, resize it according to your directions, convert to JPG and upload.

Table cells shift

When I look at my page in Dreamweaver, the cells at the top
of the page of my table are about 248 pixels in width, but when the
page appears on the web, they are out of alignment. I wish I could
lock each table cell so it will not shift.
Here is my website:
http://www.troyrecreation.org/
The cells that have shifted are the image of the woman doing
Pilates, the cell with text to the left, below and below left. It
is a table with 4 cells.
Any help would be appreciated.
Thanks,
Dan

Does changing the table cell code the pilates2 image is in
to:
<td width="247" align="center" valign="top"><img
src="pilates2.jpg"
width="247" height="185"></td>
fix it?
Take care,
Tim
"troyrecreation" <[email protected]> wrote
in message
news:fpl04j$h47$[email protected]..
> When I look at my page in Dreamweaver, the cells at the
top of the page of
> my
> table are about 248 pixels in width, but when the page
appears on the web,
> they
> are out of alignment. I wish I could lock each table
cell so it will not
> shift.
>
> Here is my website:
>
http://www.troyrecreation.org/
>
> The cells that have shifted are the image of the woman
doing Pilates, the
> cell
> with text to the left, below and below left. It is a
table with 4 cells.
>
> Any help would be appreciated.
>
> Thanks,
> Dan
>

CSS positioning within table cells

Maybe I've just been staring at this too long but I'm stumped. I want to position a table (could be a list) within a table by setting the parent element to relative and the position of the child element to absolute. The only problem is that I can't get my table cells to act as parent elements so the smaller table (or list) positions itself relative to the wrapper div which is also set to relative. Do I have to create divs within the table cells? If so it sort of defeats the purpose of the table. How can I do this using appropriate markup?
Hope this makes sense. I think my brain has gone numb.
Here's the page I'm trying to fix:
http://www.kirstencassidy.com/_miniprints2.html
Thanks in advance for your help.

Lon Winters wrote:
What I see is a table with red borders that contain images left justified. What do you want to position - the images? I think you could do all this in CSS without any tables.
I think what the OP is trying to do is position some text to the right of the images?
Obvious answer as the OP has used tables is to insert another 2 column table into each existing table cell, one for the image an one for the text.
Alternative is to use css to float the images left, give the image a right margin and then the text will appear to the right of it in the table cell. Then just style the text with some css?

What's the best way to place images in table cells?

I'm working on a basic tooling catalog/list using a table for all of the information. One of the columns is for an image of the tool. Is there a way to place each image in a cell and have it resized to fit the cell dimensions (including my text inset settings)? I'm using CS4 and the images are all tiff files, although I also have psd files of each. Any suggestions would be appreciated.

Table cells don't adjust automatically except in the vertical direction when set to "at least" some dimension, and I suspect you don't really want that anyway. Keep in mind that column width is constant through the whole table, so fitting the cell to the largest image is going to give you a giant coumn width that isn't used for smaller product shots in the same table.
What about making an image frame the size you want, and setting the fitting options to fit proportionally? Copy that frame and paste into the cell, then place the image in the frame.

Lock table cell size

Hello,
I am creating a web form and want everything to line up. I am looking on how I can lock a table cell size. I simply clicked on the <td> selector and typed 70 in the Width, but it readjusts.
Thank you.

Hi melanie,
here the whole source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Black Oak Sign Up</title>

<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#c8cacb" marginheight="0" marginwidth="0">
<div id="wrapper">
<div id="body">
    <form id="form1" name='form1' method='POST' action="">
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">First*</td>
          <td align="left"><span id="sprytextfield1">
            <input type="text" name="FirstNAME" id="FirstNAME" />
          <span class="textfieldRequiredMsg"></span></span></td>
        </tr>
      </table>
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">Last*</td>
          <td align="left"><span id="sprytextfield2">
            <input type="text" name="LastADD1" id="LastADD1" />
          <span class="textfieldRequiredMsg"></span></span></td>
        </tr>
      </table>
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">Steet 1*</td>
          <td width="235" align="left"><span id="sprytextfield3">
            <input name="STEET1" type="text" id="STEET1" size="35" />
          </span></td>
          <td width="109" align="right">Street 2 </td>
          <td width="49" align="right"><div align="center">
            <input name="Steet2ADD2" type="text" id="Steet2ADD2" size="5" />
          </div></td>
        </tr>
      </table>
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">City*</td>
          <td width="151" align="left"><span id="sprytextfield4">
            <input type="text" name="city" id="city" />
          </span></td>
          <td width="41" align="right">ST*</td>
          <td width="37"><span id="sprytextfield5">
            <input name="state" type="text" id="state" size="2" maxlength="2" />
            <span class="textfieldRequiredMsg"></span></span></td>
          <td width="111" align="right">Zip*</td>
          <td width="49" align="right"><div align="center"><span id="sprytextfield6">
            <input name="zip" type="text" id="zip" size="5" maxlength="5" />
          </span></div></td>
        </tr>
      </table>
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">Email*</td>
          <td align="left"><span id="sprytextfield7">
            <input name="email" type="text" id="email" size="35" />
          </span></td>
        </tr>
      </table>
      <table width="500" border="0" cellpadding="0">
        <tr>
          <td width="20%">Birthday*</td>
          <td align="left"><span id="sprytextfield8">
            <input name="DayBirth" type="text" id="DayBirth" maxlength="10" />
          </span></td>
        </tr>
      </table>
      <p>* A value is required</p>
    </form>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
HCH,
Hans-G.
updated: hans-g.

How to set image size in a table view

Hi,
I've just built a small VC application showing some process chain logs in a table view. For the different status types Error, Warning and Success I show the well-known traffic light icons. But up to now I haven't found out how to set the image size in a table view (height & width field is greyed out for the table). Any ideas? Or is it just not possible?
Thanks for your help,
Heiko

Hello Heiko,
I don't know, if it is possible, but I would say,
it's not implemented yet. Maybe you can change the picture size and use then the pictures, that might be a workaround, if you can't change the height and width in VC.
Best Regards,
Marcel

Scaling of images in a table cell

Hi,
I have an issue aboute the scaling of images in a table cell. The table layout is fixed but the images can vary. I tried to transform the images but every time the transformation matrix has a scaling != 1.0 the function results in an error.
The following code is used.
PageItem pi = myCell.getNthChildPageItem(0);
TransformationMatrix[] matrix = pi.transformValuesOf(kCoordinateSpacesInnerCoordinates.value);
TransformationMatrix scalemat = matrix[0].scaleMatrix(OptArg.makeDouble(0.5), OptArg.makeDouble(0.5));
Unit[] matValues = UnitUtils.createDouble(scalemat.getMatrixValues());
pi.transform(
enums.kCoordinateSpacesInnerCoordinates.value,
VariableTypeUtils.createEnumeration(enums.kAnchorPointCenterAnchor.value),
VariableTypeUtils.createUnitList(matValues),
OptArg.makeVariableType(VariableTypeUtils.createEnumeration( enums.kMatrixContentScaleValues.value ) ),
OptArg.noBoolean()
Any suggestions?
Regards,
tom

Hi!
You may try to vary the settings for property "type"
navigation
function
reporting
result
If this does not help to solve your issue open a ticket at SAP Support.
There are several UIElements which show such a behaviour and you have no (documented) chance to change this.
Hope this helps.
Regards,
Volker

Placing text beside image in a table cell?

I'm creating business cards (using a Printworks template), and I want to place text to the right of the inserted picture.
I've copied and pasted the jpg fine onto the left side of the cell, yet when I try to type text, the cursor only lets me begin typing at the bottom right side of the photo, not up at the top right side, where I want the info to start.
Further, when I try to insert a Text Box into the cell, it won't go inside.
So, my question: *How do I get image and text together inside a table cell?*

I made an ultimate test.
I grouped a jpeg picture and a shape in which I inserted a piece of text. You may see it on the screenshot.
I inserting the group in the cell hoping that the group will be correctly displayed.
Nada, only the picture appears.
If I select the object embedded in the cell, copy it, paste it in an other location, I may ungroup it but the now separated shape no longer contains the original text
Yvan KOENIG (VALLAURIS, France) lundi 7 juin 2010 17:55:18

Can I Place an Image in a Table Cell?

I have a table in ID CS3. Can I place an image in one, or more than one, table cell? I see a place to manage fills, but don't see an option for images.

I am working on a calendar project and variously want to: (1) put an individual image in a box, (2) put a continuous image behind more than one box like two dates side by side, (3) put a continuous image in multiple boxes that although they constitute a multiple of boxes, might not be rectangular, (4) put text over any or all of the preceeding.
I can places gridlines on the page, create text and image boxes for for each date, and the join the images boxes as necessary. Then for the box lines I could use an empty table or I could draw them individually and group them. This would get me what I want. I just thought this might be done easier with a table.

Background Image In Table Cell

I'm not sure what I'm doing wrong or missing here. This is the first time that I'm using an image as a background. I've made a table with a 100% width with 3 colums and 3 rows. The left and right table cells have been merged and the 3 middle rows are at a width of 938 pixels. I have cropped the images correctly. The right column lines up perfectly, but the left column does not line up like it's supposed to with the image. You can take a look at it by going to http://www.wattsconcepts.com/new
Here is the code below if anyone wants to take a look at it. Any help in solving this is greatly appreciated. I am using Dreamweaver CS5.5
Thank you for your time!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #000;
          background-image: url();
</style>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td rowspan="3" align="left" valign="top" background="images/left-index.jpg"> </td>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
    <td rowspan="3" align="left" valign="top" background="images/right-index.jpg"> </td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>

Your HTML code should ideally be as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
</style>
</head>
<body>
<table width="938px" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>
Also, you don't need 3 columns for this website. 1 column and 3 rows should do. Also, never use 100% for <table> width. It's bad practice as you're making your site fluid which will render your site to malfunction on some browsers
And you had the entire 3 sections as 1 image as your CSS body background-image. This is bad practice. Crop only what you want for each section, never give the entire merged site as 1 image.
Try the code I've given you above and it should work perfect.
A quick tip: Try learning and using DIV with pure CSS styling instead of tables. Tables are a thing of the past. You could just google it and you have tons of free resources on how to create a site using DIV. Also, there's a beautiful tutorial posted by one of our senior members here: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html that explains how to create HTML5 site with Pure CSS styling using DIV tags.
Cheers,
ST

Slide show in table cell and text in layer above images

I need to create a slide show within
a table cell (one cell of several). The
display should commence after the launch page has been completely loaded and only appear once. Also, there needs to be text in a layer above the slide images which changes coordinated with each slide but is generated independent of each slide and therefore may be positioned within the cell independently.
Anyone?

Hi again Nancy,
You've provided very helpful information in the past. The code for the "show" in the upper right position would be perfect if the text-bar background could be made transparent and positioned higher against the image. Your suggestion has forced me to clarify my concept in my own mind. The need for transparency hadn't occurred to me yet.
An alternative would be the upper left "show" in a bottom layer with text with a transparent background in a top layer. The text in the top layer would remain constant from the time of the page's loading; i.e., would be independent of changes in the bottom layer. Perhaps I could figure out the code necessary to coordinate that text's change of shade from one slide to the next appropriate to the slide's shade.
I'm assuming that a table cell can be partitioned into layers using HTML and each layer programmed independently using JavaScript.
Thanks again for your prompt attention.

Place image in table cell in pages for iOS 5

Can I place an image into a table cell in pages for iphone? This would keep me from having to take my expensive MBA out on the dangerous (for the computer) jobsite. It would change my life to be able to do this on the iphone as my reports require it. As of yet I've found no way to do this.
Thanks in advance for your help!
~CR

Put the text cursor in the cell and use the regual Place command. The image will be placed as an inline graphic in the empty paragraph.

Images in Table cell

HI,
I have to display different images in a SAP .Net tabe control cell depends on the field values from a database. I set the Tabel cell editor property to "Image Instance" and programatically assign the relative path of the image "web resourcesimagesxxx.gif" according to the database field values. I can see at runtime the web source have correct URL to the image source but the image is not getting displayed on the iView. What am I doing wrong?? I follow this article to do the code part
https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/nw/dotnet/pdk for .net faq - .net controls.faq
Please help.
thanks

Thanks for the reply guys,
Here is the code; I'm not using server "itemDtaBound"
I set the field type as "image instance" at design time and at runtime after reading the data assign the graphics to the control according to the value returned from the database at the Page_Load
I only took the relevant portion
        Dim sOrderByField As String = ""
        Dim sqlDate As String = FormatDBDateTimeSQL(Format(Now, "MM/dd/yyyy 00:00:00"))
        'Dim ConnStr As String = "server='(local)'; trusted_connection=true; database='tllink'"
        sSQL = "SELECT EmployeeName, BadgeId, Punch_Type,Punch_Date, Punch_time, TerminalID FROM TERMINAL_TRANSACTIONS"
     sSQL &= " WHERE (Punch_Date =" & sqlDate & ") AND (Punch_Type IN ('IN', 'OUT' ,'DEPT' )) AND ((CAST(Punch_Time AS VARCHAR) + '-' + BadgeId) IN"
        sSQL &= " (SELECT (CAST(MAX(PUNCH_TIME) AS VARCHAR) + '-' + BADGEID) FROM TERMINAL_TRANSACTIONS"
        sSQL &= " WHERE (Punch_Date =" & sqlDate & ") GROUP BY BADGEID))"
rRec = g_cDB.GetRec(sSQL, , True)
OleDbDataAdapter1.Fill(dSQLSet,rRec, "TERMINAL_TRANSACTIONS")
        'SQLTable = dSQLSet.Tables(0)
        Dim RowCurrent As DataRow
        Dim tr As SAP.Web.UI.Controls.TableRow
For Each RowCurrent In dSQLSet.Table("TERMINAL_TRANSACTIONS").Rows
            tr = New SAP.Web.UI.Controls.TableRow
            If IsDBNull(RowCurrent("EmployeeName")) = False Then
                tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New TextView(RowCurrent("EmployeeName"))))
            Else
                tr.Cells.Add(New SAP.Web.UI.Controls.TableCell)
            End If
            If IsDBNull(RowCurrent("badgeid")) = False Then
                tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New TextView(RowCurrent("badgeid"))))
            Else
                tr.Cells.Add(New SAP.Web.UI.Controls.TableCell)
            End If
            If IsDBNull(RowCurrent("Punch_Type")) = False Then
                If RowCurrent("Punch_Type") = "IN" Then
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/in.gif")))
                ElseIf RowCurrent("Punch_Type") = "OUT" Then
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/out.gif")))
                Else
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/transfer.gif")))
                End If
       End If
       Me.DataTable.Items.Add(tr)
Next
My table displays the employee name and badge id but the images are coming as broken link. I added the images to the web resources before deploying the par.
The follwing is the runtime source from the browser
</td></tr><tr rr="1"><td tableid="tae241ba0_DataTable" cc="0" rr="1" class="urSTTD urSTTDBdr1" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" style="margin:0px;"></span></div></td><td tableid="tae241ba0_DataTable" cc="1" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">000000000003412770</span></div></td><td tableid="tae241ba0_DataTable" cc="2" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><img class="urImg" src="/irj/portalapps/Timelink_Portal_APP/Images/green.gif" ct="Image" border="0" style="height:28;width:30;"></img></div></td><td tableid="tae241ba0_DataTable" cc="3" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><img class="urImg" src="/irj/portalapps/Timelink_Portal_APP/Images/in.gif" ct="Image" border="0"></img></div></td><td tableid="tae241ba0_DataTable" cc="4" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">2/10/2006</span></div></td><td tableid="tae241ba0_DataTable" cc="5" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">07:24:58</span></div>
as you can see it includes the path to th images green.gif and in.gif
thanks

Table cell wont shrink to image size?

Similar Messages

Maybe you are looking for