How to Change Cell Properties to Fix Pictures
When designing a website, there are many factors that must be taken into consideration. For most beginning Web designers, the biggest concern may be the content that is included on each page. However, there is an underlying structure to the page that must be taken into account before that content can be displayed. Some designers will choose to utilize a table structure, which is comprised of rows and cells. If a picture is inserted into a table cell and it is not displaying correctly, it is possible to change the properties of the table cell to correct the image display.
Other People Are Reading
Instructions
-
-
1
Navigate to the HTML page on your computer that contains the image you need to fix, then right click on it and select the "Open with" option. Choose your HTML editing program from the list of available programs.
-
2
Select the "Code" view at the bottom of the screen, or the equivalent option for viewing the HTML code in your editor.
-
-
3
Scroll through the HTML until you find the problematic image.
-
4
Locate the table cell tag in which the problematic image is contained. It will begin with the tag "<td>" and end with the tag "</td>".
-
5
Look at any additional attributes that are included in the "<td>" tag, such as "colspan" or "style." These attributes affect the way the cell containing the image is displayed. For example, if the cell is positioned as the top-left cell in the table and has an attribute tag of "colspan=2," then that cell will also be occupying the leftmost cell on the second row of the table.
-
6
Remove any tags that are related to the issue you are having with your image. For example, if your picture is located in a cell that contains the attribute "style=width: 100px," but the picture is 200px wide, then the cell may only be displaying a portion of the picture. Removing the "style=width" attribute will remove that restriction to allow you to view the entire image.
-
7
Review any correct attributes that are included in the cell for spelling and syntax. Most attributes will require a structure such as "attribute=value," where the value is the effect that you intend to apply to the cell. Take note of the space following the "=" sign.
-
8
Save the HTML document, then double click on the file to open it in a Web browser. Once you have located the offending cell attribute, the picture will display as intended.
-
1
Tips & Warnings
If you are attempting to resize the image using the "height" and "width" attributes, you may encounter some issues with distortion. Consider using an image-editing program to resize the image, which will retain the correct dimensional proportions as you adjust the size.
If the image is not displaying at all, the issue may be with an attribute related to the "img" tag, such as an incorrectly referenced "src" attribute. Consult the W3 Schools website for proper "img" tag syntax. See Resources.
